mastersigat/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## 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
	<!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