faubourg-carte.git

50/50 screen for popup information window
Parent effa7e6
davvalent

davvalent commited on 2023-02-10 22:07:18
Showing 2 changed files, with 90 additions and 33 deletions.

css/style.css
View file @ 74cbf49
... ... 
@@ -1,8 +1,12 @@
1 
+html,
2 
+body {
3 
+  height: 100%;
4 
+}
1 5 
 body {
2 6 
   margin: 0;
3 7 
 }
4 8 
 #map {
5 
-  height: 600px;
9 
+  height: 100%;
6 10 
 }
7 11 
 .controles {
8 12 
   font-weight: 900;
... ... 
@@ -12,3 +16,22 @@ body {
12 16 
   top: -1px;
13 17 
   vertical-align: text-bottom;
14 18 
 }
19 
+.popup-fixed {
20 
+  position: fixed;
21 
+  top: 0 !important;
22 
+  right: auto !important;
23 
+  bottom: auto !important;
24 
+  left: 0 !important;
25 
+  transform: none !important;
26 
+  margin: 0;
27 
+  height: 100%;
28 
+  width: 50%;
29 
+  min-width: 350px;
30 
+}
31 
+.popup-fixed .leaflet-popup-content-wrapper {
32 
+    border-radius: 0;
33 
+    height: inherit;
34 
+  }
35 
+  .popup-fixed .leaflet-popup-tip-container {
36 
+    display: none;
37 
+  }
15 38 
\ No newline at end of file
js/main.js
View file @ 74cbf49
... ... 
@@ -29,7 +29,10 @@
29 29 
     tilesUrl = tilesUrl.devUrl;
30 30 
   }
31 31
32 
-  /** Base Layer */
32 
+  /**
33 
+   * Base Layer
34 
+   * Photos aériennes
35 
+   */
33 36 
   const baseLayer = L.tileLayer("https://mt0.google.com/vt/lyrs=s&x={x}&y={y}&z={z}", {
34 37 
   attribution: "Map data © QDMTL, Imagery © Google, Archives de Montréal",
35 38 
     maxZoom: 20,
... ... 
@@ -43,20 +46,70 @@
43 46 
       opacity: 1
44 47 
     }),
45 48
49 
+    /** Instanciation du plan */
50 
+    planDuFaubourg = L.map("map", {
51 
+      center: [45.51823567357893, -73.55085910368373],
52 
+      zoom: 17.5,
53 
+      minZoom: 15,
54 
+      zoomDelta: 0.5,
55 
+      zoomSnap: 0.5,
56 
+      layers: [
57 
+        baseLayer,
58 
+        faubourgLayer
59 
+      ]
60 
+    }),
61 
+
62 
+    /**
63 
+     * Créer un pane pour la fenêtre pop-up
64 
+     * @todo lire doc pour la méthode createPane
65 
+     * "Panes are DOM elements used to control the ordering of layers on the map."
66 
+     * https://leafletjs.com/reference.html#map-pane
67 
+     */
68 
+    informationPane = planDuFaubourg.createPane('fixed', document.querySelector("#map")),
69 
+
46 70 
     /** GeoJSON Layer */
47 71 
     geoJSON = L.geoJSON(geojsonFeatures, {
48 72 
       onEachFeature: (feature, layer) => {
49 73 
         if (feature.properties) {
50 
-        const informationsPopUp = `
51 
-          <b>${feature.properties["appellation"]}</b>
74 
+
75 
+          const popUpInformation = `
76 
+            <div class="classe-ajoutée-dans-le-but-de-placer-limage-pricipale">
77 
+              <h1>${feature.properties["appellation"]}</h1>
52 78 
               <ul>
53 79 
                 <li>${feature.properties["appellation"]}</li>
54 80 
                 <li>${feature.properties["rdfs:label"]}</li>
55 81 
                 <li>${feature.properties["qdmtl:thoroughfare"]}</li>
56 82 
                 <li>${feature.properties["inventoryNumber"]}</li>
57 83 
               </ul>
58 
-        `
59 
-        layer.bindPopup(informationsPopUp);
84 
+            </div>
85 
+          `,
86 
+
87 
+            popup = L.popup({
88 
+              pane: 'fixed',
89 
+              className: 'popup-fixed',
90 
+              autoPan: false
91 
+            }).setContent(popUpInformation);
92 
+
93 
+          layer.bindPopup(popup);
94 
+
95 
+          layer.on("click", () => {
96 
+            console.log("Message fired when clicking the geoJSON feature (the marker).");
97 
+
98 
+            /**
99 
+             * Trois prochaines instructions
100 
+             * Déplacement et centrage de la punaise
101 
+             */
102 
+            let targetLatLng = L.latLng(
103 
+              /** Coordonnées sont inversées avec GeoJSON */
104 
+              feature.geometry.coordinates[1],
105 
+              feature.geometry.coordinates[0],
106 
+            );
107 
+            const targetZoom = 20,
108 
+              popUpWidth = document.querySelector(".leaflet-popup").clientWidth,
109 
+              targetPoint = planDuFaubourg.project(targetLatLng, targetZoom).subtract([popUpWidth / 2, 0]);
110 
+            targetLatLng = planDuFaubourg.unproject(targetPoint, targetZoom);
111 
+            planDuFaubourg.setView(targetLatLng, targetZoom);
112 
+          })
60 113 
         }
61 114 
       }
62 115 
     }),
... ... 
@@ -64,36 +117,17 @@
64 117 
     /** Controls */
65 118 
     overlayMaps = {
66 119 
       "<span class=\"controles\">Plan d'expropriation</span>": faubourgLayer,
67 
-    "<span class=\"controles\"></span>": geoJSON,
120 
+      "<span class=\"controles\">Bâtiments</span>": geoJSON,
68 121 
     },
69 122
70 
-  /**
71 
-   * Overlay Map
72 
-   * @deprecated
73 
-   */
74 
-  imageUrl = "img/plan-fond-transparent-min.png",
75 
-  imageBounds = [
76 
-    [45.5155088875666, -73.55432183482827],
77 
-    [45.52127103906887, -73.54793549518355]
78 
-  ],
79 
-  plan = L.imageOverlay(imageUrl, imageBounds, {
80 
-    opacity: 1,
81 
-    alt: "Plan d'expropriation du Faubourg à M'lasse"
82 
-  }),
123 
+    addControls = L.control.layers(null, overlayMaps).addTo(planDuFaubourg),
124 
+    addJsonLayer = geoJSON.addTo(planDuFaubourg);
83 125
84 
-  /** Instantiation du plan */
85 
-  planDuFaubourg = L.map("map", {
86 
-    center: [45.51823567357893, -73.55085910368373],
87 
-    zoom: 17.5,
88 
-    minZoom: 15,
89 
-    zoomDelta: 0.5,
90 
-    layers: [
91 
-      baseLayer,
92 
-      faubourgLayer
93 
-    ]
94 
-  });
126 
+  planDuFaubourg.on("popupopen", () => {
127 
+      console.log("Message fired on pop-up opening");
128 
+    }
129 
+  );
95 130
96 
-  L.control.layers(null, overlayMaps).addTo(planDuFaubourg);
97 
-  geoJSON.addTo(planDuFaubourg);
131 
+  console.log(planDuFaubourg.getPanes());
98 132
99 133 
 })();
100 134 
\ No newline at end of file
101 135