Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have been working on a mapping application using Leaflet. I am using a WMS on Geoserver to get my layers, which are overlaid on a cloudmade basemap.

I tried to use the layer control on my map by following the tutorial on the Leaflet website.

The problem I am facing is that the layers in my map are not populated in the layer control. Instead, what I get is garbage data inside the layer control.

This is what the control content looks like:


This is my code:

<script type="text/javascript">
        var map,popup;'map').setView([13.00077, 77.57218], 14);
        //add layers
        var basemap = L.tileLayer('http://{s}{z}/{x}/{y}.png',

        var ward = L.tileLayer.wms("http://localhost:8080/geoserver/Malleshwaram/wms", 
            layers: 'Malleshwaram:65-WARD',
            format: 'image/png',
            transparent: true

        var booths = L.tileLayer.wms("http://localhost:8080/geoserver/Malleshwaram/wms", 
            layers: '65-BOOTHS-KDM_Project',
            format: 'image/png',
            transparent: true

        var buildings = L.tileLayer.wms("http://localhost:8080/geoserver/Malleshwaram/wms", 
            layers: 'Buildings',
            format: 'image/png',
            transparent: true


        var layerControl = L.control.layers(ward, booths, buildings);
        //map.addEventListener('click', onMapClick);
        //end layers

        var popup = L.popup({

        //get feature info
        function onMapClick(e) {
            var latlngStr = '(' + + ', ' + e.latlng.lng.toFixed(3) + ')';
            var BBOX = map.getBounds()._southWest.lng+","+map.getBounds()","+map.getBounds()._northEast.lng+","+map.getBounds();
            var WIDTH = map.getSize().x;
            var HEIGHT = map.getSize().y;
            var X = map.layerPointToContainerPoint(e.layerPoint).x;
            var Y = map.layerPointToContainerPoint(e.layerPoint).y;
            var URL = 'http://localhost:8080/geoserver/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&LAYERS=Malleshwaram:65-BOOTHS-KDM_Project,Malleshwaram:Buildings&QUERY_LAYERS=Malleshwaram:65-BOOTHS-KDM_Project,Malleshwaram:Buildings&STYLES=&BBOX='+BBOX+'&FEATURE_COUNT=5&HEIGHT='+HEIGHT+'&WIDTH='+WIDTH+'&FORMAT=image%2Fpng&INFO_FORMAT=text%2Fhtml&SRS=EPSG%3A4326&X='+X+'&Y='+Y;
            popup.setContent("<iframe src='"+URL+"' width='300' height='100' frameborder='0'><p>Your browser does not support iframes.</p></iframe>");

Can anyone please help me figure out why/how this data is being fed into the layer control?

share|improve this question
up vote 6 down vote accepted

I asked the same question on the Leaflet Google group. Bryan McBride provided the solution. If anyone ever stumbles across the same issue, please read this post.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.