Skip to content

Instantly share code, notes, and snippets.

Last active January 31, 2021 22:32
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
# MapboxGL / Basemaps externes
license: mit
<!DOCTYPE html>
<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=""></script>
<link href="" rel="stylesheet" />
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
#menu {
position: absolute;
background: #fff;
padding: 10px;
font-family: 'Open Sans', sans-serif;
<div id="map"></div>
<div id="menu">
<label for="streets-v11">Mapbox</label>
<input id="" type="radio" name="rtoggle" value="dark" />
<label for="dark-v10">IGN</label>
<input id="" type="radio" name="rtoggle" value="outdoors" />
<label for="outdoors-v11">Etalab</label>
<input id="" type="radio" name="rtoggle" value="satellite" />
<label for="satellite-v9">ICGC</label>
<input id="" type="radio" name="rtoggle" value="satellite" />
<label for="satellite-v9">fulldark</label>
<input id="" type="radio" name="rtoggle" value="satellite" />
<label for="satellite-v9">night</label>
<input id="" type="radio" name="rtoggle" value="satellite" />
<label for="satellite-v9">POSITRON</label>
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 =;
for (var i = 0; i < inputs.length; i++) {
inputs[i].onclick = switchLayer;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment