Latest Contributions by SiyabongaKubeka

‎10-15-2020

Hi All, I wan to be able to add point on to an Esri map by reading values from an array of longitudes and an array of latitudes? 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, #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 xcrmLatitude; var crmLongitude = []; var xcrmLongitude; var latlon = []; var xlatlon; var provinces; var municipalities; var districts; var wards; var showWards = []; //var ApplicationStatus = window.parent.Xrm.Page.getAttribute("statuscode").getValue(); //var ProjectType = window.parent.Xrm.Page.getAttribute("dea_typeofproject").getValue(); var ProjectType = 277440004; var zLatitude = [-27.84115002878925,-27.840508078113785]; var zLongitude = [30.24263351745168,30.243520434456922]; if( ProjectType == 277440004 || ProjectType == 277440099) { require([ "esri/views/MapView", "esri/WebMap", "esri/Graphic", "esri/config", "esri/widgets/Sketch/SketchViewModel", "esri/layers/GraphicsLayer", "esri/geometry/support/webMercatorUtils", "esri/layers/FeatureLayer", "esri/tasks/QueryTask", "esri/tasks/support/Query" ], function(MapView, WebMap, Graphic, esriConfig, SketchViewModel, GraphicsLayer, webMercatorUtils, FeatureLayer, QueryTask, Query) { 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: { // autocasts as new PortalItem() id: "04582be14885483da48f29398960f653" } }); var view = new MapView({ map: webmap, container: "viewDiv" //center: [longi, lati], //zoom: 14 }); var graphicsLayer = new GraphicsLayer(); webmap.layers.add(graphicsLayer); // Create a point var point = { type: "point", longitude: zLongitude, latitude: zLatitude, }; var simpleMarkerSymbol = { type: "simple-marker", // color: [226, 119, 40], // orange size: 30, style: "circle", outline: { color: [255, 255, 255], // white width: 2 } }; var pointGraphic = new Graphic({ geometry: webMercatorUtils.geographicToWebMercator(point), symbol: simpleMarkerSymbol }); graphicsLayer.add(pointGraphic); var sketch = new SketchViewModel({ layer: graphicsLayer, view: view, //container: "viewDiv" }); 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. 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); } }); } ); } </script> </head><body style="overflow-wrap: break-word;"> <div id="viewDiv"></div> </body></html>

‎08-28-2020

Hi Robert, I have changed the creationMode to "continuous", but I still can not drop multiple pins. I can drop the first pin, when I drop the second one, the previous one disappears. Kind Regards Siyabonga Kubeka

‎08-21-2020

Hi All I am using JavaScript and Esri maps. I want to be able to drop a number of pins and limit the number of pins to 9, here is a code I have written below, I can drop a pin, but as soon as I drop another one, the first one gets removed, what is is that I am doing wrong? <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 xcrmLatitude; var crmLongitude = []; var xcrmLongitude; var latlon = []; var xlatlon; var provinces; var municipalities; var districts; var wards; var showWards = []; //var ApplicationStatus = window.parent.Xrm.Page.getAttribute("statuscode").getValue(); //var ProjectType = window.parent.Xrm.Page.getAttribute("dea_typeofproject").getValue(); var ProjectType = 277440004; if( ProjectType == 277440004 || ProjectType == 277440099) { require(["esri/views/MapView", "esri/WebMap", "esri/config", "esri/widgets/Sketch", "esri/layers/GraphicsLayer", "esri/layers/FeatureLayer", "esri/tasks/QueryTask", "esri/tasks/support/Query"], function (MapView, WebMap, esriConfig, Sketch, GraphicsLayer, FeatureLayer, QueryTask, Query) { 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, //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); lat = event.graphic.geometry.latitude; lon = event.graphic.geometry.longitude; zoomLevel = view.zoom; } else { alert("please zoom in"); event.graphic.layer.remove(event.graphic); } } }); view.on('click', function(event){ var queryTask = new QueryTask({ url: featureLayerUrl }); debugger; 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); }); }); }); } </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></head><body style="overflow-wrap: break-word;"> <div id="viewDiv"></div> </body></html>

‎08-21-2020

