geojson fitlayer issue solved

iamtekson · Jun 13, 2020 · 653bb1c · 653bb1c
1 parent b4a21ea
commit 653bb1c
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 9 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
-node_modules/
+node_modules/
+data/
diff --git a/Readme.MD b/Readme.MD
@@ -67,6 +67,7 @@ wfsLayer.addTo(map);
 | style         | js object/function | null      | The style file can be in form of javascript oject or function. eg `style = {color: "black",fillOpacity: "0", opacity: "0.5" }                   |
 | onEachFeature | function           | null      | Common region to add this feature is to add popup when the layer cicked. [more detail](https://leafletjs.com/examples/geojson/)                 |
 | CQL_FILTER    | string             | INCLUDE   | To filter the layer based on their attribute. [read more about this](https://docs.geoserver.org/latest/en/user/tutorials/cql/cql_tutorial.html) |
+| fitLayer      | boolean            | true      | The map automatically zoomed into the loaded data region                                                                                        |
 
 ### Web-Mapping-Service-Image (WMSImage) request
 

diff --git a/examples/index.html b/examples/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 
 
     <link
       rel="stylesheet"
@@ -14,7 +15,7 @@
     <style>
       #map {
         width: 100%;
-        height: 50vh;
+        height: 600px;
       }
     </style>
   </head>
@@ -32,6 +33,7 @@ <h2>Wms Image</h2>
 <script src="../src/L.Geoserver.js"></script>
 
 <script>
+
   var map = L.map("map").setView([38.861, 71.2761], 7);
   var osmLayer = L.tileLayer(
     "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
@@ -43,10 +45,11 @@ <h2>Wms Image</h2>
   ).addTo(map);
 
   //wms
-  var wms = L.Geoserver.wms("http://203.159.29.40:8080/geoserver/wms", {
-    layers: `tajikistan:EAR_Road`,
+  var wms = L.Geoserver.wms("https://master.demo.geonode.org/geoserver/wms", {
+    layers: `geonode:Earthquake_100_reclass`,
+    transparent: true,
   });
-  wms.addTo(map);
+  // wms.addTo(map);
 
   //wfs
   var wfs = L.Geoserver.wfs("http://203.159.29.40:8080/geoserver/wms", {
@@ -61,7 +64,7 @@ <h2>Wms Image</h2>
     },
     CQL_FILTER: `name_rg=='DRS'`,
   });
-  wfs.addTo(map);
+  wfs.addTo(map)
 
   //legend
   var legend = L.Geoserver.legend("http://203.159.29.40:8080/geoserver/wms", {

diff --git a/src/L.Geoserver.js b/src/L.Geoserver.js
@@ -9,8 +9,7 @@ L.Geoserver = L.FeatureGroup.extend({
     version: "1.1.0",
     srsname: "EPSG:4326",
     attribution: `layer`,
-    fitlayer: true,
-    popup: true,
+    fitLayer: true,
     style: "",
     onEachFeature: function (feature, layer) {},
     wmsLayers: [],
@@ -93,6 +92,10 @@ L.Geoserver = L.FeatureGroup.extend({
             that.setStyle(that.options.style);
           }
         }
+
+        if (that.options.fitLayer) {
+          that._map.fitBounds(that.getBounds());
+        }
       },
     }).fail(function (jqXHR, textStatus, error) {
       console.log(jqXHR, textStatus, error);
@@ -147,7 +150,9 @@ L.Geoserver = L.FeatureGroup.extend({
         }
 
         //final wmsLayerUrl
-        var wmsLayerURL = `http://203.159.29.40:8080/geoserver/tajikistan/wms?service=WMS&version=1.1.0&request=GetMap&\
+        var wmsLayerURL = `${
+          that.baseLayerUrl
+        }/wms?service=WMS&version=1.1.0&request=GetMap&\
 layers=${otherLayers}&\
 bbox=${(bboxX1 + bboxX2) * 0.5 - maxValue - bufferBbox},${
           (bboxY1 + bboxY2) * 0.5 - maxValue - bufferBbox