Ajout des icones amenity
This commit is contained in:
parent
3934e86ad1
commit
270449766f
GPG key ID:
C4B28FD2729941CE
4 changed files with 214 additions and 53 deletions
|
|
@ -73,3 +73,21 @@ body, html {
|
|||
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) ;
|
||||
}
|
||||
}
|
||||
|
|
@ -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" /><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.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"
|
||||
transform="matrix(0.6518082,0,0,0.6518082,6.7465597,5.381102)"><path
|
||||
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:5"
|
||||
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"
|
||||
transform="matrix(0.6518082,0,0,0.6518082,6.7465597,5.381102)"
|
||||
style="display:inline"><path
|
||||
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"
|
||||
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"
|
||||
cx="8.4971409"
|
||||
cy="11.351075"
|
||||
r="1.8034304" /><circle
|
||||
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:5"
|
||||
cx="9.8694305"
|
||||
cy="12.540602"
|
||||
r="1.3692063" /><circle
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3.79612"
|
||||
id="path5-2"
|
||||
cx="14.196569"
|
||||
cy="11.351075"
|
||||
r="1.8034304" /><circle
|
||||
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:5"
|
||||
cy="12.540602"
|
||||
r="1.3692063" /><circle
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3.79612"
|
||||
id="path5-2-6"
|
||||
cx="19.895998"
|
||||
cy="11.351075"
|
||||
r="1.8034304" /><circle
|
||||
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:5"
|
||||
cx="18.523708"
|
||||
cy="12.540602"
|
||||
r="1.3692063" /><circle
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3.79612"
|
||||
id="path5-1"
|
||||
cx="6.6937122"
|
||||
cy="16.728683"
|
||||
r="1.8034304" /><circle
|
||||
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:5"
|
||||
cx="8.500226"
|
||||
cy="16.623407"
|
||||
r="1.3692063" /><circle
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3.79612"
|
||||
id="path5-2-9"
|
||||
cx="14.196569"
|
||||
cy="17.574043"
|
||||
r="1.8034304" /><circle
|
||||
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:5"
|
||||
cy="17.265224"
|
||||
r="1.3692063" /><circle
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3.79612"
|
||||
id="path5-2-6-4"
|
||||
cx="21.699427"
|
||||
cy="16.728683"
|
||||
r="1.8034304" /><circle
|
||||
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:5"
|
||||
cx="19.892914"
|
||||
cy="16.623407"
|
||||
r="1.3692063" /><circle
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3.79612"
|
||||
id="path5-1-0"
|
||||
cx="4.8902836"
|
||||
cy="23.081261"
|
||||
r="1.8034304" /><circle
|
||||
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:5"
|
||||
cx="7.131021"
|
||||
cy="21.44643"
|
||||
r="1.3692063" /><circle
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3.79612"
|
||||
id="path5-2-9-3"
|
||||
cx="14.196569"
|
||||
cy="24.264763"
|
||||
r="1.8034304" /><circle
|
||||
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:5"
|
||||
cy="22.344973"
|
||||
r="1.3692063" /><circle
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3.79612"
|
||||
id="path5-2-6-4-6"
|
||||
cx="23.502855"
|
||||
cy="23.081261"
|
||||
r="1.8034304" /><circle
|
||||
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:5"
|
||||
cx="21.262117"
|
||||
cy="21.44643"
|
||||
r="1.3692063" /><circle
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3.79612"
|
||||
id="path5-1-0-2"
|
||||
cx="2.3542118"
|
||||
cy="30.812546"
|
||||
r="1.8034304" /><circle
|
||||
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:5"
|
||||
cx="5.2055764"
|
||||
cy="27.316202"
|
||||
r="1.3692063" /><circle
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3.79612"
|
||||
id="path5-2-9-3-0"
|
||||
cx="14.196569"
|
||||
cy="32.615974"
|
||||
r="1.8034304" /><circle
|
||||
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:5"
|
||||
cy="28.685408"
|
||||
r="1.3692063" /><circle
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3.79612"
|
||||
id="path5-2-6-4-6-6"
|
||||
cx="26.038927"
|
||||
cy="30.812546"
|
||||
r="1.8034304" /></g></g></svg>
|
||||
cx="23.187563"
|
||||
cy="27.316202"
|
||||
r="1.3692063" /></g></g></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 4.4 KiB |
60
icons/eau-potable.svg
Normal file
60
icons/eau-potable.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
66
js/map.js
66
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
|
||||
|
|
@ -78,9 +84,67 @@ export async function init_places(places_db){
|
|||
}
|
||||
}).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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue