How to separate the longitude and latitude and store them in different variables??

554
9
Jump to solution
07-04-2020 02:42 AM
SiyabongaKubeka
Occasional Contributor

Hi All,

I need help with separation the latitude and longitude. I am drawing a polygon and getting the coordinates of each vertex of the polygon. This is what I have done to separate the coordinates but it is not working:

for (var i = 0; i < gra.geometry.rings.length; i++){
for (var p = 0; p < gra.geometry.rings.length; p++){
crmLatitude = String(gra.geometry.rings

.getLatitude());
crmLongitude = String(gra.geometry.rings

.getLongitude());
var LatLon = String(gra.geometry.rings

);
console.log(LatLon);
latlon = LatLon;

}

The error that I get when I debug I get an error that states that getLatitude() is not a function.

Please assist.

Kind Regards

Siyabonga Kubeka

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

OK, I was mixing 3.x and 4.x code. In 4.x there is no getLatitude function, it is now just a property of the point.

            if (event.state === "complete") {
              if (view.zoom >= 11) {
                let gra = event.graphic.clone();
                //event.graphic.layer.removeAll();
                event.graphic.symbol.color = "red";
                //gra.layer.add(gra);
                console.log(view.zoom);
                console.log("X = ", gra.geometry.centroid.x);
                console.log("Y = ", gra.geometry.centroid.y);
                console.log("Lat = ", event.graphic.geometry.centroid.latitude);
                console.log("Long = ", event.graphic.geometry.centroid.longitude);
                lat = event.graphic.geometry.centroid.latitude;
                lon = event.graphic.geometry.centroid.longitude;
                zoomLevel = view.zoom;
                for (var i = 0; i < gra.geometry.rings.length; i++) {
                  for (var p = 0; p < gra.geometry.rings[i].length; p++) {
                    var pnt = gra.geometry.getPoint(i, p);
                    crmLatitude = String(pnt.latitude);
                    crmLongitude = String(pnt.longitude);
                    var LatLon = String(pnt);
                    console.log(LatLon);
                    console.log(crmLatitude);
                    console.log(crmLongitude);
                    latlon = LatLon;
                  }
                }
              } else {
                alert("please zoom in");
                event.graphic.layer.remove(event.graphic);
              }
            }
          });

The new error you were getting is because you were removing the graphics with event.graphic.layer.removeAll(). this was an issue as you are asking the sketch widget to update the drawn graphic immediately yet you removed it and replaced it with a clone.

View solution in original post

9 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

You need to use getPoint method on the polygon.

for (var i = 0; i < gra.geometry.rings.length; i++){
  for (var p = 0; p < gra.geometry.rings[i].length; p++){
    crmLatitude = String(gra.geometry.getPoint(i, p).getLatitude());
    crmLongitude = String(gra.geometry.getPoint(i, p).getLongitude());
    var LatLon = String(gra.geometry.rings[i][p]);
    console.log(LatLon);
    latlon = LatLon;
  }
}
0 Kudos
SiyabongaKubeka
Occasional Contributor

Hi Robert,

I did use this way but I still get the error that says getLatitude() is not a function.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Your loops are going to high.

