Skip to content

Instantly share code, notes, and snippets.

@mastersigat

mastersigat/.block

Last active January 31, 2021 22:32
Show Gist options
  • Save mastersigat/dd2e0c913391f75f9c2a0796f66cb042 to your computer and use it in GitHub Desktop.
Save mastersigat/dd2e0c913391f75f9c2a0796f66cb042 to your computer and use it in GitHub Desktop.
Download ZIP
# MapboxGL / Basemaps externes
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Change a map's style</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.0.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="streets-v11"
type="radio"
name="rtoggle"
value="streets"
checked="checked"
/>
<label for="streets-v11">Mapbox</label>
<input id="https://vectortiles.ign.fr/demonstrateur/styles/planign.json" type="radio" name="rtoggle" value="dark" />
<label for="dark-v10">IGN</label>
<input id="https://openmaptiles.geo.data.gouv.fr/styles/osm-bright/style.json" type="radio" name="rtoggle" value="outdoors" />
<label for="outdoors-v11">Etalab</label>
<input id="https://geoserveis.icgc.cat/contextmaps/icgc.json" type="radio" name="rtoggle" value="satellite" />
<label for="satellite-v9">ICGC</label>
<input id="https://geoserveis.icgc.cat/contextmaps/fulldark.json" type="radio" name="rtoggle" value="satellite" />
<label for="satellite-v9">fulldark</label>
<input id="https://geoserveis.icgc.cat/contextmaps/night.json" type="radio" name="rtoggle" value="satellite" />
<label for="satellite-v9">night</label>
<input id="https://geoserveis.icgc.cat/contextmaps/positron.json" type="radio" name="rtoggle" value="satellite" />
<label for="satellite-v9">POSITRON</label>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibWFzdGVyc2lnYXQiLCJhIjoiY2tpaXJsaTNsMmEyZjJ4cGU2dmoxMHBoeiJ9.hn9mX2nLGbnlFflMLfme8w';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
zoom: 14,
center: [-1.68, 48.1272]
});
var layerList = document.getElementById('menu');
var inputs = layerList.getElementsByTagName('input');
function switchLayer(layer) {
var layerId = layer.target.id;
map.setStyle(layerId);
}
for (var i = 0; i < inputs.length; i++) {
inputs[i].onclick = switchLayer;
}
</script>
</body>
</html
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment