faubourg-carte.git

Refactorisation
Parent 693dedb
davvalent

davvalent commited on 2022-08-26 03:48:52
Showing 3 changed files, with 69 additions and 129 deletions.

index.html
View file @ 9aa1339
... ... 
@@ -6,138 +6,11 @@
6 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 
-  <script>
10 
-    h = window.innerHeight + "px";
11 
-    document.styleSheets[1].cssRules[1].style.height = h;
12 
-  </script>
9 
+  <script src="js/window.js"></script>
13 10 
   <script src="js/leaflet.js"></script>
14 11 
 </head>
15 12 
 <body>
16 13 
   <div id="map"></div>
17 
-  <script>
18 
-
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 
-        "type": "Feature",
57 
-        "properties": {
58 
-          "name": "Asile Saint-Vincent de Paul"
59 
-        },
60 
-        "geometry": {
61 
-          "type": "Point",
62 
-          "coordinates": [
63 
-            -73.55142295360565,
64 
-            45.51726544458981
65 
-          ]
66 
-        }
67 
-      }
68 
-    ]
69 
-  };
70 
-
71 
-  // Tuiles
72 
-  var mapbox = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
73 
-      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>, Archives de Montréal',
74 
-      maxZoom: 20,
75 
-      id: 'mapbox/streets-v11',
76 
-      tileSize: 512,
77 
-      zoomOffset: -1,
78 
-      accessToken: 'pk.eyJ1IjoiZGF2dmFsZW50IiwiYSI6ImNrdmluZjh6cTBnYjkydXFna3lnOWRwM3oifQ.7qwZCUJ2JW2WFJ8JtDQfUg'
79 
-  });
80 
-
81 
-  // Couche image
82 
-  var imageUrl = 'img/plan-fond-transparent-min.png',
83 
-      imageBounds = [
84 
-        [45.5155088875666, -73.55432183482827],
85 
-        [45.52127103906887, -73.54793549518355]
86 
-      ];
87 
-
88 
-  // Couche plan
89 
-  var plan = L.imageOverlay(imageUrl, imageBounds, {
90 
-    opacity: 0.2
91 
-  });
92 
-
93 
-  // Couche commerces
94 
-  /*
95 
-  var commerce_A = L.marker([
96 
-    45.51882815111977,
97 
-    -73.55097770690918
98 
-  ]).bindPopup('Commerce A'),
99 
-  commerce_B = L.marker([45.51817273702336, -73.55133219776212]).bindPopup('Commerce B');
100 
-
101 
-  var commerces = L.layerGroup([
102 
-    commerce_A,
103 
-    commerce_B
104 
-  ]);
105 
-  */
106 
-
107 
-  // Couche GeoJSON
108 
-  var bar = L.geoJSON(geojsonFeatures, {
109 
-    // cette option ajoute le feature au layer après exécution de la fonction
110 
-    onEachFeature: onEachFeature
111 
-  });
112 
-
113 
-  // Couches candidates
114 
-    foo = L.marker();
115 
-
116 
-try {
117 
-  // App
118 
-  var mlasse = L.map(
119 
-    'map', {
120 
-      layers: [mapbox, plan, /*commerces,*/ bar]
121 
-    }).setView([45.51823567357893, -73.55085910368373], 18);
122 
-} catch (e) {
123 
-  console.error(e);
124 
-}
125 
-
126 
-  // Contrôles
127 
-  var baseMaps = {
128 
-      "<span style='color: gray'>Mapbox</span>": mapbox,
129 
-  };
130 
-  var overlayMaps = {
131 
-      "<span class=\"controles\">Plan d'expropriation</span>": plan,
132 
-      "<span class=\"controles\">Institutions</span>": bar,
133 
-      "<span class=\"controles\">Carte-index des plans d’utilisation du sol de la ville de Montréal</span>": foo,
134 
-      "<span class=\"controles\">Photographies aériennes des archives</span>": foo,
135 
-      "<span class=\"controles\">Plan d'assurance</span>": foo,
136 
-  };
137 
-
138 
-
139 
-  L.control.layers(null, overlayMaps).addTo(mlasse);
140 
-
141 
-  </script>
14 
+  <script src="js/main.js"></script>
142 15 
 </body>
143 16 
 </html>
js/main.js
View file @ 9aa1339
... ... 
@@ -0,0 +1,60 @@
1 
+/**
2 
+ * Afficher le plan et placer les points
3 
+ */
4 
+
5 
+(async () => {
6 
+
7 
+  // Requête pour les buildings
8 
+  const response = await fetch("./buildings.json"),
9 
+  geojsonFeatures = await response.json(),
10 
+
11 
+  // Mapbox tiles
12 
+  mapbox = L.tileLayer("https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}", {
13 
+    attribution: "Map data &copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors, Imagery © <a href=\"https://www.mapbox.com/\">Mapbox</a>, Archives de Montréal",
14 
+    maxZoom: 20,
15 
+    id: "mapbox/streets-v11",
16 
+    tileSize: 512,
17 
+    zoomOffset: -1,
18 
+    accessToken: "pk.eyJ1IjoiZGF2dmFsZW50IiwiYSI6ImNrdmluZjh6cTBnYjkydXFna3lnOWRwM3oifQ.7qwZCUJ2JW2WFJ8JtDQfUg"
19 
+  }),
20 
+
21 
+  // Données de la couche du plan d'expropriation
22 
+  imageUrl = "img/plan-fond-transparent-min.png",
23 
+  imageBounds = [
24 
+    [45.5155088875666, -73.55432183482827],
25 
+    [45.52127103906887, -73.54793549518355]
26 
+  ],
27 
+
28 
+  // Couche du plan
29 
+  plan = L.imageOverlay(imageUrl, imageBounds, {
30 
+    opacity: 0.7,
31 
+    alt: "Plan d'expropriation du Faubourg à M'lasse"
32 
+  }),
33 
+
34 
+  // Instantiation de la carte
35 
+  mlasse = L.map("map", {
36 
+    layers: [mapbox, plan]
37 
+  }).setView([45.51823567357893, -73.55085910368373], 18),
38 
+
39 
+  // Couche GeoJSON
40 
+  geoJSON = L.geoJSON(geojsonFeatures, {
41 
+    onEachFeature: (feature, layer) => {
42 
+      if (feature.properties)
43 
+        layer.bindPopup(feature.properties.name);
44 
+    }
45 
+  }),
46 
+
47 
+  // Contrôles
48 
+  overlayMaps = {
49 
+    "<span class=\"controles\">Plan d'expropriation</span>": plan,
50 
+    "<span class=\"controles\">Institutions</span>": geoJSON/*,
51 
+    "<span class=\"controles\">Utilisation du sol</span>": foo,
52 
+    "<span class=\"controles\">Photographies aériennes des archives</span>": foo,
53 
+    "<span class=\"controles\">Plan d'assurance</span>": foo,*/
54 
+  };
55 
+
56 
+  L.control.layers(null, overlayMaps).addTo(mlasse);
57 
+  geoJSON.addTo(mlasse);
58 
+
59 
+})();
60 
+
js/window.js
View file @ 9aa1339
... ... 
@@ -0,0 +1,7 @@
1 
+/**
2 
+ * Initialisation du viewport
3 
+ */
4 
+(() => {
5 
+  h = window.innerHeight + "px";
6 
+  document.styleSheets[1].cssRules[1].style.height = h;
7 
+})();
0 8 
\ No newline at end of file
1 9