[GIS] Why WMS Image Repeat leaflet

leafletmapserverwms

I setup wms service using mapserver, the map file is attached . I have created index page, the code is

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8" />
    <title>SOLAP</title>
    <link rel="stylesheet" type="text/css" href="style.css" />

     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>   
    <script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
    <script src="http://matchingnotes.com/javascripts/leaflet-google.js"></script>
    <!--
    <link rel="stylesheet" href="leaflet/leaflet.css" />
    <script src="leaflet/leaflet.js"></script>
    -->
    <script type='text/javascript'>
        window.onload = function(){

            //var wms_server = "http://wms.magrama.es/sig/Agricultura/ComarcasAgrarias/wms.aspx";           //ESTE SIRVE
            var wms_server = "http://localhost/cgi-bin/mapserv?map=/var/www/leaflet/maps/maps.map&mode=map";            
            var cloudmade = 'http://{s}.tile.cloudmade.com/0d35918612f4498e8b04e08e5d164dec/106484/256/{z}/{x}/{y}.png';
            var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');                                 
            var satellite = new L.Google('SATELLITE');
            var road = new L.Google('ROADMAP');
            var hybrid = new L.Google('HYBRID');
            var terrain = new L.Google('TERRAIN');

            var map = new L.Map('map', {center: new L.LatLng(3.931054, -73.82812),zoom: 4,
                layers: [osm]           
            });                 

            var colombia = new L.tileLayer.wms(wms_server, {                
                layers: 'colombia',
                format: 'image/png',
                srs:"EPSG:4326",
                transparent: true
            });

            var overlayMaps = {
                "Colombia": colombia
            };                                              

            var baseMaps = {                
                "Google RoadMap" : road,
                "Google Satellite" : satellite,
                "Google Hybrid" : hybrid,
                "Google Terrain" : terrain,
                "Cloud Made" : cloudmade,
                "OpenStreetMap": osm
            };

            map.addControl(new L.Control.Layers(baseMaps, overlayMaps),{});             



            L.tileLayer('http://{s}.tile.cloudmade.com/0d35918612f4498e8b04e08e5d164dec/106484/256/{z}/{x}/{y}.png', {
                attribution: 'SOLAP CHRISTIAM', 
                maxZoom: 18,                                
            }).addTo(map);

            //VENTANA DE POPUP DE COORDENADAS

            var popup = L.popup();

            function onMapClick(e) {
                popup
                .setLatLng(e.latlng)
                .setContent("Coordenadas: " + e.latlng.toString())
                .openOn(map);               
            }
            map.on('click', onMapClick);
        }
     </script>
</head>

<body>
    <div id="map"></div>
</body>

</html>

The images are repeating as shown in the photo, I tested this web service from first and works without problems.

thanks

The map file, index.html and image output map are here

www.dapboyaca.gov.co/tools/Mapa.zip

Best Answer

Looking at your call to L.tilelayer.WMS(), i'm noticing that you're passing an option with a key of 'SRS'.

The leaflet docs list an option 'CRS': http://leafletjs.com/reference.html#tilelayer-wms-crs

You may be attempting passing in an option that doesn't exist.

That being said, you're trying to overlay a WMS in geographic unprojected 4326 against an OSM overlay, with a default projection of 3857. I don't think that Leaflet can reproject your WMS to align with the OSM basemap. So... in addition to updating the option from 'SRS' to 'CRS', you might also have to re-define your WMS service to support EPSG 3857 spherical mercator in order to overlay your data against OSM or any other standard basemaps.

See this discussion for more projection-related info: https://github.com/Leaflet/Leaflet/issues/693

Related Question