I want to create a mash-up showing sites on a basemap as I did in the first part of my code. With the AJAX call I want to include earthquakes so that the pop-up of each site shows its name However, I am struggling with filtering the number of earthquakes and to assign them to the respective site

  • Please read stackoverflow.com/q/14220321/4768502 Commented Feb 15 at 0:02
  • 1
    You'll need a filter using a dwithin function
    – Ian Turton
    Commented Feb 15 at 9:51
  • 1
    @Akm94 I did rollback of your edit since after removing all the code answer makes no sense, since it refers to the "above code".
    – TomazicM
    Commented Mar 21 at 19:32
  • @Akm94 If you have problems with content, the delete your question, don't modify it.
    – TomazicM
    Commented Mar 21 at 20:14
  • If you are unable to delete your question then just edit out as little problem content as possible and flag to ask if that can be redacted. Your edit should not invalidate any existing answer(s).
    – PolyGeo
    Commented Mar 22 at 19:40

1 Answer 1


Two things have to be corrected in the above code.

ArcGIS service for UNESCO sites returns geometries as points, so you have one dimension to many when getting site coordinates. It should be:

var lon = feature.geometry.coordinates[0];
var lat = feature.geometry.coordinates[1];

Italy earthquakes service is WFS service, so request for retrieving features has to be in correct format. With https://emidius.mi.ingv.it/services/italy/wfs?request=GetCapabilities request you can get info about service. To limit request to features within desired radius from given point you can use DWITHIN CQL filter. Request should then look something like this:

var url = 'https://emidius.mi.ingv.it/services/italy/wfs?service=wfs&version=2.0.0&request=GetFeature&typename=italy:CPTI15_v2&cql_filter=DWITHIN(geom,Point(' + lat + '%20' + lon + '),50,kilometers)&outputFormat=application/json&srsname=EPSG:4326'

Complete code would then look something like this:

var map = L.map('map').setView([42.638426, 12.674297], 5.3);
var wmsLayer = L.tileLayer.wms('https://wms.gebco.net/mapserv?', {
    layers: 'GEBCO_Grid'

$.getJSON('https://services.arcgis.com/B7NI2jUD81lCgSpx/arcgis/rest/services/Italian_UNESCO_sites/OGCFeatureServer/collections/0/items?f=json', function (data) {
  var datalayer = L.geoJson(data,{
      onEachFeature: function(feature, featureLayer) {
        var lon = feature.geometry.coordinates[0];
        var lat = feature.geometry.coordinates[1];
        var site = feature.properties.title;
        $.getJSON('https://emidius.mi.ingv.it/services/italy/wfs?service=wfs&version=2.0.0&request=GetFeature&typename=italy:CPTI15_v2&cql_filter=DWITHIN(geom,Point(' + lat + '%20' + lon + '),50,kilometers)&outputFormat=application/json&srsname=EPSG:4326', function (data) {
          featureLayer.bindPopup("UNESCO site: " + site + "</br>Earthquakes within 50km: " + data.features.length);

This is the result:

enter image description here


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.