css/style.css

@@ -127,14 +127,10 @@ body > hr {
     width: min(50vw, 200px);
     transform: translateX(-50%) translateY(-50%);
     filter: drop-shadow(0 0 10px black);
-    opacity: clamp(0, calc( 1 - ( var(--zoom-level) - 12 ) ), 1) ;
+    opacity: clamp(0, calc( 1 - ( var(--zoom-level) - 18 ) ), 1) ;
     pointer-events: none;
 }
 
-#map .map-hilight-area:not(.active) {
-	opacity: 0;
-}
-
 /* SAERCH FORM */
 
 #search-section {

index.html

@@ -20,8 +20,8 @@
     
     <form id="search-section">
         <label for="search-area-query">Rechercher une zone</label><br/>
-        <input type="search" name="query" id="search-area-query" autocomplete="off" />
+        <input type="search" name="query" id="search-area-query" />
-        <button title="Rechercher" >
+        <button title="Rechercher" autocomplete="no">
             <img src="icons/search.svg" alt="Icone de loupe"/>
 	</button>
     </form>

js/components/feature-legend.js

@@ -17,8 +17,6 @@ TEMPLATE.innerHTML = `
 	justify-content: center;
 	align-items: center;
 
-	background-color: color-mix(in srgb, var(--background-color, transparent), transparent 50%);
-
 	box-sizing: border-box;
 	border: solid 1px transparent;
 }
@@ -58,7 +56,7 @@ export class FeatureLegendElement extends HTMLElement {
 		container.hidden = !this.feature
 		if(this.feature){
 			let symbol = this.feature.mapSymbol
-			container.style.setProperty("--background-color", symbol.backgroundColor || "transparent");
+			container.style.backgroundColor = symbol.backgroundColor || "transparent"
 			container.style.backgroundImage = symbol.backgroundUrl ? `url(${symbol.backgroundUrl})` : "none"
 			container.style.borderColor = symbol.borderColor || "transparent"
 			if(symbol.markerUrl){

js/map.js

@@ -49,10 +49,10 @@ export async function init(){
         // Polygone définissant les limites de la carte
         fetch("./couches/emprise.geojson").then(res => res.json()).then(geojson => {
             let coordinate_list = geojson.features[0].geometry.coordinates[0]
-            let first_point = L.latLng([...coordinate_list[0]].reverse())
+            let first_point = map.project(L.latLng([...coordinate_list[0]].reverse()))
-            let bounds = L.latLngBounds(first_point, first_point)
+            let bounds = L.bounds(first_point, first_point)
             for(let i = 1; i<coordinate_list.length; i++){
-                let point = [...coordinate_list[i]].reverse()
+                let point = map.project([...coordinate_list[i]].reverse())
                 bounds.extend(point)
             }
             map_bounds = bounds
@@ -60,14 +60,6 @@ export async function init(){
         }),
     ])
 
-    map.addEventListener("move", () => {
-        if(map_bounds.contains(map.getCenter())){
-            map.setMaxZoom(21)
-        } else {
-            map.setMaxZoom(18)
-        }
-    })
-
     // La couche Openstreetmap standard
     L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
         attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
@@ -87,11 +79,12 @@ export async function init(){
                 className: "center-marker"
             }),
             title: "Camp Interhack 2026",
+            minZoom: 18,
         }
     ).addTo(map)
 
     // Parametrage de la carte initiale
-    //map.setMaxBounds(map_bounds)
+    map.setMaxBounds(map_bounds)
     map.setView(map_center, 19, {
         animate: false,
     })