Visualize data on your map

If you are using leaflet.js to show a map in your web page, you can easily use geoserver to host your data files (ex: .shp files) and retrieved them in PNG format and layer on top of your map. Not only in PNG, it also sends data in several other formats as well.

This is how you layer the data on your leaflet map:

1. Download and install GeoServer in your local machine or server. (Mine it’s http://localhost:9090/geoserver/)

2. Create a workspace for your work.

3. Then create a store for your data files.

4. Now you can create your map layers by selecting the data files in your store.

5. You can change the way data plotted on the map by changing it’s styles and link the style to the layer.

6. You can preview the layers by clicking on “Layer Preview” and selecting the format you want (Mine its PNG).

7. Go to the javascript file where your code for leaflet map is kept and add a tile layer

var layer= L.tileLayer.wms(“http://localhost:9090/geoserver/wms”, {                                          layers: ‘workspaceName:LayerName’,

format: 'image/png’,

transparent: true,

version: “1.1.1”


8. Now you may see the data layer plotted on your leaflet map.



Author: Harshani Nawarathna

Sri Lankan woman in Computing

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s