Séparation des outils de la carte et ajout du highlight

js/index.js

@@ -1,70 +1,37 @@
-import * as L from "./lib/leaflet/leaflet-src.esm.js"
+import * as MAP from "./map.js"
 import { PlaceDatabase } from "./places.js";
 
 /** La carte */
-const map = L.map(document.getElementById("map"), {
-    attributionControl: false,
-    zoomControl: false
-})
-
-L.control.attribution({
-    position: 'topright'
-}).addTo(map)
 
 /** La base de données de lieux @type {PlaceDatabase|null} */
 let places = null
-/** Le centre de la carte */
-let map_center = null
-/** Les bords de la carte */
-let map_bounds = null
 
 // CHARGEMENT
 await Promise.all([
+    // Base de données des zones
     PlaceDatabase.createDefault().then(db => places = db),
-    fetch("./couches/centre.geojson").then(res => res.json()).then(geojson => {
-        map_center = L.latLng([...geojson.features[0].geometry.coordinates].reverse())
-        console.log("Centre:", map_center)
-    }),
-    fetch("./couches/emprise.geojson").then(res => res.json()).then(geojson => {
-        let coordinate_list = geojson.features[0].geometry.coordinates[0]
-        let first_point = map.project(L.latLng([...coordinate_list[0]].reverse()))
-        let bounds = L.bounds(first_point, first_point)
-        for(let i = 1; i<coordinate_list.length; i++){
-            let point = map.project([...coordinate_list[i]].reverse())
-            bounds.extend(point)
-        }
-        map_bounds = bounds
-        console.log("Bounds:", map_bounds)
-    }),
+    MAP.init()
 ]);
-// CHARGEMENT FINI
 
-L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-}).addTo(map)
+// Un petit point de debug
+window.interhackPlaces = places;
 
-L.tileLayer('./tuiles/{z}/{x}/{y}.png', {
-    minZoom: 14,
-    maxZoom: 23
-}).addTo(map)
-
-const geojson_layer = L.geoJSON(null, {
-    //TODO
-}).addTo(map)
-
-for(let [feature_id, feature] of Object.entries(places.featuresById)){
-    geojson_layer.addData(feature)
-}
-
-map.setMaxBounds(map_bounds)
-map.setView(map_center, 19, {
-    animate: false,
-})
+await MAP.init_places(places)
 
+// GESTION de la recherche
 const search_form = document.getElementById("search-area")
 search_form.elements["query"].addEventListener("change", () => search_form.requestSubmit())
 search_form.elements["query"].addEventListener("input", () => search_form.requestSubmit())
 
+window.addEventListener("hashchange", () => {
+    let place_id = decodeURIComponent(location.hash.substring(1))
+    if(place_id){
+        MAP.highlight(place_id)
+    } else {
+        MAP.unhighlight_all()
+    }
+})
+
 search_form.addEventListener("submit", e => {
     e.preventDefault()
     if(places){
@@ -78,7 +45,10 @@ search_form.addEventListener("submit", e => {
 
             for(let result_item of search_results){
                 let el = document.createElement("li")
-                el.textContent = result_item.feature.properties.name+" ("+result_item.ref+")"
+                let a = document.createElement("a")
+                el.append(a)
+                a.href = "#"+encodeURIComponent(result_item.ref)
+                a.textContent = result_item.feature.properties.name+" ("+result_item.ref+")"
                 resultElements.push(el)
             }
 

js/map.js

@@ -0,0 +1,114 @@
+import * as L from "./lib/leaflet/leaflet-src.esm.js"
+import { PlaceDatabase } from "./places.js";
+import "./lib/turf/turf.js"
+
+let map = null;
+/** @type {PlaceDatabase| null} */
+let places = null;
+
+export async function init(){
+    /** Le centre de la carte */
+    let map_center = null
+    /** Les bords de la carte */
+    let map_bounds = null
+
+    map = L.map(document.getElementById("map"), {
+        attributionControl: false,
+        zoomControl: false
+    })
+
+    L.control.attribution({
+        position: 'topright'
+    }).addTo(map)
+
+    await Promise.all([
+        // Point définissant le centre de la carte
+        fetch("./couches/centre.geojson").then(res => res.json()).then(geojson => {
+            map_center = L.latLng([...geojson.features[0].geometry.coordinates].reverse())
+            console.log("Centre:", map_center)
+        }),
+        // Polygone définissant les limites de la carte
+        fetch("./couches/emprise.geojson").then(res => res.json()).then(geojson => {
+            let coordinate_list = geojson.features[0].geometry.coordinates[0]
+            let first_point = map.project(L.latLng([...coordinate_list[0]].reverse()))
+            let bounds = L.bounds(first_point, first_point)
+            for(let i = 1; i<coordinate_list.length; i++){
+                let point = map.project([...coordinate_list[i]].reverse())
+                bounds.extend(point)
+            }
+            map_bounds = bounds
+            console.log("Bounds:", map_bounds)
+        }),
+    ])
+
+    // La couche Openstreetmap standard
+    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+    }).addTo(map)
+    
+    // La couche custom de l'antenne
+    L.tileLayer('./tuiles/{z}/{x}/{y}.png', {
+        minZoom: 14,
+        maxZoom: 23
+    }).addTo(map)
+
+    // Parametrage de la carte initiale
+    map.setMaxBounds(map_bounds)
+    map.setView(map_center, 19, {
+        animate: false,
+    })
+}
+
+const HIGHLIGHT_LAYER = Symbol("Hilight map layer")
+
+export async function init_places(places_db){
+    places = places_db
+
+    // La couche des zones disponibles
+    const area_highlight = L.geoJSON(null, {
+        style: function(feature){
+            return {
+                className: "map-hilight-area",
+                fill: false,
+                stroke: false
+            }
+        },
+        onEachFeature: function(feature, layer){
+            feature[HIGHLIGHT_LAYER] = layer
+        }
+    }).addTo(map)
+
+    // On ajoute toutes les zones à la carte
+    for(let [feature_id, feature] of Object.entries(places.featuresById)){
+        area_highlight.addData(feature)
+    }
+}
+
+export function unhighlight_all(){
+    for(let el of document.querySelectorAll(".map-hilight-area.active")){
+        el.classList.remove("active")
+    }
+}
+
+export function highlight(place_or_placeid){
+    unhighlight_all()
+
+    let place;
+
+    if(typeof place_or_placeid == "string"){
+        place = places.getFeatureById(place_or_placeid)
+    } else {
+        place = place_or_placeid
+    }
+
+    if(place[HIGHLIGHT_LAYER]){
+        place[HIGHLIGHT_LAYER].getElement()
+            .classList.add("active")
+    }
+
+    let centroid = turf.centroid(place)
+    map.panTo(L.latLng(
+        centroid.geometry.coordinates[1],
+        centroid.geometry.coordinates[0]
+    ))
+}