wms: layer added to map with control

webgis/index.html

@@ -284,14 +284,18 @@
             </template>
             <aside class="menu ml-4 mt-3" data-id="cartography-aside">
                 <button title="Chiudi menu" class="delete is-pulled-right" data-action="menu#closeCartography"></button>
-                <p class="menu-label is-size-5 mt-2 is-clickable" data-id="historic">
+                <ul class="menu-list">
+                    <li>
+                        <input type="checkbox" data-controller="layer" data-action="layer#toggleCadastral" />
+                        Catasto Agenzia delle Entrate (particelle e fabbricati)
+                    </li>
+                </ul>
+                <p class="menu-label is-size-5 mt-4 is-clickable" data-id="historic">
                     <span role="button" data-action="click->menu#toggle" data-id="historic">
                         Catasto storico
-                        <!--
                         <span class="icon pl-2">
                             <i class="fa fa-chevron-right" data-menu-target="icon" data-id="historic"></i>
                         </span>
-                        -->
                     </span>
                 </p>
             </aside>

webgis/js/controllers/layer_controller.js

@@ -33,6 +33,14 @@ export default class extends Controller {
         else map.removeLayer(currentLayer);
     }
 
+    toggleCadastral() {
+        const map = GisState.map;
+        const wms = GisState.cartography.cadastral;
+
+        if (!map.hasLayer(wms)) map.addLayer(wms);
+        else map.removeLayer(wms);
+    }
+
     /**
      * @todo Use Stimulus values?
      * @param {Event} event 

webgis/js/gis.js

@@ -123,20 +123,22 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
 
     GisState.map = map;
 
-    // DEBUG - Test reprojected WMS
     const reprojectedWMSLayer = GIS.reprojectWMS();
     const wmsLayer = new reprojectedWMSLayer(
         'https://wms.cartografia.agenziaentrate.gov.it/inspire/wms/ows01.php?',
         {
-            layers: 'fabbricati',
-            format: 'image/png',
+            layers: 'CP.CadastralParcel,fabbricati',
             transparent: true,
+            format: 'image/png',
             version: '1.1.1',
-            attribution: '© Agenzia Entrate',
+            minZoom: 15,
+            maxZoom: this.MAX_ZOOM,
+            tileSize: 1024,
+            opacity: 0.6,
         }
     );
 
-    wmsLayer.addTo(map);
+    GisState.cartography.cadastral = wmsLayer;
 
     return map;
 }
@@ -584,7 +586,7 @@ GIS.reprojectWMS = function (crs = 'EPSG:4258') {
     const reprojectedWMSLayer =  L.TileLayer.WMS.extend({
         getTileUrl(tilePoint) {
             const map = GisState.map;
-            const crs = map.options.crs;
+            //const crs = map.options.crs;
             const tileSize = this.getTileSize();
 
             //const geoPoint = L.point(tilePoint.x, tilePoint.y);
@@ -594,11 +596,11 @@ GIS.reprojectWMS = function (crs = 'EPSG:4258') {
             )
             const sePoint = nwPoint.add(L.point(tileSize));
 
-            const nw = crs.project(map.unproject(nwPoint, tilePoint.z));
-            const se = crs.project(map.unproject(sePoint, tilePoint.z));
+            const nw = map.unproject(nwPoint, tilePoint.z);
+            const se = map.unproject(sePoint, tilePoint.z);
 
-            const [minX, minY] = proj4('EPSG:4326', 'EPSG:4258', [nw.x, se.y]);
-            const [maxX, maxY] = proj4('EPSG:4326', 'EPSG:4258', [se.x, nw.y]);
+            const [minX, minY] = proj4('EPSG:4326', 'EPSG:4258', [nw.lng, se.lat]);
+            const [maxX, maxY] = proj4('EPSG:4326', 'EPSG:4258', [se.lng, nw.lat]);
 
             const bbox = [minX, minY, maxX, maxY].join(',');
 

webgis/js/state.js

@@ -39,6 +39,7 @@ export const GisState = {
     apiUrl : null,
     cartography : {
         historic: [],
+        cadastral: null,
     }
 }