1

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>

1 Answer 1

1

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

1
  • Thank you very much 😊😊It's working.
    – Walker
    Commented Jan 26, 2022 at 19:29

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.