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