Skip to content
Snippets Groups Projects
Commit 552859d2 authored by Boris Mericskay's avatar Boris Mericskay
Browse files

Update Basemapsmenu.html

parent a19276ad
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 14 additions and 25 deletions
Basemapsmenu.html
+ 14
− 25
View file @ 552859d2
......@@ -11,20 +11,19 @@
<style>
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;
}
#menu { position: absolute;
background: #fff;
padding: 10px;
font-family: 'Open Sans', sans-serif;}
</style>
</head>
<body>
<div id="map"></div>
<div id="menu"><b>Choose your Basemap Style</b> <hr>
<div id="menu"><b>Choose your Basemap Style</b> <hr>
<input id="https://api.maptiler.com/maps/voyager/style.json?key=rrASqj6frF6l2rrOFR4A" type="radio" name="rtoggle" value="Night" checked />Voyager
<input id="https://api.maptiler.com/maps/streets/style.json?key=rrASqj6frF6l2rrOFR4A" type="radio" name="rtoggle" value="Night" />Streets
<input id="https://api.maptiler.com/maps/toner/style.json?key=rrASqj6frF6l2rrOFR4A" type="radio" name="rtoggle" value="Night" />Toner
......@@ -34,8 +33,8 @@ font-family: 'Open Sans', sans-serif;
<input id="https://geoserveis.icgc.cat/contextmaps/positron.json" type="radio" name="rtoggle" value="Positron" />Positron
<input id="https://geoserveis.icgc.cat/contextmaps/fulldark.json" type="radio" name="rtoggle" value="Fulldark" />Fulldark
<input id="https://geoserveis.icgc.cat/contextmaps/night.json" type="radio" name="rtoggle" value="Night" />Night
</div>
<script>
// Add map
......@@ -46,7 +45,9 @@ style: 'https://api.maptiler.com/maps/voyager/style.json?key=rrASqj6frF6l2rrOFR4
zoom: 14,
center: [-1.68, 48.1272]
});
// Configure basemap menu
var layerList = document.getElementById('menu');
var inputs = layerList.getElementsByTagName('input');
......@@ -61,25 +62,13 @@ inputs[i].onclick = switchLayer;
// Add geolocate control to the map.
map.addControl(
new mapboxgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true
})
);
map.addControl( new mapboxgl.GeolocateControl({positionOptions: {enableHighAccuracy: true}, trackUserLocation: true}));
// Add Navigation Control and Scale Map
map.addControl(new mapboxgl.NavigationControl({position: 'top-left'}));
// Add Navigation Control and Scale Map
map.addControl(new mapboxgl.NavigationControl({position: 'top-left'}));
map.addControl(new mapboxgl.ScaleControl({position: 'bottom-right'}));
</script>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment