Geoserver GetFeatureInfo with Leaflet

1,704 views
Skip to first unread message

Kc Yoosuf

unread,
May 28, 2015, 1:13:12 PM5/28/15
to leafl...@googlegroups.com
Apart from displaying the shape files nothing is happening on click. this is my code

<html>
<head>
    <title>Simple Leaflet Map</title>
    <meta charset="utf-8" />
    <link 
        rel="stylesheet" 
        href="css/leaflet.css"
    />
</head>
<body>
    <div id="map" style="width: 100%; height: 100%"></div>

    <script
        src="js/leaflet.js"> </script>
 
   

    <script>

   
    var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  maxZoom: 18,
  attribution: "Data by OpenStreetMap"
});
var dep = L.tileLayer.wms("http://localhost:8080/geoserver/TestpostGIS/wms", {
    layers: 'TestpostGIS:departments',
    format: 'image/png',
    transparent: true,
isBaselayer:false,
   
    });

var ground = L.tileLayer.wms("http://localhost:8080/geoserver/ucity/wms", {
    layers: ' ucity:ground',
    format: 'image/png',
    transparent: true,
   
    });
var map = new L.Map('map', {
  center: new L.LatLng(15, 0),
  zoom: 2,
  layers: [osm, dep,ground],
  zoomControl: true
});

var departments={
"Departments":dep
}

var grounds={
"Grounds":ground
}
var layerControl = L.control.layers(departments, grounds);
        map.addControl(layerControl);
map.addEventListener('click', Identify);
function Identify(e) 
{
  // set parameters needed for GetFeatureInfo WMS request
  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;
// compose the URL for the request
  var URL = ms_url + 'SERVICE=WMS&VERSION=1.1.0&REQUEST=GetFeatureInfo&LAYERS=TestpostGIS:departments&QUERY_LAYERS=TestpostGIS:departments&BBOX='+BBOX+'&FEATURE_COUNT=1&HEIGHT='+HEIGHT+'&WIDTH='+WIDTH+'&INFO_FORMAT=text%2Fhtml&SRS=EPSG%3A4326&X='+X+'&Y='+Y;


  //send the asynchronous HTTP request using jQuery $.ajax
  $.ajax({
  url: URL,
  dataType: "html",
  type: "GET",
  success: function(data) 
{
  var popup = new L.Popup
({
  maxWidth: 300
  });
 
popup.setContent(data);
  popup.setLatLng(e.latlng);
  map.openPopup(popup);
  }
  });
}
    </script>

</body>
</html>

Iván Sánchez Ortega

unread,
May 29, 2015, 3:46:38 AM5/29/15
to leafl...@googlegroups.com
Define the Identify function before attaching the event, and replace
map.addEventListener('click', Identify);

with
map.on('click', Identify);

Iván Sánchez Ortega

unread,
May 29, 2015, 3:48:25 AM5/29/15
to leafl...@googlegroups.com
Reply all
Reply to author
Forward
0 new messages