Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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:

content

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',
        {
            maxZoom:18
        });

        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
        });

        map.addLayer(basemap);
        map.addLayer(ward);
        map.addLayer(booths);
        map.addLayer(buildings);

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


        var popup = L.popup({
            maxWidth:400
        });

        //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;
            //alert(URL);
            popup.setLatLng(e.latlng);
            popup.setContent("<iframe src='"+URL+"' width='300' height='100' frameborder='0'><p>Your browser does not support iframes.</p></iframe>");
            map.openPopup(popup);
    }

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

share|improve this question
add comment

1 Answer

up vote 2 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
add comment

Your Answer

 
discard

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.