Layer control displaying garbage values

[Chinmay Shaligram]

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 the code that I wrote:

<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?

[Bryan McBride]

Look at the API docs: http://leafletjs.com/reference.html#control-layers. The L.control.layers constructor is expecting 2 Layer Configs (object literals with layer names as keys and layer objects as values). Since you only have one basemap, you should be able to substitute null for the baselayer object if you don't want it to show up in the layer control.

Try this:

var overlays = {

    "Ward": ward,

    "Booths": booths,

    "Buildings": building

};

var layerControl = L.control.layers(null, overlays);

map.addControl(layerControl);

BRYAN

[Chinmay Shaligram]

Thank you! It works like a charm. 

In retrospect, it was very silly of me not to go through the API docs properly.