Latest Contributions by SiyabongaKubeka

‎06-02-2022

Something like this Also do not forget to add WebmercatorUtils on your require statements and function statements 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; }

‎06-02-2022

Hi @Aeseir , remember, you are drawing a polygon and a polygon has multiple vertices, to this output is a longitude and latitude of each vertex (corner). You can try using WebmercatorUtils to convert the geometry to Geographic .

‎01-10-2022

Hi I once did something like this and here is how you get coordinates of each vertex: 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; i++){ for (var p = 0; p < gra.geometry.rings[i].length; p++){ crmLatitude = String(gra.geometry.getPoint(i, p)); crmLongitude = String(gra.geometry.getPoint(i, p)); var LatLon = String(gra.geometry.rings[i][p]); console.log(LatLon); latlon = LatLon; 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" }); var scaleBar = new ScaleBar({ view: view }); // Add widget to the bottom left corner of the view view.ui.add(scaleBar, { position: "bottom-left" }); 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; i++){ for (var p = 0; p < gra.geometry.rings[i].length; p++){ crmLatitude = String(gra.geometry.getPoint(i, p)); crmLongitude = String(gra.geometry.getPoint(i, p)); var LatLon = String(gra.geometry.rings[i][p]); console.log(LatLon); latlon = LatLon; } } debugger; } else{ alert("please zoom in"); event.graphic.layer.remove(event.graphic); } } });

‎10-18-2021

Hi All I have a map that is displaying on all other environments except on production, I get the following errors: I am using version 4.14 <script src="https://js.arcgis.com/4.14/"></script> for scripting. What may be the cause of this issue? Kind Regards Siyabonga Kubeka

‎06-15-2021

Hi All I am using a scalebar in my map to show zoom in/out level. Currently it is showing mi which I presume it stands for miles and ft which I presume it stands for feet. I am based in South Africa and I need to use the metric system how do I do that? ScaleBar code: var scaleBar = new ScaleBar({ view: view }); // Add widget to the bottom left corner of the view view.ui.add(scaleBar, { position: "bottom-left" }); This how it currently show and Kind Regards Siyabonga Kubeka

‎06-02-2021

Hi All I came right, I hat to remove this line : event.graphic.layer.removeAll();

‎06-01-2021

Hi Everyone I need you assistance or advice, I have a webmap and I can draw multiple polygons on it. I want to be able to get the coordinates of each vertex (corner or ring) of each polygon. Below is the javascript code that is currently running. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>Sketch temporary geometries - 4.9</title> <link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css"> <script src="https://js.arcgis.com/4.9/"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; font-family: verdana; } #topbar { background: #fff; position: absolute; top: 15px; right: 15px; padding: 10px; } .action-button { font-size: 16px; background-color: transparent; border: 1px solid #D3D3D3; color: #6e6e6e; height: 32px; width: 32px; text-align: center; box-shadow: 0 0 1px rgba(0, 0, 0, 0.3); } .action-button:hover, .action-button:focus { background: #0079c1; color: #e4e4e4; } .active { background: #0079c1; color: #e4e4e4; } </style> <script> var lon; var lat; var crmLatitude; var crmLongitude; var latlon; var provinces; var municipalities; var districts; var wards; var showWards = []; var testVariable; require([ "esri/Map", "esri/views/MapView", "esri/WebMap", "esri/widgets/Sketch/SketchViewModel", "esri/Graphic", "esri/layers/GraphicsLayer", "esri/layers/FeatureLayer", "esri/widgets/Expand", "esri/widgets/FeatureForm", "esri/config", "esri/tasks/QueryTask", "esri/tasks/support/Query", "esri/widgets/ScaleBar" ], function ( Map, MapView, WebMap, SketchViewModel, Graphic, GraphicsLayer, FeatureLayer, Expand, FeatureForm, esriConfig, QueryTask, Query, ScaleBar ) { let editFeature, editGraphic, highlight, featureForm, editArea, attributeEditing, updateInstructionDiv; esriConfig.portalUrl = "https://portal.environment.gov.za/portal"; const featureLayer = new FeatureLayer({ url: "https://portal.environment.gov.za/server/rest/services/Boundary/Wards/MapServer/0", }); // GraphicsLayer to hold graphics created via sketch view model const graphicsLayer = new GraphicsLayer({ id: "tempGraphics" }); var webmap = new WebMap({ layers: [graphicsLayer], portalItem: { id: "04582be14885483da48f29398960f653" } }); var view = new MapView({ container: "viewDiv", map: webmap }); const polygonSymbol = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: "rgba(138,43,226, 0.8)", style: "solid", outline: { color: "white", width: 1 } }; view.when(function () { // create a new sketch view model const sketchViewModel = new SketchViewModel({ view, layer: graphicsLayer, polygonSymbol }); // setUpClickHandler(); // *********************************************************** // Call FeatureLayer.applyEdits() with specified params. // *********************************************************** function applyEdits(params) { featureLayer.applyEdits(params).then(function(editsResult) { // Get the objectId of the newly added feature. // Call selectFeature function to highlight the new feature. if (editsResult.addFeatureResults.length > 0) { const objectId = editsResult.addFeatureResults[0].objectId; selectFeature(objectId); } }) .catch(function(error) { console.log("==============================================="); console.error("[ applyEdits ] FAILURE: ", error.code, error.name, error.message); console.log("error = ", error); }); } // Listen to create-complete event to add a newly created graphic to view sketchViewModel.on("create-complete", addGraphic); // Listen the sketchViewModel's update-complete and update-cancel events sketchViewModel.on("update-complete", updateGraphic); sketchViewModel.on("update-cancel", updateGraphic); // called when sketchViewModel's create-complete event is fired. function addGraphic(event) { // Create a new graphic and set its geometry to // `create-complete` event geometry. const graphic = new Graphic({ geometry: event.geometry, symbol: sketchViewModel.graphic.symbol }); graphicsLayer.add(graphic); const edits = { //Fire the addFeatures function using the completed graphic addFeatures: [graphic] }; applyEdits(edits); console.log(graphic); } // Runs when sketchViewModel's update-complete or update-cancel // events are fired. function updateGraphic(event) { // Create a new graphic and set its geometry event.geometry var graphic = new Graphic({ geometry: event.geometry, symbol: editGraphic.symbol }); graphicsLayer.add(graphic); // set the editGraphic to null update is complete or cancelled. editGraphic = null; } // set up logic to handle geometry update and reflect the update on "graphicsLayer" function setUpClickHandler() { view.on("click", function (event) { view.hitTest(event).then(function (response) { var results = response.results; if (results.length > 0) { for (var i = 0; i < results.length; i++) { // Check if we're already editing a graphic if (!editGraphic && results[i].graphic.layer.id === "tempGraphics") { // Save a reference to the graphic we intend to update editGraphic = results[i].graphic; // Remove the graphic from the GraphicsLayer // Sketch will handle displaying the graphic while being updated graphicsLayer.remove(editGraphic); sketchViewModel.update(editGraphic); break; } } } }); }); } // activate the sketch to create a polygon var drawPolygonButton = document.getElementById("polygonButton"); drawPolygonButton.onclick = function () { // set the sketch to create a polygon geometry sketchViewModel.create("polygon"); setActiveButton(this); }; // reset button document.getElementById("resetBtn").onclick = function () { sketchViewModel.reset(); graphicsLayer.removeAll(); setActiveButton(); }; function setActiveButton(selectedButton) { // focus the view to activate keyboard shortcuts for sketching view.focus(); var elements = document.getElementsByClassName("active"); for (var i = 0; i < elements.length; i++) { elements[i].classList.remove("active"); } if (selectedButton) { selectedButton.classList.add("active"); } } }); }); </script> </head> <body> <div id="viewDiv"> <div id="topbar"> <button class="action-button esri-icon-polygon" id="polygonButton" type="button" title="Draw polygon"></button> <button class="action-button esri-icon-trash" id="resetBtn" type="button" title="Clear graphics"></button> </div> </div> </body> </html> On my previous code I can get this information but I can not draw multiple polygons on it. Please see code below: <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; } button[title="Reshape"]{ display: none; } button[title="Transform"]{ display: none; } </style> <script> var lon; var lat; var crmLatitude; var crmLongitude; var latlon; var provinces; var municipalities; var districts; var wards; var showWards = []; var testVariable; 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", "esri/widgets/ScaleBar"], function(Map, MapView, WebMap, FeatureLayer, QueryTask, Query, esriConfig, Sketch, GraphicsLayer, ScaleBar) { 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" }); var scaleBar = new ScaleBar({ view: view }); // Add widget to the bottom left corner of the view view.ui.add(scaleBar, { position: "bottom-left" }); 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; i++){ for (var p = 0; p < gra.geometry.rings[i].length; p++){ crmLatitude = String(gra.geometry.getPoint(i, p)); crmLongitude = String(gra.geometry.getPoint(i, p)); var LatLon = String(gra.geometry.rings[i][p]); console.log(LatLon); 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[i]["dea_name"]; var dea_provinceid = results.entities[i]["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[i]["dea_localmunicipalityid"]; var dea_name = results.entities[i]["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[i]["dea_districtmunicipalityid"]; var dea_name = results.entities[i]["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 }) .catch(function (error) { console.error("Query Error: " + error); alert("The polygon has been drawn outside the South African borders, please refresh and re-draw inside the South African borders"); }); }); }); </script> <meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta></head> </head> <body style="overflow-wrap: break-word;"> <div id="viewDiv"></div> </body></html> Please assist. Kind Regards Siyabonga Kubeka

‎05-30-2021

Hi Robert, How would I do that?

‎05-28-2021

Hi @DanielBonan , may you please show me how did you enable you map to be able to allow the drawing of multiple polygons? Regards Siyabonga

‎05-20-2021

Hi All I am currently using the code below to display the esri map, draw a polygon and extract data from the map, i.e the coordinates of each vertex of the polygon. I am using JavaScript. Now I want to be able to draw multiple polygons. I have added the "continuous" on creationMode, but I can not add multiple polygons, please assist. <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; } button[title="Reshape"]{ display: none; } button[title="Transform"]{ display: none; } </style> <script> var lon; var lat; var crmLatitude; var crmLongitude; var latlon; var provinces; var municipalities; var districts; var wards; var showWards = []; var testVariable; 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", "esri/widgets/ScaleBar"], function(Map, MapView, WebMap, FeatureLayer, QueryTask, Query, esriConfig, Sketch, GraphicsLayer, ScaleBar) { 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: "continuous", }); view.ui.add(sketch, { position: "top-right" }); var scaleBar = new ScaleBar({ view: view }); // Add widget to the bottom left corner of the view view.ui.add(scaleBar, { position: "bottom-left" }); 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; i++){ for (var p = 0; p < gra.geometry.rings[i].length; p++){ crmLatitude = String(gra.geometry.getPoint(i, p)); crmLongitude = String(gra.geometry.getPoint(i, p)); var LatLon = String(gra.geometry.rings[i][p]); console.log(LatLon); 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[i]["dea_name"]; var dea_provinceid = results.entities[i]["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[i]["dea_localmunicipalityid"]; var dea_name = results.entities[i]["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[i]["dea_districtmunicipalityid"]; var dea_name = results.entities[i]["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 }) .catch(function (error) { console.error("Query Error: " + error); alert("The polygon has been drawn outside the South African borders, please refresh and re-draw inside the South African borders"); }); }); }); </script> <meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta></head> </head> <body style="overflow-wrap: break-word;"> <div id="viewDiv"></div> </body></html> @ RobertScheitlin__GISP RobertScheitlin__GISP

