Basemapsmenu.html 3.33 KB
Newer Older
Boris Mericskay's avatar
Boris Mericskay committed
1
2
3
4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
Boris Mericskay's avatar
Boris Mericskay committed
5
    <title>MapLibreGL / Basemap Styles</title>
Boris Mericskay's avatar
Boris Mericskay committed
6
7
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

Boris Mericskay's avatar
Boris Mericskay committed
8
9
10
11
<script src='https://unpkg.com/maplibre-gl@2.1.1/dist/maplibre-gl.js'></script>
<link href='https://unpkg.com/maplibre-gl@2.1.1/dist/maplibre-gl.css' rel='stylesheet' />


Boris Mericskay's avatar
Boris Mericskay committed
12
13
14
<style>
	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
Boris Mericskay's avatar
Boris Mericskay committed
15
16
17
18
19
20
21
22
23
24
25
26
27
	#menu {
position: absolute;
background: #fff;
padding: 10px;
font-family: 'Open Sans', sans-serif;
}
#marker {
background-image: url('https://sites-formations.univ-rennes2.fr/mastersigat/images/75709127.png');
background-size: cover;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;}
Boris Mericskay's avatar
Boris Mericskay committed
28

Boris Mericskay's avatar
Boris Mericskay committed
29
30
31
32
.Mypopup .mapboxgl-popup-content {
      background-color: black;
      color : white;
      opacity : 0.7;}
Boris Mericskay's avatar
Boris Mericskay committed
33

Boris Mericskay's avatar
Boris Mericskay committed
34
35
</style>
</head>
Boris Mericskay's avatar
Boris Mericskay committed
36
<body>
Boris Mericskay's avatar
Boris Mericskay committed
37
 
Boris Mericskay's avatar
Boris Mericskay committed
38
<div id="map"></div>
Boris Mericskay's avatar
Boris Mericskay committed
39
<div id="menu"><b>Choose your Basemap Style</b> <hr>
Boris Mericskay's avatar
Boris Mericskay committed
40

Boris Mericskay's avatar
Boris Mericskay committed
41
<input id="https://api.maptiler.com/maps/voyager/style.json?key=rrASqj6frF6l2rrOFR4A" type="radio" name="rtoggle" value="Night" checked />Voyager
Boris Mericskay's avatar
Boris Mericskay committed
42
<input id="https://api.maptiler.com/maps/pastel/style.json?key=rrASqj6frF6l2rrOFR4A" type="radio" name="rtoggle" value="Night" />Pastel
Boris Mericskay's avatar
Boris Mericskay committed
43
44
45
<input id="https://api.maptiler.com/maps/toner/style.json?key=rrASqj6frF6l2rrOFR4A" type="radio" name="rtoggle" value="Night" />Toner
<input id="https://geoserveis.icgc.cat/contextmaps/hibrid.json" type="radio" name="rtoggle" value="Hibrid" />Hibrid
<input id="https://geoserveis.icgc.cat/contextmaps/osm-bright.json" type="radio" name="rtoggle" value="OSMbright"  />OSM-Bright
Boris Mericskay's avatar
Boris Mericskay committed
46
47
48
49
<input id="https://geoserveis.icgc.cat/contextmaps/icgc.json" type="radio" name="rtoggle" value="ICGC" />ICGC
<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
Boris Mericskay's avatar
Boris Mericskay committed
50

Boris Mericskay's avatar
Boris Mericskay committed
51
</div>
Boris Mericskay's avatar
Boris Mericskay committed
52
53
54
<script>


Boris Mericskay's avatar
Boris Mericskay committed
55
var map = new maplibregl.Map({
Boris Mericskay's avatar
Boris Mericskay committed
56
container: 'map',
Boris Mericskay's avatar
Boris Mericskay committed
57
style: 'https://api.maptiler.com/maps/voyager/style.json?key=rrASqj6frF6l2rrOFR4A', //Fond de carte 
Boris Mericskay's avatar
Boris Mericskay committed
58
59
60
zoom: 14,
center: [-1.68, 48.1272]
});
Boris Mericskay's avatar
Boris Mericskay committed
61
 
Boris Mericskay's avatar
Boris Mericskay committed
62
63
64
65
66
67
68
69
70
71
72
73
74
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;
}


Boris Mericskay's avatar
Boris Mericskay committed
75
// create the popup
Boris Mericskay's avatar
Boris Mericskay committed
76
var popup = new maplibregl.Popup({ className: "Mypopup", closeButton: false, closeOnClick: true, offset: 25 }).setText('The another great place of Rennes');
Boris Mericskay's avatar
Boris Mericskay committed
77
78
79
80
 
// create DOM element for the marker
var el = document.createElement('div');
el.id = 'marker';
Boris Mericskay's avatar
Boris Mericskay committed
81

Boris Mericskay's avatar
Boris Mericskay committed
82
// create the marker
Boris Mericskay's avatar
Boris Mericskay committed
83
new maplibregl.Marker(el)
Boris Mericskay's avatar
Boris Mericskay committed
84
85
86
.setLngLat([-1.6791, 48.1283])
.setPopup(popup) // sets a popup on this marker
.addTo(map);
Boris Mericskay's avatar
Boris Mericskay committed
87

Boris Mericskay's avatar
Boris Mericskay committed
88
89
90
91


// Add geolocate control to the map.
map.addControl(
Boris Mericskay's avatar
Boris Mericskay committed
92
new maplibregl.GeolocateControl({
Boris Mericskay's avatar
Boris Mericskay committed
93
94
95
96
97
98
99
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true
})
);

Boris Mericskay's avatar
Boris Mericskay committed
100
101

// Add navigation control and scale
Boris Mericskay's avatar
Boris Mericskay committed
102
  
Boris Mericskay's avatar
Boris Mericskay committed
103
104
105
106
107
108
109
110
111
var nav = new maplibregl.NavigationControl();
map.addControl(nav, 'top-left');

var scale = new maplibregl.ScaleControl({
maxWidth: 80,
unit: 'metric'
});
map.addControl(scale);

Boris Mericskay's avatar
Boris Mericskay committed
112
113
114
115

</script>
 
</body>
Boris Mericskay's avatar
Boris Mericskay committed
116
</html