faubourg-carte.git

Refactorisation/préparation
Parent 813349c
davvalent

davvalent commited on 2022-08-26 21:47:43
Showing 2 changed files, with 90 additions and 7 deletions.

buildings.json
View file @ 94f8f38
... ... 
@@ -1 +1,65 @@
1 
-{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"rdfs:label":"Chapelle Saint-Antoine","qdmtl:thoroughfare":"foo","starting":1234,"ending":1231,"inventoryNumber":87},"geometry":{"type":"Point","coordinates":[-73.55089724063873,45.51883660822286]}},{"type":"Feature","properties":{"rdfs:label":"École Ville-Marie"},"geometry":{"type":"Point","coordinates":[-73.55039164423943,45.51727578133604]}},{"type":"Feature","properties":{"rdfs:label":"Asile Saint-Vincent de Paul"},"geometry":{"type":"Point","coordinates":[-73.55142295360565,45.51726544458981]}},{"type":"Feature","properties":{"rdfs:label":"","qdmtl:thoroughfare":"http://data.qdmtl.ca/Thoroughfare/Gauchetiere","starting":1184,"ending":1188,"inventoryNumber":219},"geometry":{"type":"Point","coordinates":[-73.55242744088173,45.51654656621812]}}]}
2 1 
\ No newline at end of file
2 
+{
3 
+  "type": "FeatureCollection",
4 
+  "features": [
5 
+    {
6 
+      "type": "Feature",
7 
+      "properties": {
8 
+        "rdfs:label": "Chapelle Saint-Antoine",
9 
+        "qdmtl:thoroughfare": "foo",
10 
+        "starting": 1234,
11 
+        "ending": 1231,
12 
+        "inventoryNumber": 87
13 
+      },
14 
+      "geometry": {
15 
+        "type": "Point",
16 
+        "coordinates": [
17 
+          -73.55089724063873,
18 
+          45.51883660822286
19 
+        ]
20 
+      }
21 
+    },
22 
+    {
23 
+      "type": "Feature",
24 
+      "properties": {
25 
+        "rdfs:label": "École Ville-Marie"
26 
+      },
27 
+      "geometry": {
28 
+        "type": "Point",
29 
+        "coordinates": [
30 
+          -73.55039164423943,
31 
+          45.51727578133604
32 
+        ]
33 
+      }
34 
+    },
35 
+    {
36 
+      "type": "Feature",
37 
+      "properties": {
38 
+        "rdfs:label": "Asile Saint-Vincent de Paul"
39 
+      },
40 
+      "geometry": {
41 
+        "type": "Point",
42 
+        "coordinates": [
43 
+          -73.55142295360565,
44 
+          45.51726544458981
45 
+        ]
46 
+      }
47 
+    },
48 
+    {
49 
+      "type": "Feature",
50 
+      "properties": {
51 
+        "rdfs:label": "",
52 
+        "qdmtl:thoroughfare": "http://data.qdmtl.ca/Thoroughfare/Gauchetiere",
53 
+        "starting": 1184,
54 
+        "ending": 1188,
55 
+        "inventoryNumber": 219
56 
+      },
57 
+      "geometry": {
58 
+        "type": "Point",
59 
+        "coordinates": [
60 
+          -73.55242744088173,
61 
+          45.51654656621812
62 
+        ]
63 
+      }
64 
+    }
65 
+  ]
66 
+}
3 67 
\ No newline at end of file
js/main.js
View file @ 94f8f38
... ... 
@@ -1,14 +1,21 @@
1 1 
 /**
2 
- * Afficher le plan et placer les points
2 
+ * Plan d'expropriation et photographies du Faubourg à m'lasse
3 3 
  */
4 4
5 5 
 (async () => {
6 6
7 
-  // Requête pour les buildings
7 
+  /**
8 
+   * Télécharger données (requête http)
9 
+   * Retourner application/geo+json content type
10 
+   * @todo voir https://geojson.org/geojson-ld/
11 
+   */
8 12 
   const response = await fetch("./buildings.json"),
9 13 
   geojsonFeatures = await response.json(),
10 14
11 
-  // Mapbox tiles
15 
+  /**
16 
+   * Mapbox tiles
17 
+   * @todo encode access token
18 
+   */
12 19 
   mapbox = L.tileLayer("https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}", {
13 20 
     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 21 
     maxZoom: 20,
... ... 
@@ -18,7 +25,10 @@
18 25 
     accessToken: "pk.eyJ1IjoiZGF2dmFsZW50IiwiYSI6ImNrdmluZjh6cTBnYjkydXFna3lnOWRwM3oifQ.7qwZCUJ2JW2WFJ8JtDQfUg"
19 26 
   }),
20 27
21 
-  // Données de la couche du plan d'expropriation
28 
+  /**
29 
+   * Données de la couche du plan d'expropriation
30 
+   * @todo Tuiles
31 
+   */
22 32 
   imageUrl = "img/plan-fond-transparent-min.png",
23 33 
   imageBounds = [
24 34 
     [45.5155088875666, -73.55432183482827],
... ... 
@@ -39,8 +49,17 @@
39 49 
   // Couche GeoJSON
40 50 
   geoJSON = L.geoJSON(geojsonFeatures, {
41 51 
     onEachFeature: (feature, layer) => {
42 
-      if (feature.properties)
43 
-        layer.bindPopup(feature.properties.name);
52 
+      if (feature.properties) {
53 
+        const informationsPopUp = `
54 
+          <b>Informations</b>
55 
+          <ul>
56 
+            <li>${feature.properties["rdfs:label"]}</li>
57 
+            <li>${feature.properties["qdmtl:thoroughfare"]}</li>
58 
+            <li>${feature.properties["inventoryNumber"]}</li>
59 
+          </ul>
60 
+        `
61 
+        layer.bindPopup(informationsPopUp);
62 
+      }
44 63 
     }
45 64 
   }),
46 65
47 66