css/style.css

@@ -88,53 +88,8 @@ body > hr {
     }
 }
 
-#map .highlight-point-icon > * {
+.highlight-point-icon > * {
-	width: fit-content;
-	height: fit-content;
     transform: translateX(-50%) translateY(-50%);
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	position: relative;
-}
-
-#map .highlight-point-icon > a {
-	text-decoration: none;
-	color: inherit;
-}
-
-#map .highlight-point-icon h3 {
-	width: max-content;
-	max-width: min(25vw, 100px);
-	text-align: center;
-	margin: 0;
-	color: white;
-	font-size: 1em;
-	line-height: 1;
-	--outline-size: 1px;
-	text-shadow: 0px var(--outline-size) 0px var(--symbol-border-color),
-				 var(--outline-size) 0px 0px var(--symbol-border-color),
-				 var(--outline-size) var(--outline-size) 0px var(--symbol-border-color),
-				 calc(var(--outline-size) * -1) calc(var(--outline-size) * -1) 0px var(--symbol-border-color),
-				 0px calc(var(--outline-size) * -1) 0px var(--symbol-border-color),
-				 calc(var(--outline-size) * -1) 0px 0px var(--symbol-border-color)
-		;
-    opacity: clamp(0, calc( var(--zoom-level) - 18 ), 1) ;
-}
-
-#map .highlight-point-icon img ~ h3 {
-	position: absolute;
-	bottom: 0;
-	left: 50%;
-	transform: translateX(-50%) translateY(100%);
-	margin-top: 1ex;
-}
-
-
-#map .highlight-point-icon:not(.active) {
-	opacity: 0;
-	pointer-events: none;
 }
 
 .map-amenity-icon .map-amenity-icon-container {

generate-tiles.sh

@@ -6,7 +6,7 @@ exec qgis_process run native:tilesxyzdirectory \
 	--PROJECT_PATH="$(pwd)/map.qgz" \
 	--project_path="$(pwd)/map.qgz" \
 	--EXTENT='-2.0953862420599010,-2.0879897658279201,47.5387978378536644,47.5438011984088433 [EPSG:4326]' \
-	--ZOOM_MIN=12 \
+	--ZOOM_MIN=19 \
 	--ZOOM_MAX=21 \
 	--DPI=96 \
 	--BACKGROUND_COLOR='rgba( 0, 0, 0, 0.00 )' \

js/components/bidi-panel.js

@@ -209,7 +209,7 @@ export class BidiPanelElement extends HTMLElement {
 	requestDispatchChangeEvent(){
 		let currentPanel = this.activeChildren
 		if(currentPanel != this.#lastActive){
-			this.dispatchEvent(new ActivePanelChangeEvent("activePanelChange", this.#currentIndex || this.activeChildrenIndex))
+			this.dispatchEvent(new ActivePanelChangeEvent("activePanelChange", this.#currentIndex))
 			this.#lastActive = currentPanel
 		}
 	}

js/index.js

@@ -28,42 +28,11 @@ search_form.elements["query"].addEventListener("input", () => search_form.reques
 window.addEventListener("hashchange", () => {
     let place_id = decodeURIComponent(location.hash.substring(1))
     if(place_id){
-		let feature = places.getFeatureById(place_id);
-		if (feature) {
         MAP.highlight(place_id)
-			if(document.getElementById("search-result")) {
-				openSearchResultItem(feature)
-			} else {
-				let foundIndex = null;
-				let panelChildren = document.getElementById("result-panel").children
-				for(let i = 0; i<panelChildren.length; i++) {
-					let feature_el = panelChildren[i];
-					if(feature_el instanceof FeatureElement && feature_el.feature.id == feature.id){
-						foundIndex = i;
-						break;
-					}
-				}
-
-				if(foundIndex != null){
-					document.getElementById("result-panel").setActiveChildrenIndex(foundIndex, {behavior: "instant"})
-				} else {
-					openFeature(feature)
-				}
-			}
-
-			for(let feature_el of document.getElementById("result-panel").children) {
-				if(feature_el instanceof FeatureElement){
-					MAP.show(feature_el.feature)
-				}
-			}
-		}
     } else {
         MAP.unhighlight_all()
     }
 })
-if(location.hash){
-	window.dispatchEvent(new Event("hashchange"))
-}
 
 search_form.addEventListener("submit", e => {
     e.preventDefault()
@@ -75,23 +44,23 @@ search_form.addEventListener("submit", e => {
 
             let search_results = places.search(data.get("query"))
 
-			MAP.unhighlight_all();
-
             for(let result_item of search_results){
                 let el = document.createElement("li")
                 let a = document.createElement("a")
                 el.append(a)
                 a.href = "#"+encodeURIComponent(result_item.ref)
+		a.addEventListener("click", e => {
+			e.preventDefault()
+			openSearchResultItem(result_item.feature)
+		})
 		let header = document.createElement("camp-feature-short-header")
 		header.feature = result_item.feature
         	a.append(header)
                 resultElements.push(el)
-				MAP.show(result_item.feature)
             }
 
 	    if(!document.getElementById("search-result")){
 	    	let el = document.createElement("ol")
-
 		el.id = "search-result"
 		document.getElementById("result-panel").replaceChildren(el)
 	    }
@@ -102,6 +71,7 @@ search_form.addEventListener("submit", e => {
                 document.getElementById("search-result").replaceChildren(document.createTextNode("Pas de resultat"))
             }
 
+	   document.getElementById("search-result").children[0]?.scrollIntoView()
         } else {
             document.getElementById("search-result")?.remove()
         }
@@ -142,39 +112,23 @@ function openSearchResultItem(feature){
 	}
 }
 
-function openFeature(feature){
-	let panel = document.getElementById("result-panel")
-	let root = document.createElement("camp-feature")
-	root.feature = feature
-	panel.replaceChildren(root)
-	requestAnimationFrame(() => {
-		panel.setActiveChildrenIndex(0, {behavior: "instant"})
-	})
-	updateActiveFeature(feature)
-}
-
 function updateActiveFeature(feature_or_featureid){
 	let newUrl = new URL(window.location)
 	if(feature_or_featureid){
 		newUrl.hash = encodeURIComponent(feature_or_featureid.id || feature_or_featureid)
 	} else {
-		newUrl.hash = "";
+		delete newUrl.hash;
 	}
-	if(newUrl.toString() != location.toString()){
 	window.history.replaceState(null, "", newUrl.toString())
 	window.dispatchEvent(new Event("hashchange"))
 }
-}
 
 document.getElementById("result-panel").addEventListener("activePanelChange", e => {
-	console.log("Panel changed", e.activePanelIndex)
-	if(e.activePanelIndex || e.activePanelIndex === 0){
 	let activeElement = e.target.children[e.activePanelIndex]
 	if(activeElement instanceof FeatureElement){
 		let feature = activeElement.feature
 		updateActiveFeature(feature)
 	} else {
-			updateActiveFeature(null)
+		MAP.unhighlight_all()
-		}
 	}
 })

js/map.js

@@ -75,7 +75,7 @@ export async function init(){
     
     // La couche custom de l'antenne
     L.tileLayer('./tuiles/{z}/{x}/{y}.png', {
-        minZoom: 13,
+        minZoom: 19,
         maxZoom: 21
     }).addTo(map)
 
@@ -107,38 +107,22 @@ export async function init_places(places_db){
     // La couche des zones disponibles
     const area_highlight = L.geoJSON(null, {
         pointToLayer: function(feature, latlng) {
-            let contentEl = document.createElement("a")
-            
-            if(feature.id){
-                contentEl.href = `#${encodeURIComponent(feature.id)}`
-            } else if(feature.parentFeature?.id){
-                contentEl.href = `#${encodeURIComponent(feature.parentFeature.id)}`
-            }
-
             let symbol = feature.mapSymbol;
             if(symbol.markerUrl) {
-                let iconEl = document.createElement("img")
-                iconEl.src = symbol.markerUrl
-                contentEl.append(iconEl)
-            }
                 
-            if(symbol.borderColor && symbol.borderColor != "white"){
+                let iconEl = document.createElement("img");
-                contentEl.style.setProperty("--symbol-border-color", symbol.borderColor);
+                iconEl.src = symbol.markerUrl;
-            }
-
-            if(feature.properties.name){
-                let nameEl = document.createElement("h3")
-                nameEl.textContent = feature.properties.name
-                contentEl.append(nameEl)
-            }
 
+                if(iconEl){
                     return L.marker(latlng, {
                         icon: L.divIcon({
                             className: "highlight-point-icon",
-                    html: contentEl,
+                            html: iconEl,
                             iconSize: [0, 0]
                         })
                     })
+                }
+            }
         },
         style: function(feature){
             let symbol = feature.mapSymbol;
@@ -171,9 +155,6 @@ export function unhighlight_all(){
     for(let el of document.querySelectorAll(".map-hilight-area.active")){
         el.classList.remove("active")
     }
-    for(let el of document.querySelectorAll(".highlight-point-icon.active")){
-        el.classList.remove("active")
-    }
 }
 
 export function highlight(place_or_placeid){
@@ -187,7 +168,10 @@ export function highlight(place_or_placeid){
         place = place_or_placeid
     }
 
-    show(place_or_placeid)
+    if(place[HIGHLIGHT_LAYER]){
+        place[HIGHLIGHT_LAYER].getElement()
+            .classList.add("active")
+    }
 
     let centroid = turf.centroid(place)
     map.panTo(L.latLng(
@@ -195,24 +179,3 @@ export function highlight(place_or_placeid){
         centroid.geometry.coordinates[0]
     ))
 }
-
-export function show(place_or_placeid){
-    let place;
-
-    if(typeof place_or_placeid == "string"){
-        place = places.getFeatureById(place_or_placeid)
-    } else {
-        place = place_or_placeid
-    }
-
-    if(place[HIGHLIGHT_LAYER]){
-        place[HIGHLIGHT_LAYER].getElement()
-            .classList.add("active")
-    }
-
-    let point_layer = place.asPoint()?.[HIGHLIGHT_LAYER];
-    if(point_layer && point_layer != place[HIGHLIGHT_LAYER]){
-        point_layer.getElement()
-            .classList.add("active")
-    }
-}

js/symbols.js

@@ -103,14 +103,8 @@ function getBaseSymbolForFeature(feature){
         return BUILDING_SYMBOL
     }
 
-    if(feature.parentFeature && feature.parentFeature.geometry.type != "Point"){
-        return DEFAULT_AREA_SYMBOL
-    } else if (feature.geometry.type != "Point") {
-        return DEFAULT_AREA_SYMBOL
-    } else {
     return DEFAULT_SYMBOL
 }
-}
 
 // PREDEFINED Symbols
 
@@ -121,12 +115,6 @@ export const DEFAULT_SYMBOL = new MapSymbol()
     DEFAULT_SYMBOL.borderColor = "white"
 }
 
-export const DEFAULT_AREA_SYMBOL = new MapSymbol()
-{
-    DEFAULT_AREA_SYMBOL.backgroundColor = "white"
-    DEFAULT_AREA_SYMBOL.borderColor = "white"
-}
-
 export const SLEEPING_SYMBOL = new MapSymbol()
 {
     SLEEPING_SYMBOL.markerUrl = new URL("../icons/dortoir.svg", import.meta.url)