diff --git a/css/style.css b/css/style.css
index 55df9be..9ffd104 100644
--- a/css/style.css
+++ b/css/style.css
@@ -72,4 +72,22 @@ body, html {
stroke: #ff4e00;
stroke-width: 5px;
fill: rgba(255, 77, 0, 0.25);
+}
+
+.map-amenity-icon .map-amenity-icon-container {
+ transform: translateX(-50%) translateY(-50%);
+ width: fit-content;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ gap: 5px;
+
+ & > * {
+ opacity: clamp(0, calc( var(--zoom-level) - 19 ), 1) ;
+ }
+
+ & > .drinking-water {
+ opacity: clamp(0, calc( var(--zoom-level) - 20 ), 1) ;
+ }
}
\ No newline at end of file
diff --git a/icons/douches.svg b/icons/douches.svg
index f6fc030..7e1cc8c 100644
--- a/icons/douches.svg
+++ b/icons/douches.svg
@@ -9,7 +9,7 @@
id="svg1"
xml:space="preserve"
inkscape:version="1.4.3 (0d15f75042, 2025-12-25)"
- sodipodi:docname="dortoir.svg"
+ sodipodi:docname="douches.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
@@ -23,9 +23,9 @@
inkscape:pagecheckerboard="1"
inkscape:deskcolor="#505050"
inkscape:document-units="px"
- inkscape:zoom="8.8719804"
- inkscape:cx="14.540158"
- inkscape:cy="14.032944"
+ inkscape:zoom="17.743961"
+ inkscape:cx="11.665941"
+ inkscape:cy="15.075552"
inkscape:window-width="1920"
inkscape:window-height="1015"
inkscape:window-x="0"
@@ -35,70 +35,89 @@
id="defs1" />
+ cx="23.187563"
+ cy="27.316202"
+ r="1.3692063" />
diff --git a/icons/eau-potable.svg b/icons/eau-potable.svg
new file mode 100644
index 0000000..17ba9da
--- /dev/null
+++ b/icons/eau-potable.svg
@@ -0,0 +1,60 @@
+
+
+
+
diff --git a/js/map.js b/js/map.js
index fca5134..a4bcf5e 100644
--- a/js/map.js
+++ b/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)
+ }
}
}