2

I am trying to show some recent earthquake information in Esri maps using USGS earthquake API data. I am able to fetch the list from API data and also I got the map with those listed information indicated on map using orange circles.

Check below JsFiddle link..

JsFiddle

enter image description here

In this above screenshot you can able to see the popup that shows the detailed information of specific area when clicking that orange circle.

In the left side area also I am fetching the details from API data. I want to show the popup when I click from the left side lists too. How can I trigger the click event and show the popup?

Js Code:

var object = {"type":"FeatureCollection","metadata":{"generated":1564051101000,"url":"https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=2019-07-20&endtime=2019-07-21&minmagnitude=5","title":"USGS Earthquakes","status":200,"api":"1.8.1","count":4},"features":[{"type":"Feature","properties":{"mag":5.2000000000000002,"place":"79km ENE of L'Esperance Rock, New Zealand","time":1563662132538,"updated":1563663302040,"tz":-720,"url":"https://earthquake.usgs.gov/earthquakes/eventpage/us70004pu1","detail":"https://earthquake.usgs.gov/fdsnws/event/1/query?eventid=us70004pu1&format=geojson","felt":null,"cdi":null,"mmi":null,"alert":null,"status":"reviewed","tsunami":0,"sig":416,"net":"us","code":"70004pu1","ids":",us70004pu1,","sources":",us,","types":",geoserve,origin,phase-data,","nst":null,"dmin":1.9299999999999999,"rms":1.28,"gap":70,"magType":"mww","type":"earthquake","title":"M 5.2 - 79km ENE of L'Esperance Rock, New Zealand"},"geometry":{"type":"Point","coordinates":[-178.1173,-31.174800000000001,35]},"id":"us70004pu1"},
{"type":"Feature","properties":{"mag":5.5999999999999996,"place":"23km NNW of Kandrian, Papua New Guinea","time":1563655424914,"updated":1563741959328,"tz":600,"url":"https://earthquake.usgs.gov/earthquakes/eventpage/us70004psn","detail":"https://earthquake.usgs.gov/fdsnws/event/1/query?eventid=us70004psn&format=geojson","felt":1,"cdi":4.2999999999999998,"mmi":4.4779999999999998,"alert":"green","status":"reviewed","tsunami":1,"sig":483,"net":"us","code":"70004psn","ids":",us70004psn,","sources":",us,","types":",dyfi,geoserve,losspager,moment-tensor,origin,phase-data,shakemap,","nst":null,"dmin":3.2029999999999998,"rms":0.89000000000000001,"gap":28,"magType":"mww","type":"earthquake","title":"M 5.6 - 23km NNW of Kandrian, Papua New Guinea"},"geometry":{"type":"Point","coordinates":[149.5069,-6.0086000000000004,59.789999999999999]},"id":"us70004psn"},
{"type":"Feature","properties":{"mag":5.0999999999999996,"place":"Easter Island region","time":1563647034336,"updated":1563892918040,"tz":-420,"url":"https://earthquake.usgs.gov/earthquakes/eventpage/us70004pra","detail":"https://earthquake.usgs.gov/fdsnws/event/1/query?eventid=us70004pra&format=geojson","felt":null,"cdi":null,"mmi":null,"alert":null,"status":"reviewed","tsunami":0,"sig":400,"net":"us","code":"70004pra","ids":",us70004pra,","sources":",us,","types":",geoserve,origin,phase-data,","nst":null,"dmin":2.7559999999999998,"rms":0.71999999999999997,"gap":118,"magType":"mb","type":"earthquake","title":"M 5.1 - Easter Island region"},"geometry":{"type":"Point","coordinates":[-111.38379999999999,-29.3232,10]},"id":"us70004pra"},
{"type":"Feature","properties":{"mag":5.0999999999999996,"place":"136km ESE of Pangai, Tonga","time":1563635789233,"updated":1563636880040,"tz":-720,"url":"https://earthquake.usgs.gov/earthquakes/eventpage/us70004pp5","detail":"https://earthquake.usgs.gov/fdsnws/event/1/query?eventid=us70004pp5&format=geojson","felt":null,"cdi":null,"mmi":null,"alert":null,"status":"reviewed","tsunami":0,"sig":400,"net":"us","code":"70004pp5","ids":",us70004pp5,","sources":",us,","types":",geoserve,origin,phase-data,","nst":null,"dmin":3.2749999999999999,"rms":1.3100000000000001,"gap":116,"magType":"mww","type":"earthquake","title":"M 5.1 - 136km ESE of Pangai, Tonga"},"geometry":{"type":"Point","coordinates":[-173.15700000000001,-20.294899999999998,10]},"id":"us70004pp5"}],"bbox":[-178.1173,-31.1748,10,149.5069,-6.0086,59.79]}

   var i = 0;

   document.writeln("<div class='right'>");
   for(i = 0;i<object.features.length;i++){

    var timestamp = object.features[i].properties.time / 1000;
    date = new Date(timestamp * 1000);
    dateString = date.toUTCString();

    var today = date;
    today.setHours(today.getHours() + 4);

    /*datevalues = [
       date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate(),
       date.getHours(),
       date.getMinutes(),
       date.getSeconds(),
    ];*/

    // maps


    document.writeln("<div class='list'>");
    document.writeln("<div>" + object.features[i].properties.mag + " Magnitude " + "</div>");

    /*document.writeln("<tr><td><b>Magnitude</b></td><td width = 50>" + object.features[i].properties.mag+"</td></tr>");
    document.writeln("<tr><td><b>Place</b></td><td width = 250>" + object.features[i].properties.place +"</td></tr>");
    document.writeln("<tr><td><b>Time</b></td><td width = 250>" + datevalues +"</td></tr>");
    document.writeln("<tr><td colspan = 2 style='background:#000;'>&nbsp;</td></tr>");*/

    document.writeln("</div>");

    /*var lat_var = object.features[i].geometry.coordinates[1];
    var lng_var = object.features[i].geometry.coordinates[0];
    var depth = object.features[i].geometry.coordinates[2];*/


   }
   document.writeln("</div>");



   require([
        "esri/Map",
        "esri/layers/GeoJSONLayer",
        "esri/views/MapView"
      ], function(Map, GeoJSONLayer, MapView) {
        // If GeoJSON files are not on the same domain as your website, a CORS enabled server
        // or a proxy is required.
        const url =
          "https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=2019-07-20&endtime=2019-07-21&minmagnitude=5";

        // Paste the url into a browser's address bar to download and view the attributes
        // in the GeoJSON file. These attributes include:
        // * mag - magnitude
        // * type - earthquake or other event such as nuclear test
        // * place - location of the event
        // * time - the time of the event
        // Use the Arcade Date() function to format time field into a human-readable format

        const template = {
          title: "Earthquake Info",
          content: "Magnitude {mag} {type} hit {place} on {time}",
          fieldInfos: [
            {
              fieldName: "time",
              format: {
                dateFormat: "short-date-short-time"
              }
            }
          ]
        };

        const renderer = {
          type: "simple",
          field: "mag",
          symbol: {
            type: "simple-marker",
            color: "orange",
            outline: {
              color: "white"
            }
          },
          visualVariables: [
            {
              type: "size",
              field: "mag",
              stops: [
                {
                  value: 2.5,
                  size: "4px"
                },
                {
                  value: 8,
                  size: "40px"
                }
              ]
            }
          ]
        };

        const geojsonLayer = new GeoJSONLayer({
          url: url,
          copyright: "USGS Earthquakes",
          popupTemplate: template,
          renderer: renderer //optional
        });

        const map = new Map({
          basemap: "gray",
          layers: [geojsonLayer]
        });

        for(i = 0;i<object.features.length;i++) {
          const view = new MapView({
            container: "viewDiv",
            center: [object.features[0].geometry.coordinates[0], object.features[0].geometry.coordinates[1]],
            zoom: 3,
            map: map
          });
        }
      });
  • To clarify, you are looking to trigger a click event and show the popup when you click the magnitude values in the box on the left hand side below the toggle zoom buttons? – whyzar Jul 25 at 14:43
  • @whyzar Yes. right – Karuppiah RK Jul 25 at 15:02

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.