How to set up a layer control using Leaflet?

Question

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',
        {
            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?

Answer 1

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.