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

Ajout des icones amenity

Browse source
This commit is contained in:
EpicKiwi 2026-02-15 14:46:22 +01:00
parent 3934e86ad1
commit 270449766f
Signed by: epickiwi
GPG key ID: C4B28FD2729941CE
4 changed files with 214 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
css/style.css
View file

@ -72,4 +72,22 @@ body, html {
stroke: #ff4e00; stroke: #ff4e00;
stroke-width: 5px; stroke-width: 5px;
fill: rgba(255, 77, 0, 0.25); 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) ;
}
} }

123
icons/douches.svg
View file

@ -9,7 +9,7 @@
id="svg1" id="svg1"
xml:space="preserve" xml:space="preserve"
inkscape:version="1.4.3 (0d15f75042, 2025-12-25)" 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:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -23,9 +23,9 @@
inkscape:pagecheckerboard="1" inkscape:pagecheckerboard="1"
inkscape:deskcolor="#505050" inkscape:deskcolor="#505050"
inkscape:document-units="px" inkscape:document-units="px"
inkscape:zoom="8.8719804" inkscape:zoom="17.743961"
inkscape:cx="14.540158" inkscape:cx="11.665941"
inkscape:cy="14.032944" inkscape:cy="15.075552"
inkscape:window-width="1920" inkscape:window-width="1920"
inkscape:window-height="1015" inkscape:window-height="1015"
inkscape:window-x="0" inkscape:window-x="0"
@ -35,70 +35,89 @@
id="defs1" /><g id="defs1" /><g
inkscape:label="Calque 1" inkscape:label="Calque 1"
inkscape:groupmode="layer" 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.8870773"
y="-0.041903432" /><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="2.2888184e-05"
y="3.470149" /><rect
style="fill:#8800ff;fill-opacity:1;stroke:none;stroke-width:2;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="rect2"
width="22.600895"
height="22.600895"
x="4.6995773"
y="4.657649" /><g
id="g5" id="g5"
transform="matrix(0.6518082,0,0,0.6518082,6.7465597,5.381102)"><path transform="matrix(0.6518082,0,0,0.6518082,6.7465597,5.381102)"
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:5" style="display:inline"><path
d="m 11.36462,-1.836513 h 5.523006 v 3.663218 l 2.057038,2.057038 V 7.518782 H 9.4484751 V 4.080993 L 11.36462,1.826705 Z" style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3.79612"
d="m 12.046488,2.5282784 h 4.193194 v 2.7812002 l 1.561751,1.561751 V 9.6310357 H 10.591706 V 7.0209864 l 1.454782,-1.7115078 z"
id="path4" id="path4"
sodipodi:nodetypes="ccccccccc" /><circle sodipodi:nodetypes="ccccccccc" /><circle
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:5" style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3.79612"
id="path5" id="path5"
cx="8.4971409" cx="9.8694305"
cy="11.351075" cy="12.540602"
r="1.8034304" /><circle r="1.3692063" /><circle
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:5" style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3.79612"
id="path5-2" id="path5-2"
cx="14.196569" cx="14.196569"
cy="11.351075" cy="12.540602"
r="1.8034304" /><circle r="1.3692063" /><circle
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:5" style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3.79612"
id="path5-2-6" id="path5-2-6"
cx="19.895998" cx="18.523708"
cy="11.351075" cy="12.540602"
r="1.8034304" /><circle r="1.3692063" /><circle
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:5" style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3.79612"
id="path5-1" id="path5-1"
cx="6.6937122" cx="8.500226"
cy="16.728683" cy="16.623407"
r="1.8034304" /><circle r="1.3692063" /><circle
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:5" style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3.79612"
id="path5-2-9" id="path5-2-9"
cx="14.196569" cx="14.196569"
cy="17.574043" cy="17.265224"
r="1.8034304" /><circle r="1.3692063" /><circle
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:5" style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3.79612"
id="path5-2-6-4" id="path5-2-6-4"
cx="21.699427" cx="19.892914"
cy="16.728683" cy="16.623407"
r="1.8034304" /><circle r="1.3692063" /><circle
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:5" style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3.79612"
id="path5-1-0" id="path5-1-0"
cx="4.8902836" cx="7.131021"
cy="23.081261" cy="21.44643"
r="1.8034304" /><circle r="1.3692063" /><circle
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:5" style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3.79612"
id="path5-2-9-3" id="path5-2-9-3"
cx="14.196569" cx="14.196569"
cy="24.264763" cy="22.344973"
r="1.8034304" /><circle r="1.3692063" /><circle
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:5" style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3.79612"
id="path5-2-6-4-6" id="path5-2-6-4-6"
cx="23.502855" cx="21.262117"
cy="23.081261" cy="21.44643"
r="1.8034304" /><circle r="1.3692063" /><circle
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:5" style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3.79612"
id="path5-1-0-2" id="path5-1-0-2"
cx="2.3542118" cx="5.2055764"
cy="30.812546" cy="27.316202"
r="1.8034304" /><circle r="1.3692063" /><circle
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:5" style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3.79612"
id="path5-2-9-3-0" id="path5-2-9-3-0"
cx="14.196569" cx="14.196569"
cy="32.615974" cy="28.685408"
r="1.8034304" /><circle r="1.3692063" /><circle
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:5" style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3.79612"
id="path5-2-6-4-6-6" id="path5-2-6-4-6-6"
cx="26.038927" cx="23.187563"
cy="30.812546" cy="27.316202"
r="1.8034304" /></g></g></svg> r="1.3692063" /></g></g></svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

