Merge branch 'add-layer-tree-control' into create_img_docker

atlas/configuration/config.py.sample

@@ -96,6 +96,34 @@ MAP = {
     'ENABLE_SLIDER': True
 }
 
+COUCHES_SIG = [
+    {
+        'name': 'Zonage pluvial',
+        'type': 'wms',
+        'url': 'https://cartographie.nantesmetropole.fr/arcgis/services/PLUm/plum_annexes/MapServer/WMSServer?',
+        'options': {
+            'layers': 'Zonage_pluvial_(I19-03)54824',
+            'transparent': True,
+            'format': 'image/png'
+        }
+    },
+    {
+        'name': 'Réseau de chaleur',
+        'type': 'wms',
+        'url': 'https://cartographie.nantesmetropole.fr/arcgis/services/PLUm/plum_annexes/MapServer/WMSServer?',
+        'options': {
+            'layers': 'Réseau_de_chaleur_(I_07-00)28291',
+            'transparent': True,
+            'format': 'image/png'
+        }
+    },
+    {
+        'name': 'PLUM annexes',
+        'type': 'arcgisMapService',
+        'url': "https://cartographie.nantesmetropole.fr/arcgis/rest/services/PLUm/plum_annexes/MapServer"
+    }
+]
+
 ###########################
 ###########################
 #### Security  Config #####

atlas/static/couchesSig.js

@@ -0,0 +1,48 @@
+// Gestionnaire de couches SIG additionnelles
+
+function createLeafletLayer(coucheSigInfo) {
+  return L.tileLayer.wms(
+    coucheSigInfo.url,
+    coucheSigInfo.options
+  );
+}
+
+function createEsriDynamicLayer(coucheSigInfo) {
+  return L.esri.dynamicMapLayer(
+    {
+      url: coucheSigInfo.url,
+      layers: []
+    }
+  );
+}
+
+function createLayer(coucheSigInfo) {
+  if (coucheSigInfo.type === "wms") {
+    return createLeafletLayer(coucheSigInfo);
+  } else if (coucheSigInfo.type === "arcgisMapService") {
+    return createEsriDynamicLayer(coucheSigInfo);
+  }
+}
+
+function addLayerControlToMap(map) {
+  var layer_types_map = {
+    wms: "leaflet",
+    arcgisMapService: "esriDynamic"
+  };
+  var sigLayers = [];
+  couchesSigInfo.forEach(
+    (coucheSigInfo) => {
+      sigLayers.push(
+        {
+          layer: createLayer(coucheSigInfo),
+          type: layer_types_map[coucheSigInfo.type],
+          name: coucheSigInfo.name
+        }
+      );
+    }
+  );
+  var layerTreeCtrl = new L.Control.LayerTreeControl(sigLayers, {
+    position: 'topright',
+  });
+  map.addControl(layerTreeCtrl);
+}

atlas/static/mapAreas.js

@@ -65,6 +65,11 @@ htmlLegend = configuration.AFFICHAGE_MAILLE
 
 generateLegende(htmlLegend);
 
+// Gestionnaire de couches SIG additionnelles
+if (couchesSigInfo !== undefined) {
+  addLayerControlToMap(map);
+}
+
 function displayObsPreciseBaseUrl() {
     return configuration.URL_APPLICATION + "/api/observations/" + areaInfos.areaCode
 };

atlas/static/mapHome.js

@@ -5,6 +5,12 @@ var map = generateMap(zoomHomeButton);
 var legend = L.control({position: 'bottomright'});
 
 map.scrollWheelZoom.disable();
+
+// Gestionnaire de couches SIG additionnelles
+if (couchesSigInfo !== undefined) {
+  addLayerControlToMap(map);
+}
+
 $('#map').click(function(){
     map.scrollWheelZoom.enable();
 })

atlas/static/mapMailles.js

@@ -18,6 +18,11 @@ htmlLegend =
     configuration.STRUCTURE;
 generateLegende(htmlLegend);
 
+// Gestionnaire de couches SIG additionnelles
+if (couchesSigInfo !== undefined) {
+  addLayerControlToMap(map);
+}
+
 // Current observation Layer: leaflet layer type
 var currentLayer;
 

