Latest Contributions by SiyabongaKubeka

‎07-02-2020

Hi All I have a map that has a sketch widget. Now I want to hide that sketch widget if a certain variable contains data and only show the map. But if that certain variable is null or empty I want the map to show the sketch widget. I am using JavaScript. I hope this question does make sense. Please advise. Kind Regards Siyabonga Kubeka

‎06-29-2020

Hi Robert, When I use the suggestion above I get the following error saying that getLatitude and getLongitude are not functions.

‎06-24-2020

Hi Robert, Thank you very much. One last question, is it possible to use those stored coordinates to recreate the polygon? The idea is to save a map and the polygon, so that it can be opened at another stage. If there is a way, how do I do it? Regards Siyabonga Kubeka

‎06-23-2020

Hi All I am trying to get the coordinates of each vertex and separate they by putting all the latitudes on one field and all the longitudes on one field. This is who I tried to do it but it is not dong what I want it to do: 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); crmLongitude = String(gra.geometry.rings ); var LatLon = String(gra.geometry.rings ); console.log(LatLon); latlon = LatLon; } How can I do it? Please assist. Kind Regards Siyabonga Kubeka

‎06-23-2020

Thank you very much Mark.

‎06-22-2020

Hi All I gave a widget that I want ti customize by removing the following items on it: 1. Draw a circle. 2. Draw a rectangle, 3. Draw a point 4. Draw a polyline. I only want the draw polygon item. How do I do that? Please see my 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, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <script> var lon; var lat; var crmLatitude; var crmLongitude; var latlon; var provinces; var municipalities; var districts; var wards; 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, 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.length; p++){ crmLatitude = String(gra.geometry.rings); crmLongitude = String(gra.geometry.rings ); var LatLon = String(gra.geometry.rings ); 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 console.log(provinces); console.log(wards); console.log(districts); console.log(municipalities); //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"]; console.log(dea_name); console.log(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"]; console.log(dea_name); console.log(dea_localmunicipalityid); //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 Ward ID debugger; window.parent.Xrm.WebApi.online.retrieveMultipleRecords("dea_wardid", "?$select=dea_name,dea_wardidid&$filter=dea_name eq '" + wards + "'").then( function success(results) { for (var i = 0; i < results.entities.length; i++) { var dea_name = results.entities["dea_name"]; var dea_wardidid = results.entities["dea_wardidid"]; console.log(dea_name); console.log(dea_wardidid); //Populate lookup var lookupValue = new Array(); lookupValue[0] = new Object(); lookupValue[0].id = dea_wardidid; // GUID of the lookup id lookupValue[0].name = dea_name; // Name of the lookup lookupValue[0].entityType = "dea_wardid"; //Entity Type of the lookup entity window.parent.Xrm.Page.getAttribute("dea_ward").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"]; console.log(dea_districtmunicipalityid); console.log(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 window.parent.Xrm.Page.getAttribute("dea_latitude").setValue(crmLatitude); window.parent.Xrm.Page.getAttribute("dea_longitude").setValue(crmLongitude); //THE END OF CALLS TO CRM }); }); }); </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></head> <body style="overflow-wrap: break-word;"> <div id="viewDiv"></div> </body></html>

‎05-20-2020

Hi Robert, Thank you very much.

‎05-19-2020

Hi All I have the following JavaScript code that I use to retrieve province, municipality, ward no and district. Now I want to put inside its own variable, how can I do that? <script> var lon; var lat; var latlon; var provinces; var municipalities; var districts; var wards; 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, 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.length; p++){ var LatLon = String(gra.geometry.rings ); 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){ console.log(results.features[0].attributes); }); }); }); </script>

‎05-06-2020

Thank you very much Robert, it works.

‎05-06-2020

