Community

How to fetch the Latitude and Longitude values which already visible in Map

1272
2
Jump to solution
09-04-2020 05:28 AM
skpatnaik
by
New Contributor
‎09-04-2020 05:28 AM

Hi,

I am showing the wells on the map based on the longitude and latitude values. These longitude and latitude values have been fetched from the database. After displaying the wells, when any particular well is clicked, I am getting the longitude and latitude which is different from what I am showing. So, how to get the exact value of the point that already shown on the Map? Because, if I will get the exact value that I have been displayed, then I will do the next task based on that value.

Example:

value displayed :longitude:8.945 and Latitude:50.893

after clicking the point I am getting in the console:

longitude:8.53 and Latitude:50.87

How will I get the exact value i.e 8.945 and 50.893 after clicking?

Below is my code:

loadModules(
      [
        "esri/Map",
        "esri/views/MapView",
        "esri/Graphic",
        "esri/config",
        "esri/tasks/QueryTask",
        "esri/tasks/support/Query",
      ],
      {
        css: true,
      }
    ).then(([Map, MapView, Graphic, esriConfig, QueryTask, Query]) => {
      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 = [];

      if (wellsInfo.wells.length > 0) {
        wellsInfo.wells.filter((wellObj) => {
          let pointObj = {
            type: "point",
            longitude: wellObj.longitude,
            latitude: wellObj.latitude,
            wellId: wellObj.wellId,
          };
          points.push(pointObj);
        });

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

      view.on("click", function (evt) {
        var longitude = evt.mapPoint.longitude;
        var latitude = evt.mapPoint.latitude;
        // Round the coordinates for visualization purposes
        var lon = Math.round(longitude * 1000) / 1000;
        var lat = Math.round(latitude * 1000) / 1000;
        console.log(lat);
        console.log(lon);
      });
    });
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎09-04-2020 09:59 AM

Your code

      view.on("click", function (evt) {
        var longitude = evt.mapPoint.longitude;
        var latitude = evt.mapPoint.latitude;
        // Round the coordinates for visualization purposes
        var lon = Math.round(longitude * 1000) / 1000;
        var lat = Math.round(latitude * 1000) / 1000;
        console.log(lat);
        console.log(lon);
      });‍‍‍‍‍‍‍‍‍

is just getting the point that the user clicks on the view and is not attempting to get the exact well point. You need to do a view hitTest to see if the user clicked on an actual graphic in the view.

view.on("click", function (evt) {
  view.hitTest(evt)
    .then(function (response) {
      const result = response.results[0];
      if (result) {
        let long = result.graphic.attributes.longitude;
        let lat = result.graphic.attributes.latitude;
        console.info(long, lat);
      }
...
        ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

2 Replies
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎09-04-2020 09:59 AM

Your code

      view.on("click", function (evt) {
        var longitude = evt.mapPoint.longitude;
        var latitude = evt.mapPoint.latitude;
        // Round the coordinates for visualization purposes
        var lon = Math.round(longitude * 1000) / 1000;
        var lat = Math.round(latitude * 1000) / 1000;
        console.log(lat);
        console.log(lon);
      });‍‍‍‍‍‍‍‍‍

is just getting the point that the user clicks on the view and is not attempting to get the exact well point. You need to do a view hitTest to see if the user clicked on an actual graphic in the view.

view.on("click", function (evt) {
  view.hitTest(evt)
    .then(function (response) {
      const result = response.results[0];
      if (result) {
        let long = result.graphic.attributes.longitude;
        let lat = result.graphic.attributes.latitude;
        console.info(long, lat);
      }
...
        ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
skpatnaik
by
New Contributor
‎09-05-2020 12:29 AM

Hi Robert,

Thanks for your quick reply. It is working as I am expecting.

Thank you very much and you saved my Saturday

Regards,

SK

0 Kudos