for (var i = 0; i < gra.geometry.rings.length - 1; i++){
  for (var p = 0; p < gra.geometry.rings[i].length - 1; p++){
SiyabongaKubeka
Occasional Contributor

Hi Robert, 

Can you please how me with an example that is working? I have changed my loops as above, now I get this error.

Kind Regards

Siyabonga Kubeka

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

That is a new different error. How about we do the reverse as I am the one providing the help. You provide your code or a sample you are having trouble with.

0 Kudos
SiyabongaKubeka
Occasional Contributor

Hi Robert,

No problem, here is my code:

<html><head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">

<title>GIS Map for CRM</title>

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

<style>
html,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}

.esri-sketch__section.esri-sketch__tool-section:last-of-type {
display: none;
}

.esri-sketch__section.esri-sketch__tool-section:nth-child(2) {
border-right: none;
}
</style>
<script>
var lon;
var lat;
var crmLatitude;
var crmLongitude;
var latlon;
var provinces;
var municipalities;
var districts;
var wards;
var showWards = [];

var testingV = "Gautengs";

if(testingV == "Gauteng")
{
require(["esri/views/MapView",
"esri/WebMap",
"esri/config",
"esri/widgets/Sketch",
"esri/layers/GraphicsLayer"],

function(MapView, WebMap, esriConfig, Sketch, GraphicsLayer) {

esriConfig.portalUrl = "https://portal.environment.gov.za/portal";

var webmap = new WebMap({
portalItem: {
// autocasts as new PortalItem()
id: "04582be14885483da48f29398960f653"
}

});

var graphicsLayer = new GraphicsLayer();


var view = new MapView({
map: webmap,
container: "viewDiv"
});

webmap.layers.add(graphicsLayer);

var sketch = new Sketch({
layer: graphicsLayer,
view: view,
//container: "viewDiv"
});

//view.ui.add(sketch, {
// position: "top-right"
//});
// Listen to sketch widget's create event.
sketch.on("create", function(event) {
// check if the create event's state has changed to complete indicating
// the graphic create operation is completed.
console.log(view.zoom);
if (event.state === "complete") {
// remove the graphic from the layer. Sketch adds
// the completed graphic to the layer by default.
graphicsLayer.remove(event.graphic);

// use the graphic.geometry to query features that intersect it
selectFeatures(event.graphic.geometry);
}
});
});

}
else
{
//window.parent.Xrm.Page.getAttribute("dea_ward").setValue("");


require([
"esri/Map",
"esri/views/MapView",
"esri/WebMap",
"esri/layers/FeatureLayer",
"esri/tasks/QueryTask",
"esri/tasks/support/Query",
"esri/config",
"esri/widgets/Sketch",
"esri/layers/GraphicsLayer"],



function(Map, MapView, WebMap, FeatureLayer, QueryTask, Query,
esriConfig, Sketch, GraphicsLayer) {
esriConfig.portalUrl = "https://portal.environment.gov.za/portal";

const featureLayerUrl = 'https://portal.environment.gov.za/server/rest/services/Boundary/Wards/MapServer/0';
var webmap = new WebMap({
portalItem: {
id: "04582be14885483da48f29398960f653"
}
});

var graphicsLayer = new GraphicsLayer();

var view = new MapView({
map: webmap,
container: "viewDiv",
popup: null
});

var featureLayer = new FeatureLayer({
url: featureLayerUrl
});

webmap.add(featureLayer);

webmap.layers.add(graphicsLayer);

var sketch = new Sketch({
layer: graphicsLayer,
view: view,
availableCreateTools: ["polygon"],
creationMode: "update",

});



view.ui.add(sketch, {
position: "top-right"
});


sketch.on('create', function (event) {
// check if the create event's state has changed to complete indicating
// the graphic create operation is completed.
if (event.state === "complete") {

if (view.zoom >= 11) {
let gra = event.graphic.clone();
event.graphic.layer.removeAll();
gra.symbol.color = "red";
gra.layer.add(gra);
console.log(view.zoom);
console.log("X = ", gra.geometry.x);
console.log("Y = ", gra.geometry.y);
console.log("Lat = ", event.graphic.geometry.latitude);
console.log("Long = ", event.graphic.geometry.longitude);
lat = event.graphic.geometry.latitude;
lon = event.graphic.geometry.longitude;
zoomLevel = view.zoom;
for (var i = 0; i < gra.geometry.rings.length - 1; i++){
for (var p = 0; p < gra.geometry.rings.length - 1; p++){
crmLatitude = String(gra.geometry.getPoint(i, p).getLatitude());
crmLongitude = String(gra.geometry.getPoint(i, p).getLongitude());
var LatLon = String(gra.geometry.rings

);
console.log(LatLon);
console.log(crmLatitude);
console.log(crmLongitude);
latlon = LatLon;

}
}
debugger;
}
else{
alert("please zoom in");
event.graphic.layer.remove(event.graphic);
}
}

});

view.on('click', function(event){
var queryTask = new QueryTask({
url: featureLayerUrl
});
var query = new Query();
query.geometry = view.toMap(event);
query.distance = 0;
query.units = "meters";
query.spatialRelationship = "intersects";
query.returnGeometry = true;
query.outFields = [ "PROVINCE", "DCS12_NAME", "S12_NAME", "WARD_NO" ];

queryTask.execute(query).then(function(results){

var feat = results.features[0];
provinces = feat.attributes.PROVINCE;
wards = feat.attributes.WARD_NO;
districts = feat.attributes.DCS12_NAME;
municipalities = feat.attributes.S12_NAME

showWards.push(wards);
var xwards = showWards.toString();

console.log(provinces);
console.log(wards);
console.log(districts);
console.log(municipalities);

console.log(xwards);


//Call to CRM to populate the lookup field for Province

debugger;

window.parent.Xrm.WebApi.online.retrieveMultipleRecords("dea_province", "?$select=dea_name,dea_provinceid&$filter=dea_name eq '" + provinces + "'").then(
function success(results) {
debugger;
for (var i = 0; i < results.entities.length; i++) {
var dea_name = results.entities["dea_name"];
var dea_provinceid = results.entities["dea_provinceid"];

//Populate lookup
var lookupValue = new Array();
lookupValue[0] = new Object();
lookupValue[0].id = dea_provinceid; // GUID of the lookup id
lookupValue[0].name = dea_name; // Name of the lookup
lookupValue[0].entityType = "dea_province"; //Entity Type of the lookup entity
window.parent.Xrm.Page.getAttribute("dea_province").setValue(lookupValue);
}
},
function(error) {
Xrm.Utility.alertDialog(error.message);
}
);

//Call to CRM to populate the lookup field for the Local Municipality

window.parent.Xrm.WebApi.online.retrieveMultipleRecords("dea_localmunicipality", "?$select=dea_localmunicipalityid,dea_name&$filter=dea_name eq '" + municipalities + "'").then(
function success(results) {
for (var i = 0; i < results.entities.length; i++) {
var dea_localmunicipalityid = results.entities["dea_localmunicipalityid"];
var dea_name = results.entities["dea_name"];

//Populate lookup
var lookupValue = new Array();
lookupValue[0] = new Object();
lookupValue[0].id = dea_localmunicipalityid; // GUID of the lookup id
lookupValue[0].name = dea_name; // Name of the lookup
lookupValue[0].entityType = "dea_localmunicipality"; //Entity Type of the lookup entity
window.parent.Xrm.Page.getAttribute("dea_localmunicipality").setValue(lookupValue);
}
},
function(error) {
Xrm.Utility.alertDialog(error.message);
}
);

//Call to CRM to populate the lookup field for District Municipality

window.parent.Xrm.WebApi.online.retrieveMultipleRecords("dea_districtmunicipality", "?$select=dea_districtmunicipalityid,dea_name&$filter=dea_name eq '" + districts + "'").then(
function success(results) {
for (var i = 0; i < results.entities.length; i++) {
var dea_districtmunicipalityid = results.entities["dea_districtmunicipalityid"];
var dea_name = results.entities["dea_name"];

//Populate lookup
var lookupValue = new Array();
lookupValue[0] = new Object();
lookupValue[0].id = dea_districtmunicipalityid; // GUID of the lookup id
lookupValue[0].name = dea_name; // Name of the lookup
lookupValue[0].entityType = "dea_districtmunicipality"; //Entity Type of the lookup entity
window.parent.Xrm.Page.getAttribute("dea_districtmunicipality").setValue(lookupValue);
}
},
function(error) {
Xrm.Utility.alertDialog(error.message);
}
);

//Populate the coordinates field
debugger;
window.parent.Xrm.Page.getAttribute("dea_latitude").setValue(latlon);
window.parent.Xrm.Page.getAttribute("dea_longitude").setValue(latlon);
window.parent.Xrm.Page.getAttribute("dea_ward").setValue(xwards);
//THE END OF CALLS TO CRM
});

});
});


}

</script>

<meta><meta></head><body style="overflow-wrap: break-word;">
<div id="viewDiv"></div>

</body></html>

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

OK, I was mixing 3.x and 4.x code. In 4.x there is no getLatitude function, it is now just a property of the point.

            if (event.state === "complete") {
              if (view.zoom >= 11) {
                let gra = event.graphic.clone();
                //event.graphic.layer.removeAll();
                event.graphic.symbol.color = "red";
                //gra.layer.add(gra);
                console.log(view.zoom);
                console.log("X = ", gra.geometry.centroid.x);
                console.log("Y = ", gra.geometry.centroid.y);
                console.log("Lat = ", event.graphic.geometry.centroid.latitude);
                console.log("Long = ", event.graphic.geometry.centroid.longitude);
                lat = event.graphic.geometry.centroid.latitude;
                lon = event.graphic.geometry.centroid.longitude;
                zoomLevel = view.zoom;
                for (var i = 0; i < gra.geometry.rings.length; i++) {
                  for (var p = 0; p < gra.geometry.rings[i].length; p++) {
                    var pnt = gra.geometry.getPoint(i, p);
                    crmLatitude = String(pnt.latitude);
                    crmLongitude = String(pnt.longitude);
                    var LatLon = String(pnt);
                    console.log(LatLon);
                    console.log(crmLatitude);
                    console.log(crmLongitude);
                    latlon = LatLon;
                  }
                }
              } else {
                alert("please zoom in");
                event.graphic.layer.remove(event.graphic);
              }
            }
          });

The new error you were getting is because you were removing the graphics with event.graphic.layer.removeAll(). this was an issue as you are asking the sketch widget to update the drawn graphic immediately yet you removed it and replaced it with a clone.

SiyabongaKubeka
Occasional Contributor

Hi Robert,

Thank you very much for your help. It works perfectly. How do I learn this stuff?

Thank a lot again.

Kind Regards

Siyabonga

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Just reading the help docs and experience.

0 Kudos