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

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]
+    ))
+}