epickiwi/2026.camp.carte
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Ajout de l'eau potable

Browse source
This commit is contained in:
EpicKiwi 2026-02-15 15:15:03 +01:00
parent 270449766f
commit 251cfa9a8a
Signed by: epickiwi
GPG key ID: C4B28FD2729941CE
2 changed files with 42 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
css/style.css
View file

@ -77,17 +77,26 @@ body, html {
.map-amenity-icon .map-amenity-icon-container {
transform: translateX(-50%) translateY(-50%);
width: fit-content;
display: flex;
flex-direction: row;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, min-content);
justify-content: center;
align-items: center;
gap: 5px;
& > img {
width: 2rem;
transform: scale( clamp(0.5, calc( var(--zoom-level) - 19 ), 1) );
transform-origin: 50% 50%;
}
& > * {
opacity: clamp(0, calc( var(--zoom-level) - 19 ), 1) ;
}
& > .drinking-water {
opacity: clamp(0, calc( var(--zoom-level) - 20 ), 1) ;
grid-row: 1;
grid-column: 1;
opacity: clamp(0, calc( var(--zoom-level) - 18 ), 1) ;
}
}

46
js/map.js
View file

@ -14,13 +14,27 @@ export async function init(){
map = L.map(document.getElementById("map"), {
attributionControl: false,
zoomControl: false
zoomControl: false,
zoomSnap: 1,
zoomDelta: 1
})
map.addEventListener("zoom", () => {
map.getContainer()
.style.setProperty("--zoom-level", map.getZoom())
})
{
let zoom_interval = null
function updateCssZoom(){
map.getContainer()
.style.setProperty("--zoom-level", map.getZoom())
}
map.addEventListener("zoom", updateCssZoom)
map.addEventListener("zoomstart", () => {
zoom_interval = setInterval(updateCssZoom, 50)
updateCssZoom()
})
map.addEventListener("zoomend", () => {
zoom_interval = clearInterval(zoom_interval)
updateCssZoom()
})
}
L.control.attribution({
position: 'topright'
@ -85,11 +99,20 @@ export async function init_places(places_db){
}).addTo(map)
// La couche des zones disponibles
const bathrooms = L.geoJSON(null, {
const amenities = L.geoJSON(null, {
pointToLayer: function(feature, latlng) {
let iconEl = document.createElement("div")
iconEl.classList.add("map-amenity-icon-container")
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)
}
if(feature.properties["toilettes"]){
let bathrooms_icon = document.createElement("img")
bathrooms_icon.src = new URL("../icons/toilettes.svg", import.meta.url).toString()
@ -108,15 +131,6 @@ export async function init_places(places_db){
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
@ -143,7 +157,7 @@ export async function init_places(places_db){
amenity_feature = feature
}
bathrooms.addData(amenity_feature)
amenities.addData(amenity_feature)
}
}
}