From e87fe1531db8d3334948aaaf2f637acff65c9d35 Mon Sep 17 00:00:00 2001
From: Karl Determe <karl.determe@streetup.be>
Date: Tue, 6 Oct 2026 15:23:50 +0200
Subject: [PATCH] feat: add management zone form template and corresponding
 unit tests

---
 .../management_zones_form.html                | 64 ++++++++++++++++++-
 loko/assets/tests_management_zones.py         |  4 ++
 2 files changed, 67 insertions(+), 1 deletion(-)

diff --git a/loko/assets/templates/assets/management_zones/management_zones_form.html b/loko/assets/templates/assets/management_zones/management_zones_form.html
index 61504fe..a2ad1eb 100644
--- a/loko/assets/templates/assets/management_zones/management_zones_form.html
+++ b/loko/assets/templates/assets/management_zones/management_zones_form.html
@@ -240,6 +240,7 @@
 {% endblock content %}
 
 {% block script %}
+<script src="{% static 'common/layer-switcher-control.js' %}"></script>
 <script>
 document.addEventListener("DOMContentLoaded", function () {
     const mapDiv = document.getElementById("zonePickerMap");
@@ -308,7 +309,68 @@ document.addEventListener("DOMContentLoaded", function () {
         cooperativeGestures: true
     });
 
-    map.addControl(new maplibregl.NavigationControl(), 'top-right');
+    // 1. Fond de plan & Orthophotos (LayerSwitcherControl)
+    if (typeof LayerSwitcherControl !== 'undefined') {
+        const layerSwitcher = new LayerSwitcherControl({
+            layers: [{
+                id: 'basemap',
+                name: "{% translate 'Fonds de plan & Orthophotos' %}",
+                icon: 'satellite',
+                group: 'basemap',
+                beforeLayer: function (mapInstance) {
+                    if (mapInstance && mapInstance.getLayer('poly-preview-fill')) {
+                        return 'poly-preview-fill';
+                    }
+                    return undefined;
+                },
+                layer: {
+                    type: 'raster',
+                    paint: { 'raster-opacity': 1 }
+                },
+                basemaps: (window.MAP_BACKGROUNDS && window.MAP_BACKGROUNDS.length > 0) ? window.MAP_BACKGROUNDS : undefined,
+                sublayers: [
+                    {
+                        id: 'urbis',
+                        name: window.MAP_ORTHO_WMS_NAME || 'Urbis (Bruxelles)',
+                        default: true,
+                        source: {
+                            type: 'raster',
+                            tiles: [
+                                window.MAP_ORTHO_WMS_URL || 'https://geoservices-urbis.irisnet.be/geoserver/urbisgrid/wms?service=WMS&version=1.3.0&request=GetMap&layers=Ortho&styles=&format=image/png&transparent=true&width=256&height=256&crs=EPSG:3857&bbox={bbox-epsg-3857}'
+                            ],
+                            tileSize: 256,
+                            attribution: window.MAP_ORTHO_WMS_ATTRIBUTION || '© Brussels UrbIS'
+                        }
+                    },
+                    {
+                        id: 'vlaanderen',
+                        name: 'Vlaanderen 2023',
+                        source: {
+                            type: 'raster',
+                            tiles: [
+                                'https://geo.api.vlaanderen.be/OMW/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=omwrgb23vl&STYLE=&FORMAT=image/png&TILEMATRIXSET=GoogleMapsVL&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}'
+                            ],
+                            tileSize: 256,
+                            attribution: '© Digitaal Vlaanderen - Orthofoto 2023'
+                        }
+                    }
+                ]
+            }]
+        });
+        map.addControl(layerSwitcher, 'top-right');
+    }
+
+    // 2. Navigation Control (Zoom +/- & Pitch/Bearing)
+    map.addControl(new maplibregl.NavigationControl({ visualizePitch: true }), 'top-right');
+
+    // 3. Outil de recherche d'adresse
+    if (typeof AddressSearchControl !== 'undefined') {
+        const searchCtrl = new AddressSearchControl({
+            autocompleteUrl: "{% url 'common:autocomplete_street' %}",
+            placeholder: "{% translate 'Rechercher une adresse…' %}"
+        });
+        map.addControl(searchCtrl, 'top-left');
+    }
 
     function getColor() {
         return colorInput ? colorInput.value : "#198754";
diff --git a/loko/assets/tests_management_zones.py b/loko/assets/tests_management_zones.py
index 7101dfe..0cf7fa8 100644
--- a/loko/assets/tests_management_zones.py
+++ b/loko/assets/tests_management_zones.py
@@ -364,6 +364,8 @@ class ManagementZonesPermissionAndCRUDTests(TestCase):
         self.client.login(username="editor", password="password")
         res = self.client.get(url)
         self.assertEqual(res.status_code, 200)
+        self.assertContains(res, "layer-switcher-control.js")
+        self.assertContains(res, "AddressSearchControl")
 
         # Post valid zone
         geojson_polygon = {
@@ -401,6 +403,8 @@ class ManagementZonesPermissionAndCRUDTests(TestCase):
         self.client.login(username="editor", password="password")
         res = self.client.get(url)
         self.assertEqual(res.status_code, 200)
+        self.assertContains(res, "layer-switcher-control.js")
+        self.assertContains(res, "AddressSearchControl")
 
         post_data = {
             'code': self.zone.code,