WFS request in Geoserver using Leafletjs

Tek Bahadur Kshetri
Nov 1 · 4 min read

WFS stands for Web Feature Services. It provides the GeoJson output from the input URL. We can pass the following request on GeoServer;

  1. Web Coverage Service (WCS): It is a standard created by the OGC that refers to the receiving of geospatial information as ‘coverages’: digital geospatial information representing space-varying phenomena.
  2. Web Feature Service (WFS): It is also a standard created by the Open Geospatial Consortium (OGC) for creating, modifying and exchanging vector format geographic information on the Internet using HTTP. A WFS encodes and transfers information in Geography Markup Language (GML), a subset of XML.
  3. Web Map Service (WMS): It is also a standard created by the OGC that provides the georeferenced map in the form of an image.
  4. Tile Map Service (TMS): The TMS and WMS are similar in some manner. While WMS provides the single image layer whereas TMS provides the tiles of the layer (in general 256*256 size).
  5. Web Map Service GeoWebCache (WMS-C): GeoWebCache is a Java web application used to cache map tiles coming from a variety of sources such as OGC Web Map Service (WMS).
  6. Web Map and Tile Service (WMTS): It is the data transmission between computers (protocol translator).

In this blog, I am planning to write about how can we request the WFS explain line by line.

The beginner always do mistakes. I also had made lots of mistakes in the beginning phase. We have to learn from the mistake. I had spent two days on very minor error. When I found the solution, I felt like I am the dumbest one in the world. When I solve the error on my way, Then I felt like I am the hero, I know everything, I can build any type of system Bla Bla Bla…..

Let’s come to the point. In Geoserver, When your data is ready. You can see your WFS layer by following steps;

  • Goto the Layer Preview tab
  • In your layer preview, Inside all formats dropdown button, select WFS>GeoJson

Note: Make sure you select the vector layer. Your raster layer doesn’t contain any options for WFS.

This is how we can see the WFS layer in GeoJSON format. Let’s connect this layer in the leaflet. You probably think why we have to send WFS request to the server, The WMS was already there and WMS is also very easy. There are lots of advantages using WFS instate of using WMS. One of the main advantages is that we can have access to the data properties in WFS whereas WMS is just a single tile image nothing more. The main difference between them is that WFS provides us the vector data analysis and we can make vector analysis whereas WMS is the raster layer. We only handle raster operations. You can find out more information about this request here.

Browser doesn’t let you share the data from cross-origin. You can’t get the data if you add the GeoJSON data URL in your code. You can easily fetch the GeoJSON data in Jsonp format in GeoServer. To enable the Jsonp in your GeoServer you have to follow the following steps;

  1. Goto the GeoServer installation disk and then ..\webapps\geoserver\WEB-INF
  2. Then open the web.xml file in your code editor
  3. Uncomment the following code (code may be in line 40) or if you don’t have it write it;
<context-param>
<param-name>ENABLE_JSONP</param-name>
<param-value>true</param-value>
</context-param>

4. try to save it

Probably you unable to save it write? This is because you can’t have write permission to the installation files. Then how can we solve this? You first move the file to another directory, edit the file, save it and move it back to the same place. one problem solved.

Now you can pass the ajax request to the server to fetch the data. For this write the following code and try to understand this;

This is the ajax get request. I make this simpler to understand. Inside your data section, you have to change the type name to your workspace:layer_to_display. Also, you can filter (query) the required data by passing CQL_FILTER inside your data section. If I am interested in the data column name as column and value as a demo then I can filter this data by adding CQL_FILTER: “column:’demo’” key-value pair in the data section. Also don’t forget to write outputFormat: ‘text/javascript’ in your code. I already mentioned, why we can’t fetch the JSON data. Use Jsonp as the dataType and set callback function handleJson.

The handleJson function defined below the ajax call will receive the data from URL and L.GeoJSON will handle this data through URL and add this data to the leaflet map. If you want to fit the data in defined bound, you can set it using map.fitBounds(selectedArea.getBounds);. Then you can add the popup feature and style feature of the GeoJSON. onEachFeature is used to fetch the properties of the GeoJSON.

Finally, you did it. You made a WFS request to the GeoServer and fetch the required data to the leaflet map. If you want to see full code in just one place, then see the following code;

If you liked it you also like Publish your Geoserver data with leaflet js using WMS this one.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade