How to get country name by clicking on the Map?

skpatnaik · ‎08-27-2020

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(([Map, MapView, Graphic, esriConfig]) => {

const map = new Map({

basemap: "topo",

});

let view = new MapView({

container: this.mapRef.current,

map: map,

// ui: {

// components: ["attribution"],

// },

center: [-80, 35],

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);

RobertScheitlin__GISP · ‎08-27-2020

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

RobertScheitlin__GISP · ‎08-27-2020

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 · ‎08-28-2020

Hi Robert,

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