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