@anthropomorphic/leaflet-boxed-wms 1.0.0

package/L.BoxedWMS.esm.js

@@ -0,0 +1,69 @@
+import L from 'leaflet';
+
+L.BoxedWMS = L.TileLayer.WMS.extend({
+    initialize: function(url, options) {
+        this._fixedBounds = options.bounds || null;
+        L.TileLayer.WMS.prototype.initialize.call(this, url, options);
+    },
+
+    createTile: function(coords, done) {
+        const tile = L.TileLayer.WMS.prototype.createTile.call(this, coords, done);
+        
+        if (this._fixedBounds && this._map) {
+            const tileBounds = this._tileCoordsToBounds(coords);
+            
+            if (this._fixedBounds.intersects(tileBounds)) {
+                const iWest = Math.max(tileBounds.getWest(), this._fixedBounds.getWest());
+                const iSouth = Math.max(tileBounds.getSouth(), this._fixedBounds.getSouth());
+                const iEast = Math.min(tileBounds.getEast(), this._fixedBounds.getEast());
+                const iNorth = Math.min(tileBounds.getNorth(), this._fixedBounds.getNorth());
+                
+                const isClipped = (iWest > tileBounds.getWest() || iSouth > tileBounds.getSouth() || 
+                                   iEast < tileBounds.getEast() || iNorth < tileBounds.getNorth());
+                
+                if (isClipped) {
+                    const crs = this._map.options.crs;
+                    const zoom = coords.z;
+                    
+                    const tNW = crs.latLngToPoint(L.latLng(tileBounds.getNorth(), tileBounds.getWest()), zoom);
+                    const tSE = crs.latLngToPoint(L.latLng(tileBounds.getSouth(), tileBounds.getEast()), zoom);
+                    const iNW = crs.latLngToPoint(L.latLng(iNorth, iWest), zoom);
+                    const iSE = crs.latLngToPoint(L.latLng(iSouth, iEast), zoom);
+                    
+                    const tileSize = 256;
+                    
+                    const leftPct = ((iNW.x - tNW.x) / tileSize) * 100;
+                    const topPct = ((iNW.y - tNW.y) / tileSize) * 100;
+                    const rightPct = ((tSE.x - iSE.x) / tileSize) * 100;
+                    const bottomPct = ((tSE.y - iSE.y) / tileSize) * 100;
+                    
+                    tile.style.clipPath = `inset(${topPct}% ${rightPct}% ${bottomPct}% ${leftPct}%)`;
+                }
+            }
+        }
+        return tile;
+    },
+
+    getTileUrl: function(coords) {
+        if (!this._fixedBounds) {
+            return L.TileLayer.WMS.prototype.getTileUrl.call(this, coords);
+        }
+        var tileBounds = this._tileCoordsToBounds(coords);
+        if (!this._fixedBounds.intersects(tileBounds)) {
+            return 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+        }
+        return L.TileLayer.WMS.prototype.getTileUrl.call(this, coords);
+    }
+});
+
+const boxedWms = function(url, options) {
+    return new L.BoxedWMS(url, options);
+};
+
+
+L.boxedWms = boxedWms;
+
+export default L.BoxedWMS;
+
+
+export { boxedWms };

package/L.BoxedWMS.js

@@ -0,0 +1,86 @@
+'use strict';
+
+(function (factory) {
+
+    if (typeof define === 'function' && define.amd) {
+
+        define(['leaflet'], factory);
+
+    } else if (typeof module === 'object' && module.exports) {
+
+        module.exports = factory(require('leaflet'));
+
+    } else {
+
+        factory(window.L);
+
+    }
+
+}(function (L) {
+
+    L.BoxedWMS = L.TileLayer.WMS.extend({
+        initialize: function(url, options) {
+            this._fixedBounds = options.bounds || null;
+            L.TileLayer.WMS.prototype.initialize.call(this, url, options);
+        },
+
+        createTile: function(coords, done) {
+            const tile = L.TileLayer.WMS.prototype.createTile.call(this, coords, done);
+            
+            if (this._fixedBounds && this._map) {
+                const tileBounds = this._tileCoordsToBounds(coords);
+                
+                if (this._fixedBounds.intersects(tileBounds)) {
+                    const iWest = Math.max(tileBounds.getWest(), this._fixedBounds.getWest());
+                    const iSouth = Math.max(tileBounds.getSouth(), this._fixedBounds.getSouth());
+                    const iEast = Math.min(tileBounds.getEast(), this._fixedBounds.getEast());
+                    const iNorth = Math.min(tileBounds.getNorth(), this._fixedBounds.getNorth());
+                    
+                    const isClipped = (iWest > tileBounds.getWest() || iSouth > tileBounds.getSouth() || 
+                                       iEast < tileBounds.getEast() || iNorth < tileBounds.getNorth());
+                    
+                    if (isClipped) {
+                        const crs = this._map.options.crs;
+                        const zoom = coords.z;
+                        
+                        const tNW = crs.latLngToPoint(L.latLng(tileBounds.getNorth(), tileBounds.getWest()), zoom);
+                        const tSE = crs.latLngToPoint(L.latLng(tileBounds.getSouth(), tileBounds.getEast()), zoom);
+                        
+                        const iNW = crs.latLngToPoint(L.latLng(iNorth, iWest), zoom);
+                        const iSE = crs.latLngToPoint(L.latLng(iSouth, iEast), zoom);
+                        
+                        const tileSize = 256;
+                        
+                        const leftPct = ((iNW.x - tNW.x) / tileSize) * 100;
+                        const topPct = ((iNW.y - tNW.y) / tileSize) * 100;
+                        const rightPct = ((tSE.x - iSE.x) / tileSize) * 100;
+                        const bottomPct = ((tSE.y - iSE.y) / tileSize) * 100;
+                        
+                        tile.style.clipPath = `inset(${topPct}% ${rightPct}% ${bottomPct}% ${leftPct}%)`;
+                    }
+                }
+            }
+            return tile;
+        },
+
+        getTileUrl: function(coords) {
+            if (!this._fixedBounds) {
+                return L.TileLayer.WMS.prototype.getTileUrl.call(this, coords);
+            }
+
+            var tileBounds = this._tileCoordsToBounds(coords);
+
+            if (!this._fixedBounds.intersects(tileBounds)) {
+                return 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+            }
+
+            return L.TileLayer.WMS.prototype.getTileUrl.call(this, coords);
+        }
+    });
+
+    L.boxedWms = function(url, options) {
+        return new L.BoxedWMS(url, options);
+    };
+
+    return L.BoxedWMS;
+}));

