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

Implementation du systmème de symbole sur l'app web

Browse source
This commit is contained in:
EpicKiwi 2026-05-29 20:41:54 +02:00
parent ef1734ccd4
commit f7e5bb37bf
Signed by: epickiwi
GPG key ID: C4B28FD2729941CE
15 changed files with 599 additions and 190 deletions
Download patch file Download diff file Expand all files Collapse all files

117
js/map.js
View file

@ -1,5 +1,5 @@
import * as L from "./lib/leaflet/leaflet-src.esm.js"
import { PlaceDatabase } from "./places.js";
import { MapSubFeature, PlaceDatabase } from "./places.js";
import "./lib/turf/turf.js"
let map = null;
@ -93,93 +93,43 @@ export async function init(){
const HIGHLIGHT_LAYER = Symbol("Highlight map layer")
const AMENITY_MARKER_LAYER = Symbol("Amenity marker layer")
const PARENT_FEATURE = Symbol("Parent feature")
const HIGHLIGHT_MARKER_ICON = L.divIcon({
className: "highlight-point-icon"
})
export async function init_places(places_db){
places = places_db
// La couche des zones disponibles
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()
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["n couchage"]){
let dorm_icon = document.createElement("img")
dorm_icon.src = new URL("../icons/dortoir.svg", import.meta.url).toString()
dorm_icon.alt = "Icone de dortoir"
dorm_icon.title = "Dortoir"
dorm_icon.classList.add("dorm")
iconEl.append(dorm_icon)
}
let icon = L.divIcon({
className: "map-amenity-icon",
html: iconEl
})
return L.marker(latlng, {
icon: icon
})
},
onEachFeature: function(feature, layer){
if(feature[PARENT_FEATURE]){
feature[PARENT_FEATURE][AMENITY_MARKER_LAYER] = layer
} else {
feature[AMENITY_MARKER_LAYER] = layer
}
}
}).addTo(map)
// La couche des zones disponibles
const area_highlight = L.geoJSON(null, {
pointToLayer: function(feature, latlng) {
return L.marker(latlng, {
icon: HIGHLIGHT_MARKER_ICON
})
let symbol = feature.mapSymbol;
if(symbol.markerUrl) {
let iconEl = document.createElement("img");
iconEl.src = symbol.markerUrl;
if(iconEl){
return L.marker(latlng, {
icon: L.divIcon({
className: "highlight-point-icon",
html: iconEl,
iconSize: [0, 0]
})
})
}
}
},
style: function(feature){
let symbol = feature.mapSymbol;
return {
className: "map-hilight-area",
fill: false,
stroke: false
fill: !!symbol.backgroundColor,
fillColor: symbol.backgroundColor,
fillOpacity: 0.5,
stroke: !!symbol.borderColor,
color: symbol.borderColor,
}
},
onEachFeature: function(feature, layer){
if(feature[PARENT_FEATURE]){
feature[PARENT_FEATURE][HIGHLIGHT_LAYER] = layer
} else {
feature[HIGHLIGHT_LAYER] = layer
}
feature[HIGHLIGHT_LAYER] = layer
}
}).addTo(map)
@ -187,22 +137,9 @@ export async function init_places(places_db){
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"]
|| feature.properties["n couchage"]
) {
let amenity_feature
if(feature.geometry.type != "Point"){
amenity_feature = turf.centerOfMass(feature)
amenity_feature[PARENT_FEATURE] = feature
amenity_feature.properties = feature.properties
} else {
amenity_feature = feature
}
amenities.addData(amenity_feature)
let point_feature = feature.asPoint()
if(point_feature !== feature){
area_highlight.addData(point_feature)
}
}
}