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