https://hotelreginabordeaux.com/tags/map.tag

1<map>
2	<div id="container-map">
3		<div id="map-controls">
4
5
6			<a if="{ parking }"
7				id="toggle-parking">
8				Afficher les parkings
9			</a>
10
11			<a if="{ transport }"
12				id="toggle-transport">
13				Afficher le transport en commun
14			</a>
15
16		</div>
17		<div id="map"></div>
18	</div>
19
20	<script>
21
22		map_tag = this;
23		map_tag.curLang = curLang;
24		var zoom = (typeof opts.zoom !== 'undefined') ? opts.zoom : 15;
25		var markers = (typeof opts.markers !== 'undefined') ? opts.markers : false;
26		map_tag.parking = (typeof opts.parking !== 'undefined') ? opts.parking : false;
27		map_tag.transport = (typeof opts.transport !== 'undefined') ? opts.transport : false;
28
29		if (markers) {
30			loadMap(markers[0].lat, markers[0].lng, markers, zoom);
31		}
32
33		function loadMap(
34			center_lat,
35			center_lng,
36			markers,
37			zoom
38		) {
39
40
41			$('head').append(
42				'<link rel="stylesheet" href="/js/plugins/leaflet/gestureHandling/leaflet-gesture-handling.min.css" type="text/css" />');
43
44			$.getScript('https://unpkg.com/[email protected]/osmtogeojson.js');
45
46
47			$.getScript('/js/plugins/leaflet/leaflet.js')
48				.done(function () {
49
50					map_tag.map = L.map('map', {
51						gestureHandling: true,
52						center: [center_lat, center_lng],
53						zoom: zoom,
54					});
55
56
57
58					const baseLayer = L.layerGroup();
59
60					addMarkers(baseLayer, markers);
61
62					baseLayer.addTo(map_tag.map);
63
64					if (map_tag.parking) {
65						map_tag.parkingLayer = L.featureGroup();
66						addMarkers(map_tag.parkingLayer, map_tag.parking);
67					}
68
69					if (map_tag.transport) {
70						map_tag.transportLayer = L.featureGroup();
71						addMarkers(map_tag.transportLayer, map_tag.transport);
72					}
73
74					var OpenStreetMap_HOT = L.tileLayer.grayscale('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
75						maxZoom: 19,
76						attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Tiles style by <a href="https://www.hotosm.org/" target="_blank">Humanitarian OpenStreetMap Team</a> hosted by <a href="https://openstreetmap.fr/" target="_blank">OpenStreetMap France</a>'
77					});
78
79					map_tag.map.addLayer(OpenStreetMap_HOT);
80
81					// var tileLayer = new L.TileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_labels_under/{z}/{x}/{y}.png', {
82					// 	maxZoom: 20,
83					// 	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
84					// }
85
86					// );
87
88
89					// map_tag.map.addLayer(tileLayer);
90
91				});
92		}
93
94		function addMarkers(layerGroup, markers) {
95			for (var i = 0; i < markers.length; i++) {
96
97				let marker = L.marker(
98					[markers[i].lat, markers[i].lng]).addTo(layerGroup);
99
100				if (
101					markers[i]['icon'] !== undefined &&
102					markers[i]['icon'] !== false
103				) {
104
105					let img = new Image();
106					let icon_url = markers[i]['icon'];
107
108					img.src = icon_url;
109
110					img.onload = function () {
111
112						let icon = new L.icon({
113							iconUrl: icon_url,
114							// iconAnchor: [(this.width / 2), this.height],
115							popupAnchor: [0, -10],
116							iconSize: [this.width, this.height]
117
118						});
119
120						marker.setIcon(icon);
121
122					}
123
124				}
125
126				if (markers[i]['popup']) {
127					var popup_content = markers[i].popup;
128
129					marker.bindPopup(popup_content);
130
131					if (markers[i]['principal']) {
132
133						marker.on('add', function () {
134							marker.openPopup();
135						});
136					}
137				}
138
139			}
140		}
141
142		this.on('mount', function () {
143
144			$('#toggle-parking').on('click', function (e) {
145
146				if (map_tag.map.hasLayer(map_tag.parkingLayer)) {
147					map_tag.map.removeLayer(map_tag.parkingLayer);
148					$(this).removeClass('active');
149				} else {
150					map_tag.parkingLayer.addTo(map_tag.map);
151					$(this).addClass('active');
152				}
153
154				fitAllMarkers();
155
156			});
157
158			$('#toggle-transport').on('click', function (e) {
159
160				if (map_tag.map.hasLayer(map_tag.transportLayer)) {
161					map_tag.map.removeLayer(map_tag.transportLayer);
162					$(this).removeClass('active');
163				} else {
164					map_tag.transportLayer.addTo(map_tag.map);
165					$(this).addClass('active');
166				}
167
168				fitAllMarkers();
169
170			});
171
172			function fitAllMarkers() {
173				let allMarkers = L.featureGroup();
174
175				map_tag.map.eachLayer(function (layer) {
176					if (layer instanceof L.Marker) {
177						layer.addTo(allMarkers);
178
179					}
180				});
181				map_tag.map.fitBounds(allMarkers.getBounds());
182
183				if (Object.keys(allMarkers._layers).length < 2) {
184					console.log('zoom', zoom);
185					map_tag.map.setZoom(zoom);
186				}
187
188			}
189
190		});
191	</script>
192
193	<style>
194		/* #map_container {
195			display: flex;
196			height: 600px;
197			align-items: center;
198
199		} */
200
201		#map {
202			flex: 1;
203			width: 100%;
204			height: 600px;
205		}
206
207		#map-controls {
208			display: flex;
209			justify-content: flex-end;
210			gap: 1rem;
211			margin-bottom: 1rem;
212		}
213
214		#map-controls a {
215			border: 1px solid #ddd;
216			padding: 0.2rem 0.5rem;
217			border-radius: 3px;
218		}
219
220		#map-controls #toggle-parking {
221			color: #009dff;
222			border-color: #009dff;
223		}
224
225		#map-controls #toggle-parking.active {
226			color: #fff;
227			background-color: #009dff;
228			border-color: #009dff;
229		}
230
231		#map-controls #toggle-transport {

232			color: #f87100;
233			border-color: #f87100;
234		}
235
236		#map-controls #toggle-transport.active {
237			color: #fff;
238			background-color: #f87100;
239			border-color: #f87100;
240		}
241
242		a.leaflet-popup-close-button {
243			text-decoration: none !important;
244		}
245
246		@media screen and (max-width: 960px) {
247			#map_container {
248				display: block;
249				height: auto;
250			}
251
252			#map {
253				height: 400px;
254			}
255
256			#address {
257				width: 100%;
258				justify-content: center;
259				text-align: center;
260			}
261		}
262
263		.leaflet-top,
264		.leaflet-bottom {
265			z-index: 600;
266		}
267
268		.leaflet-control-zoom a {
269			text-decoration: none !important;
270		}
271
272		.leaflet-popup-content .marker_title {
273			margin: 0 0 5px;
274		}
275
276		.leaflet-popup-content .marker_content p {
277			margin: 0 0 5px;
278		}
279	</style>
280</map>