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

 

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 comment