<!DOCTYPE html>
<html>
<head>
<title>Leaflet Quick Start Guide Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/leaflet.css" />
<style>
#map { width: 800px; height: 600px; border: 1px solid #000; cursor: pointer; }
ul>li { font-size: 12px; }
</style>
</head>
<body>
<div id="map"></div>
<script src="js/leaflet.js"></script>
<script src="js/jquery-2.1.1.min.js"></script>
<script>
var map = L.map('map').setView([-7.1826, -36.7382], 8);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
maxZoom: 18,
id: 'examples.map-i86knfo3'
}).addTo(map);
var host = "http://localhost/cgi-bin/mapserv?";
var mapfile = "map=/var/www/html/mapserver_wms/municipios.map&";
var wms_server = host + mapfile;
var municipios = new L.tileLayer.wms(wms_server, {
layers: 'municipios',
format: 'image/png',
srs:"EPSG:4326",
transparent: true,
pointerCursor: true
}).addTo(map);
map.addEventListener('click', Identify);
function Identify (e) {
var BBOX = map.getBounds().toBBoxString();
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 = wms_server + 'SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&LAYERS=municipios&QUERY_LAYERS=municipios&BBOX='+BBOX+'&FEATURE_COUNT=1&HEIGHT='+HEIGHT+'&WIDTH='+WIDTH+'&INFO_FORMAT=text%2Fhtml&SRS=EPSG%3A4326&X='+X+'&Y='+Y;
$.ajax({
url:URL,
datatype: "html",
type: "GET",
success: function(data) {
var popup = new L.popup({
maxWith: 300
});
popup.setContent(data);
popup.setLatLng(e.latlng);
map.openPopup(popup);
}
});
}
</script>
</body>
</html>