package/README.md

@@ -0,0 +1 @@
+# LeafletBoxedWms

package/docs/index.html

@@ -0,0 +1,106 @@
+<!doctype html>
+<html lang="it">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Boxed WMS + TimeDimension Demo</title>
+
+  <!-- Leaflet CSS -->
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+
+  <!-- Leaflet.TimeDimension CSS -->
+  <link rel="stylesheet"
+    href="https://unpkg.com/leaflet-timedimension@1.1.1/dist/leaflet.timedimension.control.min.css" />
+
+
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+    }
+
+    html,
+    body,
+    #map {
+      height: 100%;
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="map"></div>
+
+  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+  <script src=" https://cdn.jsdelivr.net/npm/leaflet-velocity@2.1.4/dist/leaflet-velocity.min.js "></script>
+  <link href=" https://cdn.jsdelivr.net/npm/leaflet-velocity@2.1.4/dist/leaflet-velocity.min.css " rel="stylesheet">
+
+  <script src="https://unpkg.com/iso8601-js-period@0.2.1/iso8601.js"></script>
+  <script src="https://unpkg.com/leaflet-timedimension@1.1.1/dist/leaflet.timedimension.min.js"></script>
+  <script src="../L.BoxedWMS.js"></script>
+
+  <script>
+
+
+    const fixedBBox = L.latLngBounds([
+      [38, 10],
+      [44, 16],
+    ]);
+
+    var map = L.map("map", {
+      timeDimension: true,
+      timeDimensionControl: true,
+    }).setView([40.5, 13.0], 6);
+
+    L.tileLayer(
+      "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
+      {
+        attribution: "©OpenStreetMap, ©CartoDB",
+      },
+    ).addTo(map);
+
+    L.rectangle(fixedBBox, {
+      color: "#ff7800",
+      weight: 3,
+      fill: false,
+      dashArray: "10, 10",
+    }).addTo(map);
+
+    var nasaWmsUrl = "https://aspim.s4oceandata.eu/ncWMS/wms";
+
+    var boxedWmsLayer = L.boxedWms(nasaWmsUrl, {
+      layers: "cmems_mod_med_phy-sal_anfc_4_2km_P1D-m_so/so",
+      format: "image/png",
+      transparent: true,
+      bounds: fixedBBox,
+    });
+
+    var tdLayer = L.timeDimension.layer.wms(boxedWmsLayer, {
+      updateTimeDimension: true,
+      requestTimeFromCapabilities: true,
+    });
+
+
+    tdLayer.addTo(map);
+
+    fetch("./pippo.json")
+      .then(response => response.json())
+      .then(data => {
+
+        var velocityLayer = L.velocityLayer({
+          displayValues: true,
+          displayOptions: {
+            displayPosition: 'bottomleft',
+            displayEmptyString: 'No wind data'
+          },
+          data: data,
+          maxVelocity: 20
+        });
+
+        velocityLayer.addTo(map)
+      });
+  </script>
+</body>
+
+</html>

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@anthropomorphic/leaflet-boxed-wms",
+  "version": "1.0.0",
+  "description": "A Leaflet WMS layer that restricts tile loading to a fixed bounding box.",
+  
+  "main": "L.BoxedWMS.js",           
+  "module": "L.BoxedWMS.esm.js",    
+  
+  "exports": {                        
+    ".": {
+      "import": "./L.BoxedWMS.esm.js",  
+      "require": "./L.BoxedWMS.js",     
+      "default": "./L.BoxedWMS.js"
+    }
+  },
+  
+  "peerDependencies": {
+    "leaflet": "^1.9.4"
+  }
+}