This is the plugin for Geoserver various kind of requests. Using this plugin, we can make WMS, WFS, getLegendGraphic, WMS-Image request.

• using NPM:

npm install leaflet-geoserver-request

• Quick use :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="[path to js]/L.Geoserver.js"></script>

WMS request will provides georeferenced map image.

var wmsLayer = L.Geoserver.wms("http://localhost:8080/geoserver/wms", {
  layers: "topp:tasmania_roads",
});
wmsLayer.addTo(map);

In WFS request, you need to enable the jsonp for GeoServer. By default, jsonp for GeoServer was desabled. open $GEOSERVER_HOME\webapps\geoserver\WEB-INF\web.xml file and uncomment following line,

<context-param>
    <param-name>ENABLE_JSONP</param-name>
    <param-value>true</param-value>
</context-param>

Note: WFS request only applicable for vector layer, not for raster

var wfsLayer = L.Geoserver.wfs("http://localhost:8080/geoserver/wfs", {
  layers: "topp:tasmania_roads",
});
wfsLayer.addTo(map);

This is the custom request naming by me. It will generate the image which will zoomed to the desired location. The main different between wms and wmsImage request is, it can be zoomed to the desired location based on vector layer.

There are certain convention for this request. Please read carefully

• The first layer must be vector layer in option wmsLayers. Rest of other layers can be vector or raster

• You need to provide the same number of data list in wmsLayers, wmsCQL_FILTER & wmsStyle fields

• The map will zoomed to the first parameter of wmsCQL_FILTER region

• The default value for the style and cql_filter will be include

• The wmsLayers and wmsId fields are required field

<img src="" id="wmsImage" />
<!-- The id field is required. This id will used in js script option "wmsId"-->

L.Geoserver.wmsImage("http://localhost:8080/geoserver/wms", {
  wmsLayers: [
    "workspace:first_layer",
    "workspace:second_layer",
    "workspace:third_layer",
  ],
  wmsCQL_FILTER: ["district=='Syangja'", "INCLUDE", "INCLUDE"],
  wmsStyle: ["style1", "style2", "INCLUDE"],
  format: "image/png",
  wmsId: "wmsImage",
  width: 300,
  height: 300,
});

The legend request will provide the crossponding legend of the layer to the bottom-left position of the map. In case of not providing style parameter, it will take the default style from GeoServer.

var layerLegend = L.Geoserver.legend("http://localhost:8080/geoserver/wms", {
  layers: "topp:tasmania_roads",
  style: `stylefile`,
});

layerLegend.addTo(map);

var wfsLayerAdvance = L.Geoserver.wfs("http://localhost:8080/geoserver/wms", {
  layers: "topp:tasmania_roads",
  style: {
    color: "black",
    fillOpacity: "0",
    opacity: "0.5",
  },
  onEachFeature: function (feature, layer) {
    layer.bindPopup("this is popuped");
  },
  CQL_FILTER: "district='Syangja'",
});

map.fitBounds(wfsLayerAdvance.getBounds());
wfsLayerAdvance.addTo(map);

Would ❤️ to see any contributions.

If you liked my work, show some ❤️ by ⭐ repo.

Also you can appreciate by