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

js/symbols.js

@@ -0,0 +1,204 @@
+import { MapFeature } from "./places.js"
+
+export class MapSymbol {
+
+    /**
+     * Solid background color of this area (if any)
+     * @type {undefined|string}
+     */
+    backgroundColor = undefined
+
+    /**
+     * Background raster tiled image to put on top of solid background (if any)
+     * @type {undefined|string|URL}
+     */
+    backgroundUrl = undefined
+
+    /**
+     * Border color of area (if any)
+     * @type {undefined|string}
+     */
+    borderColor = undefined
+
+    /**
+     * Marker URL to place on feature (if point) or on centroid (if area)
+     * @type {undefined|string|URL}
+     */
+    markerUrl = undefined
+
+    /**
+     * Generic name of this feature if no more precise name is given
+     * @type {undefined|string}
+     */
+    genericName = undefined
+
+    /**
+     * A list of sysnonyms for this feature for full text indexing
+     * @type {string[]}
+     */
+    indexSynonyms = []
+
+    clone(){
+        let new_symb = new MapSymbol()
+        Object.assign(new_symb, this)
+        return new_symb
+    }
+
+    static fromFeature(feature){
+        return getSymbolForFeature(feature)
+    }
+}
+
+/**
+ * Get a map symbol from feature properties 
+ * @param {MapFeature|Object} feature 
+ */
+function getSymbolForFeature(feature){
+    let sym = getBaseSymbolForFeature(feature);
+
+    if(feature.properties["color"]){
+        sym = sym.clone()
+        sym.backgroundColor = feature.properties["color"]
+        sym.borderColor = feature.properties["color"]
+    }
+
+    return sym
+}
+
+function getBaseSymbolForFeature(feature){
+
+    if(feature.properties["wifi"]){
+        return WIFI_SYMBOL
+    }
+
+    if(feature.properties["zone-interdite"]){
+        return VERBOTEN_AREA_SYMBOL
+    }
+
+    if(feature.properties["piscine"]){
+        return SWIMMING_POOL_SYMBOL
+    }
+
+    if(feature.properties["Parking"]){
+        return PARKING_SYMBOL
+    }
+
+    if(feature.properties["n couchage"] > 0){
+        return SLEEPING_SYMBOL
+    }
+
+    if(feature.properties["toilettes"]){
+        return TOILETS_SYMBOL
+    }
+
+    if(feature.properties["douches"]){
+        return SHOWER_SYMBOL
+    }
+
+    if(feature.properties["eau potable"]){
+        return DRINKING_WATER_SYMBOL
+    }
+
+    if(feature.properties["batiment"] || feature.properties["piece-batiment"]){
+        return BUILDING_SYMBOL
+    }
+
+    return DEFAULT_SYMBOL
+}
+
+// PREDEFINED Symbols
+
+export const DEFAULT_SYMBOL = new MapSymbol()
+{
+    DEFAULT_SYMBOL.markerUrl = new URL("../icons/default-marker.svg", import.meta.url)
+    DEFAULT_SYMBOL.backgroundColor = "white"
+    DEFAULT_SYMBOL.borderColor = "white"
+}
+
+export const SLEEPING_SYMBOL = new MapSymbol()
+{
+    SLEEPING_SYMBOL.markerUrl = new URL("../icons/dortoir.svg", import.meta.url)
+    SLEEPING_SYMBOL.genericName = "Dortoir"
+    SLEEPING_SYMBOL.indexSynonyms = [
+        "dodo",
+        "dortoir",
+        "mimir",
+        "dormir",
+        "lit"
+    ]
+}
+
+export const DRINKING_WATER_SYMBOL = new MapSymbol()
+{
+    DRINKING_WATER_SYMBOL.markerUrl = new URL("../icons/eau-potable.svg", import.meta.url)
+    DRINKING_WATER_SYMBOL.genericName = "Point d'eau potable"
+}
+
+export const PARKING_SYMBOL = new MapSymbol()
+{
+    PARKING_SYMBOL.markerUrl = new URL("../icons/parking.svg", import.meta.url)
+    PARKING_SYMBOL.genericName = "Parking"
+    PARKING_SYMBOL.backgroundColor = "#2d2d2d"
+    PARKING_SYMBOL.borderColor = "#989898"
+}
+
+export const TOILETS_SYMBOL = new MapSymbol()
+{
+    TOILETS_SYMBOL.markerUrl = new URL("../icons/toilettes.svg", import.meta.url)
+    TOILETS_SYMBOL.genericName = "Toilettes"
+    TOILETS_SYMBOL.indexSynonyms = [
+        "caca",
+        "pipi",
+        "cabinets",
+        "water-closet",
+        "latrines",
+        "🚽",
+        "double véssé",
+        "chaise percée",
+        "WC",
+        "waters",
+        "toilettes",
+        "toilette",
+        "chiotte",
+        "chiottes",
+        "le trône",
+        "le trones",
+        "pièce mystère",
+        "backroom",
+        "retailleau"
+    ]
+}
+
+export const SHOWER_SYMBOL = new MapSymbol()
+{
+    SHOWER_SYMBOL.markerUrl = new URL("../icons/douches.svg", import.meta.url)
+    SHOWER_SYMBOL.genericName = "Douche"
+}
+
+export const SWIMMING_POOL_SYMBOL = new MapSymbol()
+{
+    SWIMMING_POOL_SYMBOL.markerUrl = new URL("../icons/piscine.svg", import.meta.url)
+    SWIMMING_POOL_SYMBOL.genericName = "Piscine"
+    SWIMMING_POOL_SYMBOL.backgroundColor = "#366d73"
+    SWIMMING_POOL_SYMBOL.borderColor = "#366d73"
+}
+
+export const VERBOTEN_AREA_SYMBOL = new MapSymbol()
+{
+    VERBOTEN_AREA_SYMBOL.genericName = "Zone interdite"
+    VERBOTEN_AREA_SYMBOL.backgroundColor = "#992700"
+    VERBOTEN_AREA_SYMBOL.borderColor = "#992700"
+}
+
+export const BUILDING_SYMBOL = new MapSymbol()
+{
+    BUILDING_SYMBOL.genericName = "Batiment"
+    BUILDING_SYMBOL.backgroundColor = "#5a5a5a"
+    BUILDING_SYMBOL.borderColor = "white"
+}
+
+export const WIFI_SYMBOL = new MapSymbol()
+{
+    WIFI_SYMBOL.genericName = "Wifi"
+    WIFI_SYMBOL.markerUrl = new URL("../icons/wifi.svg", import.meta.url)
+}