Adding popup with attribute characteristics to features in Leaflet

htmlleafletmappingpopupwfs

I need to show popup for GEOJSON data with its attributes. However, I don't have any idea on showing popup for GEOJSON data added through url of wfs. The geojson data is earthquake data added through the following url: https://emidius.mi.ingv.it/services/italy/wfs/?service=wfs&version=2.0.0&request=GetFeature&typeNames=italy:CPTI_current&outputFormat=application/json.The code file that I am working is given below:

<html>
<head>
  <title>Creating mash-ups with Leaflet</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://auth.airmap.com/js/keycloak.js"></script>
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
    
    #map {
      width: 1000px;
      height: 1000px;
    }
  </style>

  <head>

    <body>
      <div id="map"></div>
      <script>
        var map = L.map('map').setView([14.6361111, 42.1608333], 8);
        var wmsLayer = L.tileLayer.wms('https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/mapserv?', {
          layers: 'GEBCO_LATEST_SUB_ICE_TOPO'
        }).addTo(map);

        var elevation;

        $.getJSON('https://demo.pygeoapi.io/master/collections/ogr_gpkg_poi/items?f=json', function(value) {
          var datalayer = L.geoJson(value, {
            onEachFeature: function(feature, featureLayer) {
              var lon = feature.geometry.coordinates[0];
              var lat = feature.geometry.coordinates[1];
              var city = feature.properties.name;

              $.ajax({
                url: 'https://api.airmap.com/elevation/v1/ele/?points=' + lat + ',' + lon +
                  '&units=metric& appid=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjcmVkZW50aWFsX2lkIjoiY3JlZGVudGlhbHxwQUFNWlBxaEx2T2Q2cGZSR2JkMlhDQkdRcTdNIiwiYXBwbGljYXRpb25faWQiOiJhcHBsaWNhdGlvbnx3ZURHZ01oTldtek55c1A4S0xEdlRsQW5QTE0iLCJvcmdhbml6YXRpb25faWQiOiJkZXZlbG9wZXJ8MnpvYmI3eWh4ZVk0cWtDM1BSeDBaSEtNejIzOCIsImlhdCI6MTQ3MTM3OTc0Mn0.MeO0jt6holPt0jdPJvRJrTBi380WsbOPGCEO6u-tfSo',
                async: false,
                dataType: 'json',
                success: function(json) {
                  elevation = json.data;
                }
              });
              featureLayer.bindPopup("City: " + city + "</br>Elevation: " + elevation + "metres");
            }
          }).addTo(map);
        });


var wfs_url = "https://emidius.mi.ingv.it/services/italy/wfs/?service=wfs&version=2.0.0&request=GetFeature&typeNames=italy:CPTI_current&outputFormat=application/json&CQL_FILTER=dwithin(geom,%20MULTIPOINT((41.701259 -7.5005), (40.655991 -7.917709), (40.200475 -8.419193),(40.198381 -7.639009),(40.087058 -8.290237),(39.369447 -9.391943),(38.443198 -9.100006),(38.448289 -9.130834),(32.748972 -16.697671)),%201400,%20kilometers)";
      $.getJSON(wfs_url).then((res) => {
        var layer = L.geoJson(res).addTo(map);

        map.fitBounds(layer.getBounds());
      });
      </script>
    </body>
</html>

Best Answer

If you look at one of the features returned from your WFS request, it looks like this:

{"type":"Feature",
  "id":"CPTI_current.1450",
  "geometry": {
    "type":"Point","coordinates":[6.1,45.444]
  },
  "geometry_name":"geom",
  "properties": {
    "N15":1450,
    "Sect":"MA",
    "Year":1881,
    "Mo":7,
    "Da":22,
    "Ho":2,
    "Mi":45,
    "Se":null,
    "EpicentralArea":"Belledonne-Pelvoux",
    "MainRef":"SISFR014",
    "TLDef":"MM",
    "LatDef":45.444,
    "LonDef":6.1,
    "DepDef":null,
    "IoDef":"7",
    "TIoDef":"bx",
    "MwDef":5.39,
    "ErMwDef":0.1,
    "TMwDef":"Mdm",
    "RefM":"SISFR014",
    "MdpN":145,
    "Imax":"7",
    "LatM":45.444,
    "LonM":6.1,"ErrLatM":"14.8","ErrLonM":"11.5","TepiM":"bx0","Io":"7","MwM":5.39,"ErMwM":0.1,"TMwM":"bxn","RefIns":null,"LatIns":null,"LonIns":null,"DepIns":null,"MwIns":null,"ErMwIns":null,"TMwIns":null,"RefMwIns":null,"EqID":"18810722_0245_000","CPTI11id":"1120","Updates":null,"Date":"1881-07-22T02:45:00Z","URL":"https://emidius.mi.ingv.it/CPTI15-DBMI15/event/18810722_0245_000","URL_quakeml":"https://emidius.mi.ingv.it/fdsnws/event/1/query?eventid=18810722_0245_000","URL_ASMI":"https://emidius.mi.ingv.it/ASMI/event/18810722_0245_000"
  }
}

Here you can clearly see properties of individual feature (only few of them were put in separate lines, there are much more). You can then display those features in a popup the same way you do for datalayer layer.

Here is what code could then look like to display three of those properties in a feature popup:

$.getJSON(wfs_url).then((res) => {
  var layer = L.geoJson(res, {
    onEachFeature: function (feature, layer) {
      var popupTxt = 'Epicentral area: ' + feature.properties.EpicentralArea + '<br>' +
                     'Year: ' + feature.properties.Year +  '<br>' +
                     'Magnitude: ' + feature.properties.MwDef
      layer.bindPopup(popupTxt);
    }      
  }).addTo(map);
  map.fitBounds(layer.getBounds());
});

This is then the result:

enter image description here

Related Question