Skip to content

Instantly share code, notes, and snippets.

@malwoodsantoro

malwoodsantoro/index.html

Last active March 4, 2022 05:25
Show Gist options
  • Save malwoodsantoro/e1737dcf458d278c16db82ad29679a11 to your computer and use it in GitHub Desktop.
Save malwoodsantoro/e1737dcf458d278c16db82ad29679a11 to your computer and use it in GitHub Desktop.
Download ZIP
Use icon-image with expressions
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></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.43.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/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 = 'pk.eyJ1IjoibWFsLXdvb2QiLCJhIjoiY2oyZ2t2em50MDAyMzJ3cnltMDFhb2NzdiJ9.X-D4Wvo5E5QxeP7K_I3O8w';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mal-wood/cjc84bi7a7ohi2ss5rcy3g9v9', //stylesheet location
center: [-77.30435694392679, 39.48026142402705], // starting position
zoom: 9 // starting zoom
});
map.on('load', function(){
map.addLayer({
"id": "marker-testing",
"type": "symbol",
"source": {
type: 'geojson',
data: './markers.geojson'
},
"layout": {
"icon-image": [
"match",
["string", ["get", "marker"]],
"one",
"pin-red",
"two",
"marker-15",
"three",
"marker-editor",
"marker-15"
],
"icon-size": 1
}
});
});
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
markers.geojson
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment