faubourg-carte.git

Implémention rapido de GeoJSON
Parent afce696
davvalent

davvalent commited on 2022-05-01 04:43:01
Showing 1 changed files, with 64 additions and 6 deletions.

index.html
View file @ 099d5e1
... ... 
@@ -16,7 +16,44 @@
16 16 
   <div id="map"></div>
17 17 
   <script>
18 18
19 
-//  let foo;
19 
+  function onEachFeature(feature, layer) {
20 
+    if (feature.properties && feature.properties.name) {
21 
+      popupContent = feature.properties.name;
22 
+    }
23 
+    layer.bindPopup(popupContent);
24 
+  }
25 
+
26 
+  // GeoJSON
27 
+  let geojsonFeatures = {
28 
+    "features": [
29 
+      {
30 
+        "type": "Feature",
31 
+        "properties": {
32 
+          "name": "Chapelle Saint-Antoine"
33 
+        },
34 
+        "geometry": {
35 
+          "type": "Point",
36 
+          "coordinates": [
37 
+            -73.55089724063873,
38 
+            45.51883660822286
39 
+          ]
40 
+        }
41 
+      },
42 
+      {
43 
+        "type": "Feature",
44 
+        "properties": {
45 
+          "name": "École Ville-Marie"
46 
+        },
47 
+        "geometry": {
48 
+          "type": "Point",
49 
+          "coordinates": [
50 
+            -73.55039164423943,
51 
+            45.51727578133604
52 
+          ]
53 
+        }
54 
+      }
55 
+    ]
56 
+  };
20 57
21 58 
   // Tuiles
22 59 
   var mapbox = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
... ... 
@@ -30,29 +67,48 @@
30 67
31 68 
   // Couche image
32 69 
   var imageUrl = 'img/plan-fond-transparent-min.png',
33 
-      imageBounds = [[45.5155088875666, -73.55432183482827], [45.52127103906887, -73.54793549518355]];
70 
+      imageBounds = [
71 
+        [45.5155088875666, -73.55432183482827],
72 
+        [45.52127103906887, -73.54793549518355]
73 
+      ];
34 74
35 75 
   // Couche plan
36 76 
   var plan = L.imageOverlay(imageUrl, imageBounds, {
37 
-    opacity: 0.75
77 
+    opacity: 0.2
38 78 
   });
39 79
40 80 
   // Couche commerces
41 
-  var commerce_A = L.marker([45.51857363631958, -73.55070940735172]).bindPopup('Commerce A'),
81 
+  /*
82 
+  var commerce_A = L.marker([
83 
+    45.51882815111977,
84 
+    -73.55097770690918
85 
+  ]).bindPopup('Commerce A'),
42 86 
   commerce_B = L.marker([45.51817273702336, -73.55133219776212]).bindPopup('Commerce B');
87 
+
43 88 
   var commerces = L.layerGroup([
44 89 
     commerce_A,
45 90 
     commerce_B
46 91 
   ]);
92 
+  */
93 
+
94 
+  // Couche GeoJSON
95 
+  var bar = L.geoJSON(geojsonFeatures, {
96 
+    // cette option ajoute le feature au layer après exécution de la fonction
97 
+    onEachFeature: onEachFeature
98 
+  });
47 99
48 100 
   // Couches candidates
49 101 
     foo = L.marker();
50 102
103 
+try {
51 104 
   // App
52 105 
   var mlasse = L.map(
53 106 
     'map', {
54 
-      layers: [mapbox, plan, commerces]
107 
+      layers: [mapbox, plan, /*commerces,*/ bar]
55 108 
     }).setView([45.51823567357893, -73.55085910368373], 18);
109 
+} catch (e) {
110 
+  console.error(e);
111 
+}
56 112
57 113 
   // Contrôles
58 114 
   var baseMaps = {
... ... 
@@ -60,11 +116,13 @@
60 116 
   };
61 117 
   var overlayMaps = {
62 118 
       "<span class=\"controles\">Plan d'expropriation</span>": plan,
63 
-      "<span class=\"controles\">Commerces d'alimentation</span>": commerces,
119 
+      "<span class=\"controles\">Institutions</span>": bar,
64 120 
       "<span class=\"controles\">Carte-index des plans d’utilisation du sol de la ville de Montréal</span>": foo,
65 121 
       "<span class=\"controles\">Photographies aériennes des archives</span>": foo,
66 122 
       "<span class=\"controles\">Plan d'assurance</span>": foo,
67 123 
   };
124 
+
125 
+
68 126 
   L.control.layers(null, overlayMaps).addTo(mlasse);
69 127
70 128 
   </script>
71 129