D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
wboykinm
Full window
Github gist
Mapbox GL multiple styles
<!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.13.1/mapbox-gl.js'></script> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.13.1/mapbox-gl.css' rel='stylesheet' /> <style> body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } </style> </head> <body> <style> #menu { position: absolute; background: #fff; padding: 10px; font-family: 'Open Sans', sans-serif; } </style> <div id='map'></div> <div id='menu'> <input id='basic' type='radio' name='rtoggle' value='basic' checked='checked'> <label for='basic'>basic</label> <input id='streets' type='radio' name='rtoggle' value='streets'> <label for='streets'>streets</label> <input id='emerald' type='radio' name='rtoggle' value='emerald'> <label for='emerald'>emerald</label> <input id='bright' type='radio' name='rtoggle' value='bright'> <label for='bright'>bright</label> <input id='light' type='radio' name='rtoggle' value='light'> <label for='light'>light</label> <input id='dark' type='radio' name='rtoggle' value='dark'> <label for='dark'>dark</label> <input id='satellite' type='radio' name='rtoggle' value='satellite'> <label for='satellite'>satellite</label> </div> <script> mapboxgl.accessToken = 'pk.eyJ1IjoibGFuZHBsYW5uZXIiLCJhIjoicUtlZGgwYyJ9.UFYz8MD4lI4kIzk9bjGFvg'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/basic-v8', zoom: 13, center: [4.899, 52.372] }); var layerList = document.getElementById('menu'); var inputs = layerList.getElementsByTagName('input'); function switchLayer(layer) { var layerId = layer.target.id; map.setStyle('mapbox://styles/mapbox/' + layerId + '-v8'); } for (var i = 0; i < inputs.length; i++) { inputs[i].onclick = switchLayer; } </script> </body> </html>
https://api.tiles.mapbox.com/mapbox-gl-js/v0.13.1/mapbox-gl.js