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=L.map('map').setView([13.00077, 77.57218], 14);
        //add layers
        var basemap = L.tileLayer('http://{s}.tile.cloudmade.com/0e0491f21622495da28cf15c92bf9419/1930/256/{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.lat.toFixed(3) + ', ' + e.latlng.lng.toFixed(3) + ')';
            var BBOX = map.getBounds()._southWest.lng+","+map.getBounds()._southWest.lat+","+map.getBounds()._northEast.lng+","+map.getBounds()._northEast.lat;
            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?


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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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