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

<!DOCTYPE html>
<html lang="es">
    <meta charset="utf-8" />
    <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',
                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,                                


            var popup = L.popup();

            function onMapClick(e) {
                .setContent("Coordenadas: " + e.latlng.toString())
            map.on('click', onMapClick);

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


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


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


  • my name is Katherine and I have a similar problem and is as follows: I am working leaflet and geoserver I create a wms service and try to see it in the browser but it shows the layer wms white image but in the log of tomcat the request to the geoserver geoserver service shown. someone who is helping me tells me that is the projection posiblemnte your tapeworms also the same problem. as solved? thank you very much – user35756 Aug 13 '14 at 13:58
  • If you have a new question, please ask it by clicking the Ask Question button. Include a link to this question if it helps provide context. – Dan C Aug 13 '14 at 14:25
  • This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. You can also add a bounty to draw more attention to this question once you have enough reputation. – Zachary Aug 13 '14 at 14:59

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

  • Thank cacharriar after a while and with your help, I finally found the solution, here I leave the code shown OK – Christiam Niño Aug 28 '13 at 16:40

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.