Skip to content

geojson fill broken #8161

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
shiftonetothree opened this issue Apr 17, 2019 · 1 comment
Closed

geojson fill broken #8161

shiftonetothree opened this issue Apr 17, 2019 · 1 comment

Comments

@shiftonetothree
Copy link

shiftonetothree commented Apr 17, 2019 •
edited
Loading

0.53.1:

browser:
chrome

Steps to Trigger Behavior

1.host the code below
2.put your mapbox token at accessToken in code
3.open with your browser

code

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Add a GeoJSON polygon</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
 
<div id='map'></div>
<script>
mapboxgl.accessToken = 'your token here';
var map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/outdoors-v11",
center: [123.219826,38.9898],
zoom: 0
});
 
map.on("load", function() {
map.addSource("national-park", {
"type": "geojson",
"data": {"type":"FeatureCollection","crs":{"type":"unionGeo","properties":{"name":"urn:ogc:def:crs:OGC:1.3:CRS84"}}, "features": [
{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[123.219826,38.9898],[122.589,37.2627],[120.149509,37.783781],[119.679923,36.303579],[122.075,35.7908],[121.503145,34.086319],[120.946328,32.359149],[120.415,30.6479],[120.41439,30.648031],[119.917,28.9885],[119.916241,28.988663],[119.435,27.3268],[117.15,27.8216],[117.150117,27.822039],[115.354,28.1824],[115.543276,28.942956],[115.364369,28.977342],[115.337,28.8679],[114.991,28.9351],[114.991049,28.935298],[114.655,28.9997],[114.723078,29.278384],[114.723,29.2784],[114.729644,29.305264],[114.733,29.319],[114.73304,29.318992],[114.802,29.5978],[115.140355,29.533037],[115.200527,29.770901],[114.861,29.8358],[114.879888,29.91219],[113.323,30.1967],[113.323135,30.197276],[111.04,30.5756],[111.390449,32.248726],[111.39,32.2488],[111.425517,32.416147],[111.428,32.428],[111.428031,32.427994],[111.783,34.1005],[111.78364,34.100397],[111.891339,34.599865],[110.539,34.8639],[110.956614,36.363086],[110.955,36.3634],[111.013173,36.566127],[111.053,36.7091],[111.054136,36.708879],[111.484,38.2069],[112.635815,37.985522],[112.888,39.1114],[112.891859,39.110819],[113.274,40.7795],[113.276959,40.779063],[113.669,42.4465],[114.256482,42.361639],[114.276,42.4447],[117.059,42.0426],[117.058219,42.039798],[119.091217,41.699886],[119.626,43.3569],[121.92,42.9268],[121.918966,42.923931],[124.545,42.3681],[123.847511,40.63098],[123.219826,38.9898]],[[115.296352,29.943742],[115.27,29.8409],[115.231063,29.848015],[115.22149,29.810268],[115.43642,29.76864],[115.453122,29.835976],[115.453,29.836],[115.47199,29.911654],[115.296352,29.943742]],[[122.621,29.5354],[122.548219,29.254846],[122.207,29.3228],[122.125,29.0025],[122.12536,29.002428],[122.054,28.7236],[122.393437,28.655906],[122.393,28.6542],[122.747,28.5826],[122.832,28.9063],[122.48720899,28.975742],[122.547782,29.209425],[122.893,29.1398],[122.978,29.4634],[122.621,29.5354]]]},"properties":{"satellite":"GF1"}},
{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[123.721098,33.904877],[124.430318,33.774566],[124.276928,33.203517],[124.129566,32.649776],[123.982454,32.092139],[123.835183,31.52833],[123.690134,30.968126],[123.548388,30.415735],[123.407006,29.860331],[123.265616,29.300312],[123.125694,28.741292],[122.982644,28.165609],[122.31427,28.292679],[122.449251,28.850545],[122.449225,28.850551],[122.453438,28.867847],[122.458938,28.890577],[122.458973,28.890571],[122.585068,29.408241],[122.585039,29.408247],[122.588794,29.423539],[122.594798,29.448186],[122.594844,29.448178],[122.721931,29.9657],[122.721882,29.965709],[122.728605,29.992881],[122.731795,30.005868],[122.731818,30.005864],[122.859778,30.52297],[122.859741,30.522978],[122.865064,30.544332],[122.869754,30.563283],[122.869787,30.563276],[122.998578,31.079894],[122.998546,31.079901],[123.002632,31.096155],[123.008727,31.120606],[123.008777,31.120596],[123.138637,31.63712],[123.138598,31.637127],[123.143602,31.656872],[123.148858,31.677774],[123.148899,31.677767],[123.279735,32.19392],[123.279671,32.193932],[123.286829,32.221909],[123.290071,32.234696],[123.2901,32.23469],[123.422143,32.750727],[123.422084,32.750738],[123.429744,32.780435],[123.432578,32.791508],[123.4326,32.791503],[123.565658,33.307313],[123.565601,33.307324],[123.572528,33.333945],[123.576234,33.34831],[123.576265,33.348304],[123.721098,33.904877]]]},"properties":{"satellite":"GF1B"}}
]}
});
 
map.addLayer({
"id": "park-boundary",
"type": "fill",
"source": "national-park",
"paint": {
"fill-color": "#888888",
"fill-opacity": 0.4
},
"filter": ["==", "$type", "Polygon"]
});
 
map.addLayer({
"id": "park-volcanoes",
"type": "circle",
"source": "national-park",
"paint": {
"circle-radius": 6,
"circle-color": "#B42222"
},
"filter": ["==", "$type", "Point"],
});
});
</script>
 
</body>
</html>

Expected Behavior

fill stable
wok here http://geojson.io

Actual Behavior

fill broken
@mourner
Copy link
Member

mourner commented Apr 17, 2019

Your GeoJSON is not valid — in the first feature, an inner ring (hole) is outside of the outer polygon. We can't technically render bad data like this. See #7023 for more context.

@mourner mourner closed this as completed Apr 17, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mourner @shiftonetothree