atlas/static/mapPoint.js

@@ -7,6 +7,11 @@ if (configuration.MAP.ENABLE_SLIDER) {
 }
 var legend = L.control({position: "bottomright"});
 
+// Gestionnaire de couches SIG additionnelles
+if (couchesSigInfo !== undefined) {
+  addLayerControlToMap(map);
+}
+
 // Layer display on window ready
 
 /*GLOBAL VARIABLE*/

atlas/static/package.json

@@ -21,13 +21,15 @@
     "datatables.net-bs4": "^3.2.2",
     "datatables.net-responsive-bs4": "^2.2.9",
     "datatables.net-scroller-bs4": "^2.0.4",
+    "esri-leaflet": "^3.0.14",
     "eve-raphael": "^0.5.0",
     "glossarizer": "^1.5.2",
     "jquery": "^3.6.0",
     "jquery-lazy": "^1.7.9",
     "jquery-ui-dist": "^1.12.1",
     "leaflet": "^1.6.0",
     "leaflet-fullscreen": "0.0.2",
+    "leaflet-layer-tree": "git+https://github.com/makinacorpus/L.LayerTreeControl.git",
     "leaflet.fullscreen": "^2.0.0",
     "leaflet.markercluster": "^1.4.1",
     "leaflet.snogylop": "^0.4.0",

atlas/templates/areaSheet/_main.html

@@ -37,6 +37,7 @@
         var biodiversity_organism_values_chart = {{ biodiversity_organism_values_chart | tojson}};
         var observations_organism_values_chart = {{ observations_organism_values_chart | tojson}};
     </script>
+    {% include 'templates/core/assets_couches_sig.html' %}
     <script src="{{ url_for('static', filename='custom/maps-custom.js') }}"></script>
     <script src="{{ url_for('static', filename='listeEspeces.js') }}"></script>
     <script src="{{ url_for('static', filename='mapGenerator.js') }}"></script>

atlas/templates/core/assets_couches_sig.html

@@ -0,0 +1,15 @@
+{% if config.COUCHES_SIG %}
+    <script type="text/javascript">
+      var couchesSigInfo = {{ config.COUCHES_SIG|tojson }};
+    </script>
+    {# TODO: further if on whether arcgis layers are present or not #}
+    <script src="{{ url_for('static', filename='node_modules/esri-leaflet/dist/esri-leaflet.js') }}"></script>
+    <link rel="stylesheet"
+          href="{{ url_for('static', filename='node_modules/leaflet-layer-tree/src/L.LayerTreeControl.css') }}"/>
+    <script src="{{ url_for('static', filename='node_modules/leaflet-layer-tree/src/L.LayerTreeControl.js') }}"></script>
+    <script src="{{ url_for('static', filename='couchesSig.js') }}"></script>
+{% else %}
+    <script type="text/javascript">
+      var couchesSigInfo = undefined;
+    </script>
+{% endif %}

atlas/templates/home/_main.html

@@ -12,6 +12,7 @@
             configuration = {{configuration|tojson}},
             url_limit_territory = "{{url_for('static', filename='custom/territoire.json') }}";
     </script>
+    {% include 'templates/core/assets_couches_sig.html' %}
     <script src="{{ url_for('static', filename='main.js') }}"></script>
     <script src="{{ url_for('static', filename='custom/maps-custom.js') }}"></script>
     <script src="{{ url_for('static', filename='mapGenerator.js') }}"></script>

atlas/templates/speciesSheet/_main.html

@@ -53,7 +53,7 @@
     var cd_ref = {{ taxon.taxonSearch.cd_ref }};
     var nb_obs = {{ taxon.taxonSearch.nb_obs }};
 </script>
-
+{% include 'templates/core/assets_couches_sig.html' %}
 <script src="{{ url_for('static', filename='custom/maps-custom.js') }}"></script>
 <script src="{{ url_for('static', filename='ficheEspece.js') }}"></script>
 <script src="{{ url_for('static', filename='chart.js') }}"></script>