‎03-30-2021

Hi Jeffery Thank you very much, it now works.

‎03-29-2021

Hi Jeffery, I tried putting this, but I get an error saying .catch is not a function. Please see my complete code below: <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 testVariable; 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; i++){ for (var p = 0; p < gra.geometry.rings[i].length; p++){ crmLatitude = String(gra.geometry.getPoint(i, p)); crmLongitude = String(gra.geometry.getPoint(i, p)); var LatLon = String(gra.geometry.rings[i][p]); console.log(LatLon); 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[i]["dea_name"]; var dea_provinceid = results.entities[i]["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[i]["dea_localmunicipalityid"]; var dea_name = results.entities[i]["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[i]["dea_districtmunicipalityid"]; var dea_name = results.entities[i]["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 } .catch(function (error) { console.error("Query Error: " + error); })); }); }); </script> <meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta></head> <body style="overflow-wrap: break-word;"> <div id="viewDiv"></div> </body></html> Here is the error code

‎03-26-2021

Hi All, I am trying to retrieve the country name. How can I do that? Below is my code that I use to retrieve the province, district municipality, local municipality and wards: 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); I have tried using query.outFields = [ "COUNTRY","PROVINCE", "DCS12_NAME", "S12_NAME", "WARD_NO" ]; but it is not working. Please assist Kind Regards Siyabonga Kubeka

‎03-24-2021

Hi All I have this JavaScript code that displays an Esri map. The users of this map can draw a polygon and retrieve information like the coordinates, the province name, ward, local municipality and district municipality. Now I want to limit the users to only drawing the polygon inside South Africa only. If they draw the polygon outside the boarders, they should get an error message telling them that this is outside South Africa. How can I do that? Below 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 testVariable; 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; i++){ for (var p = 0; p < gra.geometry.rings[i].length; p++){ crmLatitude = String(gra.geometry.getPoint(i, p)); crmLongitude = String(gra.geometry.getPoint(i, p)); var LatLon = String(gra.geometry.rings[i][p]); console.log(LatLon); 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); if(provinces === "Gauteng" || provinces === "Mpumalanga" || provinces === "Limpopo" || provinces === "North West" || provinces === "Northern Cape" || provinces === "Free State" || provinces === "Western Cape" || provinces === "Eastern Cape" || provinces === "KwaZulu-Natal") { //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[i]["dea_name"]; var dea_provinceid = results.entities[i]["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[i]["dea_localmunicipalityid"]; var dea_name = results.entities[i]["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[i]["dea_districtmunicipalityid"]; var dea_name = results.entities[i]["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 } else{ alert("Polygon is drawn outside South Africa, please try again"); } }); }); }); </script> <meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta></head> <body style="overflow-wrap: break-word;"> <div id="viewDiv"></div> </body></html>

‎10-15-2020

Hi Robert Scheitlin, GISP‌ Thank you very much. It works. Kind Regards Siyabonga Kubeka

Online Status	Offline
Date Last Visited	‎06-07-2022 03:32 AM

My Ideas

Latest Contributions by SiyabongaKubeka

Re: Getting Polygon points as Lat and Lon

Re: Getting Polygon points as Lat and Lon

Re: Get coodinate from each point of the polygon on ArcGIS?

Map not showing on production environment

How to show South African measurements in a scale bar?

Re: How do get longitude and latitude for each vertex of each polygon in JavaScript?

How do get longitude and latitude for each vertex of each polygon in JavaScript?

Re: Get X,Y coordinate and ring lat/long array when draw a polygon using sketchviewmodel

Re: Click to select a sub-polygon from a Multi-Polygon

How to draw multiple polygons on an Esri map and get the coordinates of each vertex?

Re: How to get the name of the country name?

Re: How to get the name of the country name?

How to get the name of the country name?

How to prevent users from drawing a polygon or dropping the point outside South African borders?

Re: How to add multiple points on to an Esri Map using an array of longitudes and an array of latitudes?

Re: Getting Polygon points as Lat and Lon

Map not showing on production environment

Re: How to show zoom level at the bottom of the ma...

Re: How to hide a sketch widget on an Esri Map?

Re: How to drop a pin from variables in JavaScript