Skip to content

Instantly share code, notes, and snippets.

@nrako
Created April 12, 2018 14:52
Show Gist options
  • Save nrako/5c2e1dcf800b27f375dc914c5c986c0d to your computer and use it in GitHub Desktop.
Save nrako/5c2e1dcf800b27f375dc914c5c986c0d to your computer and use it in GitHub Desktop.
mapbox issue circle ordering
<!DOCTYPE html>
<meta name="robots" content="noindex">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet' />
<title>JS Bin</title>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script id="jsbin-javascript">
mapboxgl.accessToken = '<YOUR_API_TOKEN>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
zoom: 3.54
});
window.mymap = map
map.on('load', function() {
map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png', function(error, image) {
if (error) throw error;
console.log(image)
map.on('zoom', () => console.log(map.getZoom()))
map.addSource('demo', {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [0, 0]
},
properties: {
icon: 'ch-motorway-4',
color: 'red'
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [0.9, 0.9]
},
properties: {
icon: 'de-federal-4',
color: 'yellow'
}
}
]
}
});
map.addLayer({
"id": "points",
"type": "symbol",
"source": 'demo',
"layout": {
"icon-image": "{icon}",
"icon-allow-overlap": true
},
"paint": {
"icon-opacity": 0.8
}
});
map.addLayer({
"id": "circles",
"type": "circle",
"source": 'demo',
"paint": {
"circle-radius": 10,
"circle-opacity": 0.8,
"circle-color": {
property: 'icon',
type: 'categorical',
stops: [['ch-motorway-4', 'red'], ['de-federal-4', 'yellow']],
default: 'gray',
}
}
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment