Ajout couches et punaises avec contrôles, premier essai. (d79b84f)

index.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>Plan - Faubourg à m'lasse</title>
+  <title>Démonstration - Faubourg à m'lasse</title>
   <link rel="stylesheet" href="css/leaflet.css"/>
   <link rel="stylesheet" href="css/style.css"/>
   <script>
@@ -15,20 +15,47 @@
 <body>
   <div id="map"></div>
   <script>
-    var mymap = L.map('map').setView([45.51823567357893, -73.55085910368373], 18);
-    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
+
+  // Tuiles
+  var mapbox = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
       attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
       maxZoom: 20,
       id: 'mapbox/streets-v11',
       tileSize: 512,
       zoomOffset: -1,
       accessToken: 'pk.eyJ1IjoiZGF2dmFsZW50IiwiYSI6ImNrdmluZjh6cTBnYjkydXFna3lnOWRwM3oifQ.7qwZCUJ2JW2WFJ8JtDQfUg'
-    }).addTo(mymap);
+  });
+
+  // Couche image
   var imageUrl = 'img/plan-fond-transparent-min.png',
       imageBounds = [[45.5155088875666, -73.55432183482827], [45.52127103906887, -73.54793549518355]];
-    L.imageOverlay(imageUrl, imageBounds, {
+
+  // Couche plan
+  var plan = L.imageOverlay(imageUrl, imageBounds, {
     opacity: 0.75
-    }).addTo(mymap);
+  });
+
+  // Couche commerces
+  var commerce_A = L.marker([45.51857363631958, -73.55070940735172]).bindPopup('Commerce A'),
+  commerce_B    = L.marker([45.51817273702336, -73.55133219776212]).bindPopup('Commerce B');
+  var commerces = L.layerGroup([commerce_A, commerce_B]);
+
+  // App
+  var mlasse = L.map(
+    'map', {
+      layers: [mapbox, plan, commerces]
+    }).setView([45.51823567357893, -73.55085910368373], 18);
+
+  // Contrôles
+  var baseMaps = {
+      "<span style='color: gray'>Mapbox</span>": mapbox,
+  };
+  var overlayMaps = {
+      "<span class=\"controles\">Plan d'expropriation</span>": plan,
+      "<span class=\"controles\">Commerces d'alimentation</span>": commerces
+  };
+  L.control.layers(null, overlayMaps).addTo(mlasse);
+
   </script>
 </body>
 </html>


...	...	@@ -5,3 +5,8 @@ body {
5	5	#map {
6	6	height: 600px;
7	7	}
	8	+
	9	+.controles {
	10	+ font-weight: 900;
	11	+ font-size: 1.5rem;
	12	+}

...	...	@@ -3,7 +3,7 @@
3	3	<head>
4	4	<meta charset="utf-8"/>
5	5	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6		- <title>Plan - Faubourg à m'lasse</title>
	6	+ <title>Démonstration - Faubourg à m'lasse</title>
7	7	<link rel="stylesheet" href="css/leaflet.css"/>
8	8	<link rel="stylesheet" href="css/style.css"/>
9	9	<script>
...	...	@@ -15,20 +15,47 @@
15	15	<body>
16	16	<div id="map"></div>
17	17	<script>
18		- var mymap = L.map('map').setView([45.51823567357893, -73.55085910368373], 18);
19		- L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
	18	+
	19	+ // Tuiles
	20	+ var mapbox = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
20	21	attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
21	22	maxZoom: 20,
22	23	id: 'mapbox/streets-v11',
23	24	tileSize: 512,
24	25	zoomOffset: -1,
25	26	accessToken: 'pk.eyJ1IjoiZGF2dmFsZW50IiwiYSI6ImNrdmluZjh6cTBnYjkydXFna3lnOWRwM3oifQ.7qwZCUJ2JW2WFJ8JtDQfUg'
26		- }).addTo(mymap);
	27	+ });
	28	+
	29	+ // Couche image
27	30	var imageUrl = 'img/plan-fond-transparent-min.png',
28	31	imageBounds = [[45.5155088875666, -73.55432183482827], [45.52127103906887, -73.54793549518355]];
29		- L.imageOverlay(imageUrl, imageBounds, {
	32	+
	33	+ // Couche plan
	34	+ var plan = L.imageOverlay(imageUrl, imageBounds, {
30	35	opacity: 0.75
31		- }).addTo(mymap);
	36	+ });
	37	+
	38	+ // Couche commerces
	39	+ var commerce_A = L.marker([45.51857363631958, -73.55070940735172]).bindPopup('Commerce A'),
	40	+ commerce_B = L.marker([45.51817273702336, -73.55133219776212]).bindPopup('Commerce B');
	41	+ var commerces = L.layerGroup([commerce_A, commerce_B]);
	42	+
	43	+ // App
	44	+ var mlasse = L.map(
	45	+ 'map', {
	46	+ layers: [mapbox, plan, commerces]
	47	+ }).setView([45.51823567357893, -73.55085910368373], 18);
	48	+
	49	+ // Contrôles
	50	+ var baseMaps = {
	51	+ "<span style='color: gray'>Mapbox</span>": mapbox,
	52	+ };
	53	+ var overlayMaps = {
	54	+ "<span class=\"controles\">Plan d'expropriation</span>": plan,
	55	+ "<span class=\"controles\">Commerces d'alimentation</span>": commerces
	56	+ };
	57	+ L.control.layers(null, overlayMaps).addTo(mlasse);
	58	+
32	59	</script>
33	60	</body>
34	61	</html>
35	62

faubourg-carte.git