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

css/style.css

@@ -37,6 +37,7 @@ body, html {
 
 #main-header #logo {
     max-height: clamp(2rem, 10vh, 5rem);
+    filter: drop-shadow(rgba(0,0,0,0.5) 0 0 10px);
 }
 
 /* MAP */
@@ -65,4 +66,10 @@ body, html {
         color: inherit;
         text-decoration: underline;
     }
+}
+
+.map-hilight-area.active {
+    stroke: #ff4e00;
+    stroke-width: 5px;
+    fill: rgba(255, 77, 0, 0.25);
 }

icons/toilettes.svg

@@ -23,11 +23,11 @@
      inkscape:pagecheckerboard="1"
      inkscape:deskcolor="#505050"
      inkscape:document-units="px"
-     inkscape:zoom="6.2734375"
+     inkscape:zoom="8"
-     inkscape:cx="-13.070984"
+     inkscape:cx="-3.25"
-     inkscape:cy="12.672478"
+     inkscape:cy="25.4375"
-     inkscape:window-width="1920"
+     inkscape:window-width="1900"
-     inkscape:window-height="1015"
+     inkscape:window-height="995"
      inkscape:window-x="56"
      inkscape:window-y="50"
      inkscape:window-maximized="0"
@@ -35,14 +35,33 @@
      id="defs1" /><g
      inkscape:label="Calque 1"
      inkscape:groupmode="layer"
-     id="layer1"><g
+     id="layer1"><rect
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:4.93195;stroke-opacity:1"
+       id="rect3"
+       width="24.225895"
+       height="32"
+       x="3.8870521"
+       y="0" /><rect
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:5.00771;stroke-opacity:1"
+       id="rect3-5"
+       width="31.999977"
+       height="24.975895"
+       x="3.8684334e-16"
+       y="3.5120521" /><rect
+       style="fill:#8800ff;fill-opacity:1;stroke-width:2;stroke:none;stroke-opacity:1;stroke-dasharray:none;paint-order:stroke fill markers"
+       id="rect2"
+       width="22.600895"
+       height="22.600895"
+       x="4.6995521"
+       y="4.6995521" /><g
        id="g1"
-       transform="translate(398.16689,-197.7584)"><path
+       transform="matrix(0.72174272,0,0,0.72174272,292.79844,-138.27857)"
-         style="fill:#000000;stroke-width:5"
+       style="fill:#ffffff;fill-opacity:1"><path
+         style="fill:#ffffff;fill-opacity:1;stroke-width:5"
          d="m -393.72354,201.40473 h 7.33251 v 10.67995 h 15.94022 c 0,0 -0.0106,0.46587 -0.022,1.06205 -0.07,3.66186 -3.87508,6.74866 -6.51354,6.74866 -1.59814,0.0528 -3.50685,0.0797 -3.50685,0.0797 l 1.11582,6.13699 -12.27398,-0.2391 1.43462,-5.49938 -3.66625,-4.70237 z"
          id="path1"
          sodipodi:nodetypes="ccccsccccccc" /><rect
-         style="fill:#000000;stroke-width:5.06012"
+         style="fill:#ffffff;fill-opacity:1;stroke-width:5.06012"
          id="rect1"
          width="15.183063"
          height="1.7534246"

index.html

@@ -16,7 +16,7 @@
     <section id="map"></section>
 
     <section id="search-section">
-        <form id="search-area" hidden>
+        <form id="search-area">
             <label for="search-area-query">Rechercher une zone</label>
             <input type="search" name="query" id="search-area-query" />
             <button>Rechercher</button>

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.init()
-        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)
-    }),
 ]);
-// CHARGEMENT FINI
 
-L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+// Un petit point de debug
-    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+window.interhackPlaces = places;
-}).addTo(map)
 
-L.tileLayer('./tuiles/{z}/{x}/{y}.png', {
+await MAP.init_places(places)
-    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,
-})
 
+// 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]
+    ))
+}