npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

leaflet-geoserver-request

v1.3.0

Published

This is the library for wms, wfs, legend, wmsImage request from geoserver to leaflet.

Downloads

1,681

Readme

Documentation leaflet-geoserver-request

DOI Build Status GitHub release (latest by date) GitHub file size in bytes

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

demo

Video tutorial

Youtube link

Installation and setup

  • 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>

Web-Map-Service (WMS) Request

WMS request will provides georeferenced map image.

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

| Option | Type | Default | Description | | ----------- | ------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | | layers | string | undefined | This is required filed. If you have multiple layers, you can add them in a comma seperated values: "workspace:layer1,workspace:layer2" | | format | string | image/png | formate of the wms request. It may be image/jpeg, image/tiff, application/openlayers | | transparent | boolean | true | transparent of the map | | CQL_FILTER | string | INCLUDE | To filter the layer based on their attribute. read more about this | | zIndex | integer | 1000 | zIndex of the layer | | attribution | string | layer | attribution of the layer. It will be added at the bottom-left cornor of the map | | style | string | undefined | style file associated with that layer. If you didn't provide the style field, it will take default style of the layer |

Web-Feature-Service (WFS) Request

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);
WFS options

| Options | Type | Default | Description | | ------------- | ------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | | layers | string | undefined | This is required filed. If you have multiple layers, you can add them in a comma seperated values: "workspace:layer1,workspace:layer2" | | 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 | | CQL_FILTER | string | INCLUDE | To filter the layer based on their attribute. read more about this | | fitLayer | boolean | true | The map automatically zoomed into the loaded data region |

Web-Mapping-Service-Image (WMSImage) request

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,
});

Legend Request

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);

Advance WFS request demo

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);

Contribution:

Would :heart: to see any contributions.

Appreciate:

If you liked my work, show some :heart: by :star: repo.

Also you can appreciate by