How to get country name by clicking on the Map?

652
2
Jump to solution
08-27-2020 01:17 AM
skpatnaik
New Contributor

Hi,

I am new to ArcGIS and trying to get the "CountryName" by clicking on a point on the map. How will I get the country name corresponding to the point that got clicked?

The below code shows the way I am displaying the wells on the  Map and values I am getting from the database. I need to get the country name(like UnitedStates, Mexico...etc). So that I will query my own database base on this country name.

  loadModules(
      ["esri/Map""esri/views/MapView""esri/Graphic""esri/config"],
      {
        css: true,
      }
    ).then(([MapMapViewGraphicesriConfig]) => {
      const map = new Map({
        basemap: "topo",
      });
      let view = new MapView({
        container: this.mapRef.current,
        map: map,
        //  ui: {
        //    components: ["attribution"],
        //   },
        center: [-8035],
        zoom: 3,
      });
      view.ui.move("zoom""bottom-right");
      let wellsInfo = this.props.wellsInfo;
      let points = [];
      let pointGraphics = [];
      let count = 0;
      if (wellsInfo.wells.length > 0) {
        wellsInfo.wells.filter((wellObj=> {
          count = count + 1;
          let pointObj = {
            type: "point",
            longitude: wellObj.longitude,
            latitude: wellObj.latitude,
            wellId: wellObj.wellId,
          };
          points.push(pointObj);
        });
        console.log(count);
        points.map((pointObj=> {
          let pointGraphicObj = new Graphic({
            geometry: pointObj,
            symbol: {
              type: "simple-marker",
              color: "black",
              size: 6,
              outline: {
                width: 0.5,
                color: "black",
              },
            },
            attributes: pointObj,
            popupTemplate: {
              // autocasts as new PopupTemplate()
              title: "Well",
              content: [
                {
                  type: "fields",
                  fieldInfos: [
                    {
                      fieldName: "wellId",
                    },
                    {
                      fieldName: "longitude",
                    },
                    {
                      fieldName: "latitude",
                    },
                  ],
                },
              ],
            },
          });
          pointGraphics.push(pointGraphicObj);
        });
        view.graphics.addMany(pointGraphics);
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Here is a sample that shows that.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      Intro to MapView - Create a 2D map | Sample | ArcGIS API for JavaScript
      4.16
    </title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.16/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.16/"></script>

    <script>
      require(["esri/Map",
      "esri/views/MapView",
      "esri/tasks/QueryTask",
      "esri/tasks/support/Query"],
      function (
        Map,
        MapView,
        QueryTask,
        Query) {
        var map = new Map({
          basemap: "topo-vector"
        });

        var view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 4,
          center: [15, 65] // longitude, latitude
        });
        
        var queryTask = new QueryTask({
          url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/World_Countries_(Generalized)/FeatureServer/0"
        });
        var query = new Query();
        query.returnGeometry = false;
        query.outFields = ["COUNTRY"];
        
        view.on("click", function(evt){
          query.geometry = evt.mapPoint;
          // When resolved, returns country name.
          queryTask.execute(query).then(function(results){
            console.log(results.features[0].attributes.COUNTRY);
          });
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

2 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Here is a sample that shows that.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      Intro to MapView - Create a 2D map | Sample | ArcGIS API for JavaScript
      4.16
    </title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.16/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.16/"></script>

    <script>
      require(["esri/Map",
      "esri/views/MapView",
      "esri/tasks/QueryTask",
      "esri/tasks/support/Query"],
      function (
        Map,
        MapView,
        QueryTask,
        Query) {
        var map = new Map({
          basemap: "topo-vector"
        });

        var view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 4,
          center: [15, 65] // longitude, latitude
        });
        
        var queryTask = new QueryTask({
          url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/World_Countries_(Generalized)/FeatureServer/0"
        });
        var query = new Query();
        query.returnGeometry = false;
        query.outFields = ["COUNTRY"];
        
        view.on("click", function(evt){
          query.geometry = evt.mapPoint;
          // When resolved, returns country name.
          queryTask.execute(query).then(function(results){
            console.log(results.features[0].attributes.COUNTRY);
          });
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
skpatnaik
New Contributor

Hi Robert,

Thank you very much for your quick response . It helped me to continue my work without stopping.

0 Kudos