Query Multiple WMS Layers in Leaflet.js

16 Apr

In an earlier post I imported GeoJSON in to Leaflet. One of the reasons I did this was to be able to assign a popup to each layer – which is something I could not do with WMS. I was finally able to make a popup for each of my WMS layers. Here is how I did it.

I have 2 layers -psfa:SchoolPoints and psfa:CityOfAztec – on my GeoServer at: http://localhost:8080/geoserver/psfa/wms.

I made a Leaflet map importing these two layers.

Image

The cloudmade layer that is added is my base map. With the layers showing up correctly, I found the website of Bryan McBride. I copied his WMS example and then modified it for my server and layers.

Image

var URL = the location of my GeoServer.

GetFeatureInfo&LAYERS=my layers seperated by a ,

Lastly, do the same for &QUERYLAYERS= seperaed by a ,

This is how I was able to get my map to popup the correct info when I clicked on any WMS layer in my map. Next, I need to clean up the popup box to fit my data without scrolling. It looks like if you want to change the formatting of the popup internals, GeoServer has some WMS templates. I am not that far yet.

Final Map

 

Advertisements

2 Responses to “Query Multiple WMS Layers in Leaflet.js”

  1. Alberto Najera December 4, 2013 at 7:06 pm #

    Hello, I am setting up a leaflet map with get feature info as well. I tried your code and the pop up opens but I am asked whether I want to download the mapserver executable instead of showing the feature information. Quite strange. Did you have to use a proxy for this?

  2. elmiurry October 5, 2015 at 8:11 pm #

    Hi, im from Venezuela and im applying ur your code. I just do a couple of thing n It works perfectly, Thx u very much. A programmer friend

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: