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/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.7.1/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

0

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
    Jan 26 at 19:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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