-1

I found below piece of code which loads GeoJSON from USGS then shows circle and set radius. This works fine when tested.

(function () {
      
var FEED1 = 'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson';
      
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);

      var xhr = new XMLHttpRequest();
      xhr.onload = function () {
        var results = JSON.parse(xhr.responseText);
        earthquakes.addData(results);
      };
      xhr.open('GET', FEED1, true);
      xhr.send();
    })();

How can I based on above code load XML from http://webservices.ingv.it/fdsnws/event/1/query?starttime=2021-05-29&minlatitude=42.12&maxlatitude=44.14&minlongitude=9.90&maxlongitude=14.47 and get circles and radius on maps?

0
2

A working solution using an adapted version of https://github.com/usgs/quakeml-parser-js to deal with the XML (issues with parsing and unwanted "require") I've also use fetch instead of the old xhr/XMLHttpRequest approach (cf https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
            integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
            crossorigin=""></script>
    <!-- Code mainly borrowed from https://github.com/usgs/quakeml-parser-js but done bad workarounds to avoid using "require"
      and made some code change to avoid some errors while parsing (was parsing only one event...) -->
    <script src="quakeml.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
          integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
          crossorigin=""/>
    <style>
      html, body {
        height: 100%;
        padding: 0;
        margin: 0;
      }
      #map {
        /* configure the size of the map */
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      // initialize Leaflet
      var map = L.map('map').setView({lon: 0, lat: 0}, 2);

      // add the OpenStreetMap tiles
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
      }).addTo(map);

      // show the scale bar on the lower left corner
      L.control.scale().addTo(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);
      })


    </script>
  </body>
</html>

Be aware you also need the quakeml.js file (a library file so not pasted here) Full source code https://gist.github.com/ThomasG77/220c74f4b10f7cac94fceecf9c09a313 including the quakeml.js.

See it in action at https://gist.githack.com/ThomasG77/220c74f4b10f7cac94fceecf9c09a313/raw/9682112b399df0b019a72697d57ede06d5b235fe/index.html

1
  • Thank you so so much. This works fine and I have adjusted few things for popup info. – miro Jun 6 at 16:06

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.