update on wmsImage request

iamtekson · Jun 19, 2020 · d64ac8c · d64ac8c
1 parent 653bb1c
commit d64ac8c
Show file tree

Hide file tree

Showing 4 changed files with 148 additions and 98 deletions.
diff --git a/examples/index.html b/examples/index.html
diff --git a/examples/maps.html b/examples/maps.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
+    />
+
+    <title>L.Geoserver</title>
+
+    <style>
+      html, body {
+        margin: 0;
+        padding: 0;
+      }
+      #map {
+        width: 100%;
+        height: 100vh;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="map">
+      <h1 class="leaflet-control">Leaflet L.GeoServer Plugin</h1>    
+    </div>
+    <a href="https://github.com/iamtekson/l.geoserver"
+      ><img style="position: fixed; top: 0; right: 0; border: 0; z-index: 1000;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a></a>
+
+    <!-- <div class="wmsimage" style="float: right;">
+      <h2>Wms Image</h2>
+      <img src="" alt="this is image" srcset="" id="wmsImage" />
+    </div> -->
+
+  </body>
+</html>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
+<script src="../src/L.Geoserver.js"></script>
+
+<script>
+
+  var map = L.map("map", {zoomControl: false}).setView([38.861, 71.2761], 7);
+  var osmLayer = L.tileLayer(
+    "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+    {
+      maxZoom: 19,
+      attribution:
+        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+    }
+  ).addTo(map);
+
+  //wms
+  var wms = L.Geoserver.wms("http://tajirisk.ait.ac.th:8080/geoserver/wms", {
+    layers: `tajikistan:EAR_Builtup`,
+  });
+  wms.addTo(map);
+
+  //wfs
+  var wfs = L.Geoserver.wfs("http://tajirisk.ait.ac.th:8080/geoserver/wms", {
+    layers: `tajikistan:jamoat`,
+    style: {
+      color: "red",
+      fillOpacity: 0,
+      opacity: 1,
+      stockWidth: 0.5,
+    },
+    onEachFeature: function (f, l) {
+      l.bindPopup('<pre>'+JSON.stringify(f.properties,null,' ').replace(/[\{\}"]/g,'')+'</pre>');
+    },
+    CQL_FILTER: `name_rg=='Sughd'`,
+  });
+  wfs.addTo(map)
+
+  //legend
+  var legend = L.Geoserver.legend("http://tajirisk.ait.ac.th:8080/geoserver/wms", {
+    layers: `tajikistan:EAR_Builtup`,
+  });
+  legend.addTo(map);
+</script>
diff --git a/examples/wmsImage.html b/examples/wmsImage.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
+    />    
+    <title>WMSImage-L.Geoserver</title>
+    <style>
+      #wmsImage {
+        padding: 30px;
+        border: 1px solid black;
+      }
+    </style>
+  </head>
+
+  <body>
+    <a href="https://github.com/iamtekson/l.geoserver"
+      ><img style="position: fixed; top: 0; right: 0; border: 0; z-index: 1000;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a></a>
+
+    <div class="wmsimage">
+      <h2>Wms Image</h2>
+      <img src="" alt="this is image" srcset="" id="wmsImage" />
+    </div>
+
+  </body>
+</html>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
+<script src="../src/L.Geoserver.js"></script>
+
+<script>
+  //wmsImage
+  var wmsImage = L.Geoserver.wmsImage(
+    "http://tajirisk.ait.ac.th:8080/geoserver/tajikistan/wms",
+    {
+      wmsLayers: [
+        "tajikistan:jamoat",
+        "tajikistan:EAR_Agriculture",
+        "tajikistan:district",
+      ],
+      wmsCQL_FILTER: ["name_rg='Khatlon'", "INCLUDE", "name_rg=='Khatlon'"],
+      wmsStyle: [
+        "INCLUDE",
+        "tajikistan:EAR_Agriculture",
+        "tajikistan:cql_boundary",
+      ],
+      format: "image/png",
+      wmsId: "wmsImage",
+      width: 600,
+      height: 600,
+      transparent: true,
+    }
+  );
+</script>
+
+
+
diff --git a/src/L.Geoserver.js b/src/L.Geoserver.js
@@ -140,12 +140,15 @@ L.Geoserver = L.FeatureGroup.extend({
 
         var otherLayers = "";
         var otherStyle = "";
+        var otherCqlFilter = "";
         for (var i = 1; i < that.options.wmsLayers.length; i++) {
           otherLayers += that.options.wmsLayers[i];
           otherStyle += that.options.wmsStyle[i];
+          otherCqlFilter +=that.options.wmsCQL_FILTER[i];
           if (i != that.options.wmsLayers.length - 1) {
             otherLayers += ",";
             otherStyle += ",";
+            otherCqlFilter += ';';
           }
         }
 
@@ -154,6 +157,8 @@ L.Geoserver = L.FeatureGroup.extend({
           that.baseLayerUrl
         }/wms?service=WMS&version=1.1.0&request=GetMap&\
 layers=${otherLayers}&\
+styles=${otherStyle}&\
+cql_filter=${otherCqlFilter}&\
 bbox=${(bboxX1 + bboxX2) * 0.5 - maxValue - bufferBbox},${
           (bboxY1 + bboxY2) * 0.5 - maxValue - bufferBbox
         },${(bboxX1 + bboxX2) * 0.5 + maxValue + bufferBbox},${