Hi Robert, Thank you very much. I have used the following way and it worked: var zLatitude = window.parent.Xrm.Page.getAttribute("dea_latitude").getValue(); var zLongitude = window.parent.Xrm.Page.getAttribute("dea_longitude").getValue(); var latitudes = zLatitude.split(','); var longitudes = zLongitude.split(','); var myArrayLat = []; var myArrayLon = []; var coordinates = []; //Getting the latitudes debugger; for(i = 0; i < latitudes.length; i++) { myArrayLat.push(latitudes); } //Converting to clean latitudes var x = 0; var xlen = myArrayLat.length; while(x < xlen){ myArrayLat = parseFloat(myArrayLat ); x++ } //Getting the longitudes for(j = 0; j < longitudes.length; j++) { myArrayLon.push(longitudes ); } //Converting to clean longitudes var y = 0; var ylen = myArrayLon.length; while(y < ylen){ myArrayLon = parseFloat(myArrayLon ); y++ } console.log(myArrayLat); console.log(myArrayLon); for (var i=0; i<myArrayLon.length && i< myArrayLat.length; i++) { coordinates = [myArrayLon, myArrayLat]; } console.log(coordinates); var zoomed =[]; zoomed = coordinates[0]; var zoomed1 = zoomed[0]; var zoomed2 = zoomed[1]; console.log(zoomed1); console.log(zoomed2); Then I did the following: function addGraphics() { debugger; const vertices = [coordinates]; const polygon = createGeometry(vertices); validSymbol = createSymbol([0, 170, 255, 0.8], "solid", 2, [ 255, 121, 5 ]); newDevelopmentGraphic = new Graphic({ geometry: webMercatorUtils.geographicToWebMercator(polygon), symbol: validSymbol, attributes: { newDevelopment: "new store" } }); graphicsLayer.add(newDevelopmentGraphic); }

‎07-22-2020

Hi Egge-Jan, Thank you very much. Much appreciated. It works. Kind Regards Siyabonga Kubeka

‎07-22-2020

Hi All, I have an Esri map, what I want to do with it is to show the zoom level at the bottom or anywhere in the map when the user zooms in or out. How can I do that? Below is the sample of the map that I am using. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>DEA GIS APPLICATION</title> <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.12/"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <script> require([ "esri/widgets/Sketch", "esri/Map", "esri/layers/GraphicsLayer", "esri/views/MapView" ], function(Sketch, Map, GraphicsLayer, MapView) { const layer = new GraphicsLayer(); const map = new Map({ basemap: "streets", layers: [layer] }); const view = new MapView({ container: "viewDiv", map: map, zoom: 5, center: [90, 45] }); const sketch = new Sketch({ layer: layer, view: view, availableCreateTools: ["point"] }); view.ui.add(sketch, "top-right"); sketch.on('create', function(evt){ console.log("X = ", evt.graphic.geometry.x); console.log("Y = ", evt.graphic.geometry.y); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html> Kind Regards Siyabonga Kubeka 0761040911

‎07-19-2020

Hi Robert, I am currently using the code above. I want to change the color of the polygon from light blue to red. How can I do that? Kind Regards Siyabonga Kubeka

‎07-16-2020

Hi All, I have an array that contains coordinates, I want to use those coordinates to draw a polygon, how can I do that? var myArr = [3364047.4454315286,-3228904.4514530962, 3364900.9929277417,-3228484.0477610803, 3365799.1274269233,-3229152.871795023, 3365206.741040882,-3229535.056936448, 3364047.4454315286,-3228904.4514530962]; I want to manipulate the contents of the above array to be something like this so that I can be able to draw the polygon: const vertices = [ [3364047.4454315286, -3228904.4514530962], [3364900.9929277417, -3228484.0477610803], [3365799.1274269233, -3229152.871795023], [3365206.741040882,-3229535.056936448], [3364047.4454315286,-3228904.4514530962] ]; I am using JavaScript, I want to draw a polygon on an Esri map. Kind Regards Siyabonga Kubeka

‎07-10-2020

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

‎07-09-2020

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>

‎07-09-2020

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

‎07-05-2020

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

‎07-04-2020

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

‎07-04-2020

Hi Egge-Jan Polle Thank you very much.

‎07-04-2020

Hi Robert, Thank you very much. It worked.

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

My Ideas

Latest Contributions by SiyabongaKubeka

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

Re: How do I add multiple pins on to a Map?

How do I add multiple pins on to a Map?

Re: How to draw a polygon using coordinates stored in the array?

Re: How to show zoom level at the bottom of the map when the user zooms in and out?

How to show zoom level at the bottom of the map when the user zooms in and out?

Re: create polygon with x,y coordinate and edit it via sketchviewmodel

How to draw a polygon using coordinates stored in the array?

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

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

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

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

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

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

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

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