60
icons/eau-potable.svg Normal file
View file

@ -0,0 +1,60 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="32"
height="32"
viewBox="0 0 32 32"
version="1.1"
id="svg1"
xml:space="preserve"
inkscape:version="1.4.3 (0d15f75042, 2025-12-25)"
sodipodi:docname="eau-potable.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"
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
id="namedview1"
pagecolor="#505050"
bordercolor="#ffffff"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="1"
inkscape:deskcolor="#505050"
inkscape:document-units="px"
inkscape:zoom="25.09375"
inkscape:cx="12.752179"
inkscape:cy="16.478207"
inkscape:window-width="1920"
inkscape:window-height="1015"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" /><defs
id="defs1" /><g
inkscape:label="Calque 1"
inkscape:groupmode="layer"
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.8870773"
y="-0.041903432" /><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="2.2888184e-05"
y="3.470149" /><rect
style="fill:#0084ff;fill-opacity:1;stroke:none;stroke-width:2;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="rect2"
width="22.600895"
height="22.600895"
x="4.6995773"
y="4.657649" /><path
style="fill:#ffffff;fill-opacity:1;stroke-width:2;paint-order:stroke fill markers"
d="M 15.965138,7.0290546 C 16.67702,12.606393 26.208356,24.951528 15.999998,24.970946 5.7916397,24.990364 14.472539,12.715048 15.965138,7.0290546 Z"
id="path1"
sodipodi:nodetypes="czc" /></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

66
js/map.js
View file

@ -17,6 +17,11 @@ export async function init(){
zoomControl: false zoomControl: false
}) })
map.addEventListener("zoom", () => {
map.getContainer()
.style.setProperty("--zoom-level", map.getZoom())
})
L.control.attribution({ L.control.attribution({
position: 'topright' position: 'topright'
}).addTo(map) }).addTo(map)
@ -60,6 +65,7 @@ export async function init(){
} }
const HIGHLIGHT_LAYER = Symbol("Hilight map layer") const HIGHLIGHT_LAYER = Symbol("Hilight map layer")
const PARENT_FEATURE = Symbol("Parent feature")
export async function init_places(places_db){ export async function init_places(places_db){
places = places_db places = places_db
@ -77,10 +83,68 @@ export async function init_places(places_db){
feature[HIGHLIGHT_LAYER] = layer feature[HIGHLIGHT_LAYER] = layer
} }
}).addTo(map) }).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 // 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) 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)
}
} }
} }