-1

I'm using below code to fetch data and show circles in map. That all works fine. I would like same and all data fetched based on FEED1 and FEED2 to show in the HTML table under the map.

      var FEED1 = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson';
      var FEED2 = 'https://webservices.ingv.it/fdsnws/event/1/query?starttime=2021-05-29&minlatitude=42.12&maxlatitude=44.14&minlongitude=9.90&maxlongitude=14.47';
      var NOW = new Date();
      var earthquakes = L.geoJson([], {
        onEachFeature: function (feature, layer) { 
          var props = feature.properties;
          layer.bindPopup('Dat: ' + props.time + '</br>' + 'Vr: ' + props.magtype + '</br>' + 'Ma: ' + props.mag + '</br>' + 'Du: ' + props.depth + ' km' + '</br>' + 'Iz: ' + props.source_catalog);
        },
        pointToLayer: function (feature, latlng) {
          var color,
              mag,
              radius,
              weight;
          mag = feature.properties.mag;
          if (mag === null) {
            color = '#FF0000';
            radius = 2;
            weight = 0.7;
          } else {
            color = '#FF0000';
            radius = 2 * Math.max(mag, 1);
            weight = 0.7;
          }
          if (feature.properties.type === 'quarry blast') {
            color = '#FF00FF';
          }
          return L.circleMarker(latlng, {
            color: color,
            radius: radius,
            weight: weight
          });
        }
      }).addTo(map);
      
      fetch(FEED1, {
        method:'GET'
      })
      .then(r => r.json())
      .then(json => {
        console.log(json);
        earthquakes.addData(json);
      });

      fetch(FEED2, {
        method:'GET'
      })
      .then(r => r.text())
      .then(text => {
        // Volontarily forgot the var declaration for console debugging purpose in above variables
        // Should be added in real usage instead of demo purpose
        xml = (new window.DOMParser()).parseFromString(text, "text/xml");
        quakeObject = Quakeml({xml: xml});
        mags = quakeObject.getMagnitudes()
        geojson = {
          "type": "FeatureCollection",
          "features": quakeObject.getOrigins().map((el, i) => {
            return {
                "type": "Feature",
                "properties": {
                  // Need to reconciliate properties of both source (not same properties exactly, some already retrieved)
                  time: el[0].time.value,
                  depth: el[0].depth.value,
                  mag: Number(mags[i][0].mag.value),
                  magtype: mags[i][0].type
                },
                "geometry": {
                  "type": "Point",
                  "coordinates": [
                    Number(el[0].longitude.value),
                    Number(el[0].latitude.value)
                  ]
                }
              }
          })
        };
        earthquakes.addData(geojson);
      })

I tried with bellow example of tabledata (bellow code copy-paste from example I found on the internet so it doesn't correspond to my GeoJSON features above) but what ever I change for feature, properties, URL, etc., it just show loading and not data is showed.

Is there anybetter approach or if you could suggest what I don't see and why it doesn't load?

    <script src="jquery-3.5.1.js"></script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="jquery.dataTables.min.css" />  
        <script src="jquery.dataTables.js"></script>
        <script src="jquery.dataTables.min.js"></script>
  </head>
  <body>
     <table id="example" class="display" cellspacing="0" width="100%">
   <thead>
     <tr>
        <th>fC.type</th>
        <th>f.type</th>
        <th>f.prop</th>
        <th>f.geom.type</th>
        <th>geometry.coordinates.0</th>
        <th>geometry.coordinates.1</th>
    </tr>
  </thead>

 </table>
3
  • 3
    This is not GIS question but pure HTML/JS one, so it's more suited for StackOverflow site. – TomazicM Jun 11 at 13:05
  • See here the basic logic of adding one row of data to the table: datatables.net/examples/api/add_row.html – TomazicM Jun 13 at 8:00
  • Thank you. I was already looking into that one. Also I was able to pass local gjson (if I save it to local file) into table. My problme is that FEED1 and FEED2 are added into gjson as per this line earthquakes.addData(json); so I'm trying to find out how get data from that into table. – miro Jun 13 at 14:32

Your Answer

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

Browse other questions tagged or ask your own question.