Ajout des icones amenity

js/map.js

@@ -17,6 +17,11 @@ export async function init(){
         zoomControl: false
     })
 
+    map.addEventListener("zoom", () => {
+        map.getContainer()
+        .style.setProperty("--zoom-level", map.getZoom())
+    })
+
     L.control.attribution({
         position: 'topright'
     }).addTo(map)
@@ -60,6 +65,7 @@ export async function init(){
 }
 
 const HIGHLIGHT_LAYER = Symbol("Hilight map layer")
+const PARENT_FEATURE = Symbol("Parent feature")
 
 export async function init_places(places_db){
     places = places_db
@@ -77,10 +83,68 @@ export async function init_places(places_db){
             feature[HIGHLIGHT_LAYER] = layer
         }
     }).addTo(map)
+    
+    // La couche des zones disponibles
+    const bathrooms = L.geoJSON(null, {
+        pointToLayer: function(feature, latlng) {
+            let iconEl = document.createElement("div")
+            iconEl.classList.add("map-amenity-icon-container")
+
+            if(feature.properties["toilettes"]){
+                let bathrooms_icon = document.createElement("img")
+                bathrooms_icon.src = new URL("../icons/toilettes.svg", import.meta.url).toString()
+                bathrooms_icon.alt = "Icone de toilettes"
+                bathrooms_icon.title = "Toilettes"
+                bathrooms_icon.classList.add("bathroom")
+                iconEl.append(bathrooms_icon)
+            }
+
+            if(feature.properties["douches"]){
+                let shower_icon = document.createElement("img")
+                shower_icon.src = new URL("../icons/douches.svg", import.meta.url).toString()
+                shower_icon.alt = "Icone de douche"
+                shower_icon.title = "Douches"
+                shower_icon.classList.add("shower")
+                iconEl.append(shower_icon)
+            }
+
+            if(feature.properties["eau potable"]){
+                let drinking_water_icon = document.createElement("img")
+                drinking_water_icon.src = new URL("../icons/eau-potable.svg", import.meta.url).toString()
+                drinking_water_icon.alt = "Icone d'une goute"
+                drinking_water_icon.title = "Eau potable"
+                drinking_water_icon.classList.add("drinking-water")
+                iconEl.append(drinking_water_icon)
+            }
+
+            let icon = L.divIcon({
+                className: "map-amenity-icon",
+                html: iconEl
+            })
+
+            return L.marker(latlng, {
+                icon: icon
+            })
+        }
+    }).addTo(map)
 
     // On ajoute toutes les zones à la carte
-    for(let [feature_id, feature] of Object.entries(places.featuresById)){
+    for(let [_feature_id, feature] of Object.entries(places.featuresById)){
         area_highlight.addData(feature)
+
+        if(feature.properties["toilettes"] || feature.properties["douches"] || feature.properties["eau potable"]) {
+            let amenity_feature
+
+            if(feature.geometry.type != "Point"){
+                amenity_feature = turf.centroid(feature)
+                amenity_feature[PARENT_FEATURE] = feature
+                amenity_feature.properties = feature.properties
+            } else {
+                amenity_feature = feature
+            }
+
+            bathrooms.addData(amenity_feature)
+        }
     }
 }