Hi All I am using a webmap. On it I can drop a point or draw a polygon. I can get the coordinates of the point. Now suppose I am drawing a polygon, how can I get the coordinates of each vertex? Please see my 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 rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.14/"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <script> //alert("Project ID is equals to 0"); 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: { id: "04582be14885483da48f29398960f653" } }); var graphicsLayer = new GraphicsLayer(); var view = new MapView({ map: webmap, //zoom: 14, container: "viewDiv" }); //var symbol = { // type: "simple-marker", // autocasts as new SimpleMarkerSymbol() // style: "circle", // color: "blue", // size: "8px", // pixels // outline: { // autocasts as new SimpleLineSymbol() // color: [255, 255, 0], // width: 1 // points // } //}; webmap.layers.add(graphicsLayer); var sketch = new Sketch({ layer: graphicsLayer, view: view, //symbol: symbol, creationMode: "update", //availableCreateTools: ["point"] //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. 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); //lati = event.graphic.geometry.latitude; //longi = event.graphic.geometry.longitude; zoomLevel = view.zoom; debugger; } else { alert("please zoom in"); event.graphic.layer.remove(event.graphic); } } }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>

‎04-23-2020

Hi Rickey, Unfortunately I am not allowed to share the link to your webapps. But What I have also noticed is that these errors don show when I am using a .html file, but as soon as I take that code, put it on Visual Studio, this issue comes.

‎04-22-2020

Hi all, I have a problem, my may displays perfectly on Microsoft Edge but it does not displays on Chrome. If it does display on Chrome it takes long to display. Sometimes it displays and does not show the SketchWidget. Or I can drop a point but I can not see it, I can only see its coordinates on Console. But all these issues don't appear on Microsoft Edge. The errors that I get on Chrome are as follows: Using ArcGIS API for JavaScript 4.15 [Date: 20200416, Revision: 43ef44a5] Failed to load resource: the server responded with a status of 404 () [https://js.arcgis.com/4.14/dojo/jquery-validation.js] outputsrc: dojoLoader output. TypeError: a.watch is not a function at h (https://js.arcgis.com/4.15/dojo/dojo.js:1698:299) at Object.b.when (https://js.arcgis.com/4.15/dojo/dojo.js:1701:176) at Object.set (https://js.arcgis.com/4.14/esri/widgets/Sketch.js:14:233) at b.set (https://js.arcgis.com/4.15/dojo/dojo.js:355:392) at Object.set [as view] (https://js.arcgis.com/4.15/dojo/dojo.js:408:413) at l (https://js.arcgis.com/4.15/dojo/dojo.js:366:303) at Object.l (https://js.arcgis.com/4.15/dojo/dojo.js:366:276) at Object.a.readOnly.a.set (https://js.arcgis.com/4.15/dojo/dojo.js:363:502) at b.set (https://js.arcgis.com/4.15/dojo/dojo.js:355:392) at Object.set [as view] (https://js.arcgis.com/4.15/dojo/dojo.js:408:413) Please assist. Regards Siyabonga Kubeka

‎04-20-2020

Thank you very much Robert

‎04-20-2020

Hi Robert, When you look at the code, is // Create a point var point = { type: "point", longitude: 28.159843448357865, latitude: -26.374449292814024 }; a point class that you are referring to? Or must I create a new class like this? // Create a new class var point = new Point{ var myLatitude; var myLongitude; }; Please forgive me for such many questions, I am new on Esri and GIS, I am trying to get as much knowledge as I can.

‎04-20-2020

Hi Robert, Thank you very much for the response. I went through the article, but it is not clear on how to use getLatitude() and getLongitude() methods. Must I do it like this? var point = new Point( { getLatitude(); getLongitude(); });

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

My Ideas

Latest Contributions by SiyabongaKubeka

How to hide a sketch widget on an Esri Map?

Re: How to get coordinates of each vertex of a polygon?

Re: How to get coordinates of each vertex of a polygon?

How to get coordinates of each vertex of a polygon?

Re: How to customize the sketch widget?

How to customize the sketch widget?

Re: How to retrieve province, municipality, ward no and district?

How to retrieve province, municipality, ward no and district?

Re: How to get the coordinates of each vertex of a polygon?

How to get the coordinates of each vertex of a polygon?

Re: My map display okay on Microsoft Edge but it does not display on Chrome?

My map display okay on Microsoft Edge but it does not display on Chrome?

Re: How to edit the point on a Map by dragging the point?

Re: How to edit the point on a Map by dragging the point?

Re: How to edit the point on a Map by dragging the point?

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