Latest Contributions by SiyabongaKubeka

‎04-20-2020

Hi Robert, Once again, thank you very much for your assistance. Your code works like a charm, thank you very much. My one last question is this, supposed I get the latitude and longitude from variables, now after I have moved the point or the pin from one location to the other obviously the coordinates will change, how can I update the variables?

‎04-18-2020

Thank you very much Robert

‎04-16-2020

Hi Robert Please see my code, now it does not work, it does not not display the map anymore. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>Load a basic WebMap - 4.14</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.14/"></script> <script> require(["esri/views/MapView", "esri/WebMap", "esri/Graphic", "esri/config", "esri/widgets/Sketch/SketchViewModel", "esri/layers/GraphicsLayer" ], function(MapView, WebMap, Graphic, esriConfig, SketchViewModel, GraphicsLayer) { /************************************************************ * Creates a new WebMap instance. A WebMap must reference * a PortalItem ID that represents a WebMap saved to * arcgis.com or an on-premise portal. * * To load a WebMap from an on-premise portal, set the portal * url with esriConfig.portalUrl. ************************************************************/ esriConfig.portalUrl = "https://portal.environment.gov.za/portal"; var webmap = new WebMap({ portalItem: { // autocasts as new PortalItem() id: "04582be14885483da48f29398960f653" } }); /************************************************************ * Set the WebMap instance to the map property in a MapView. ************************************************************/ var view = new MapView({ map: webmap, container: "viewDiv" center:[ 28.159843448357865, -26.374449292814024], zoom: 14 }); var graphicsLayer = new GraphicsLayer(); webmap.layers.add(graphicsLayer); // Create a point var point = { type: "point", longitude: 28.159843448357865, latitude: -26.374449292814024 }; var simpleMarkerSymbol = { type: "simple-maker", color: [226, 119, 40], // orange size: 30, style: "circle", outline: { color: [255, 255, 255], // white width: 2 } }; var pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); graphicsLayer.add(pointGraphic); var sketch = new SketchViewModel({ 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); } }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>

‎04-16-2020

Hi, I want to know hod can I edit a point on a map clicking on the point then dragging it, and also updating the coordinates of the point. Below is my code, where I create a point using the saved coordinates. <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS JavaScript Tutorials: Display point, line, and polygon graphics</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.14/"></script> <script> require([ "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/layers/GraphicsLayer" ], function(Map, MapView, Graphic, GraphicsLayer) { var map = new Map({ basemap: "topo-vector" }); var view = new MapView({ container: "viewDiv", map: map, center: [28.159843448357865, -26.374449292814024], zoom: 13 }); var graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); // Create a point var point = { type: "point", longitude: 28.159843448357865, latitude: -26.374449292814024 }; var simpleMarkerSymbol = { type: "simple-marker", color: [226, 119, 40], // orange size: 30, style: "triangle", // default is a circle outline: { color: [255, 255, 255], // white width: 2 } }; var pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); graphicsLayer.add(pointGraphic); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>

‎04-07-2020

the first code is working, the second one is not

‎04-07-2020

I want to add a pointer or a marker on a webmap using coordinates. Below is the code to my original map, it works: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>Load a basic WebMap - 4.14</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.14/"></script> <script> require(["esri/views/MapView", "esri/WebMap", "esri/config", "esri/widgets/Sketch", "esri/layers/GraphicsLayer"], function(MapView, WebMap, esriConfig, Sketch, GraphicsLayer) { /************************************************************ * Creates a new WebMap instance. A WebMap must reference * a PortalItem ID that represents a WebMap saved to * arcgis.com or an on-premise portal. * * To load a WebMap from an on-premise portal, set the portal * url with esriConfig.portalUrl. ************************************************************/ esriConfig.portalUrl = "https://portal.environment.gov.za/portal"; var webmap = new WebMap({ portalItem: { // autocasts as new PortalItem() id: "04582be14885483da48f29398960f653" } }); var graphicsLayer = new GraphicsLayer(); /************************************************************ * Set the WebMap instance to the map property in a MapView. ************************************************************/ 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); } }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html> And this is the code I am using trying to add the pointer or a marker on the webmap but it is not working, can you please advice me on what am I doing wrong? <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>Load a basic WebMap - 4.14</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.14/"></script> <script> require(["esri/views/MapView", "esri/WebMap", "esri/config", "esri/widgets/Sketch", "esri/Graphic", "esri/layers/GraphicsLayer" ], function(MapView, Graphic, WebMap, esriConfig, Sketch, GraphicsLayer) { /************************************************************ * Creates a new WebMap instance. A WebMap must reference * a PortalItem ID that represents a WebMap saved to * arcgis.com or an on-premise portal. * * To load a WebMap from an on-premise portal, set the portal * url with esriConfig.portalUrl. ************************************************************/ esriConfig.portalUrl = "https://portal.environment.gov.za/portal"; var webmap = new WebMap({ portalItem: { // autocasts as new PortalItem() id: "04582be14885483da48f29398960f653" } }); /************************************************************ * Set the WebMap instance to the map property in a MapView. ************************************************************/ var view = new MapView({ map: webmap, container: "viewDiv" center:[ 28.159843448357865, -26.374449292814024], zoom: 14 }); var graphicsLayer = new GraphicsLayer(); webmap.layers.add(graphicsLayer); // Create a point var point = { type: "point", longitude: 28.159843448357865, latitude: -26.374449292814024 }; var simpleMarkerSymbol = { type: "simple-maker", color: [226, 119, 40], // orange size: 30, style: "circle", outline: { color: [255, 255, 255], // white width: 2 } }; var pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); graphicsLayer.add(pointGraphic); 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); } }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>

‎03-31-2020

Hi Egge-Jan Polle Can I please the .htm file? Please email to siyakubeka@live.com

‎03-31-2020

Hi Egge-Jan Polle Thank you very much, let me try that.

‎03-31-2020

Hi All I want to drop a pin using data that is saved on to JavaScript Variables, x and y. How can I do that. Below is the code to drop a pin and get coordinates, is there a way I can change it so that I drop the pin using data that is saved on variables? <!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%; } .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> 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] }); 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 } }; const sketch = new Sketch({ layer: layer, view: view, symbol: symbol, availableCreateTools: ["point"] }); view.ui.add(sketch, "top-right"); sketch.on('create', function (evt) { if (view.zoom >= 11) { // check if the create event's state has changed to complete indicating // the graphic create operation is completed. let gra = evt.graphic.clone(); evt.graphic.layer.removeAll(); gra.symbol.color = "blue"; layer.add(gra); console.log("X = ", gra.geometry.x); console.log("Y = ", gra.geometry.y); } else { alert("please zoom in"); evt.graphic.layer.remove(evt.graphic); } }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html> Please assist.

‎03-18-2020

I am working on an MVC project. I have integrated an Esri map in the view. Previously I could drop a pin on the map and get the coordinates and save them. But most recently, something went wrong, I do not know what it is. For some reason when I drop a pin on the map, a save even is triggered and it saves all the other data except the coordinates. It also closes the page. I have investigated, I cant pin point the problem. Please assist. Please see code to integrate the map on the view below: <script type="text/javascript"> var latitude; var longitude; var zoomLevel; 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 (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); latitude = gra.geometry.x; longitude = gra.geometry.y; zoomLevel = view.zoom; debugger; } else { alert("please zoom in"); event.graphic.layer.remove(event.graphic); } }); }); function saveCoordinates() { debugger; $("#lat").val(latitude); $("#long").val(longitude); }; </script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ How the map is added: <div class="panel-body"> <div class="form-group"> <div id="viewDiv" style="position:relative; width:900px; height:600px; border:1px solid #000;"></div> </div> </div>‍‍‍‍‍‍‍‍‍‍ Then the save button: <div class="form-group"> <div class="col-md-10"> <input type="submit" class="btn btn-primary" id="savebutton" value="Save" onclick="validateForm(); saveCoordinates()" /> @Html.ActionLink("Cancel", "Index", "Application", null, new { @class = "btn btn-primary", @id = "cancelbutton" }) </div> </div>‍‍‍‍‍‍‍‍‍‍

‎03-10-2020

Thank you very much Robert

‎03-10-2020

Hi Robert, Do I add them inside the style or inside the sketch widget?

‎03-09-2020

Hi All How does one remove the undo and redo button on a sketch widget? Please see my code below: <!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] }); 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 } }; const sketch = new Sketch({ layer: layer, view: view, symbol: symbol, availableCreateTools: ["point"] }); view.ui.add(sketch, "top-right"); sketch.on('create', function (evt) { if (view.zoom >= 11) { // check if the create event's state has changed to complete indicating // the graphic create operation is completed. let gra = evt.graphic.clone(); evt.graphic.layer.removeAll(); gra.symbol.color = "blue"; layer.add(gra); console.log("X = ", gra.geometry.x); console.log("Y = ", gra.geometry.y); } else { alert("please zoom in"); evt.graphic.layer.remove(evt.graphic); } }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>

‎03-06-2020

Hi Robert Scheitlin, GISP Thank you very much, it works.

‎03-05-2020

Hi Robert Scheitlin, GISP Thank you very much. I works on perfectly. But as soon as I try it on Visual Studio, I can no longer drop pins, instead, when I go to the console, I get this error: CreateOrEditApplication:209 Uncaught ReferenceError: layer is not defined at Object.<anonymous> (CreateOrEditApplication:209) at VM8 dojo.js:605 at Array.forEach (<anonymous>) at a.emit (VM8 dojo.js:605) at Object.b.emit (VM8 dojo.js:608) at Object.<anonymous> (VM8 dojo.js:2098) at VM8 dojo.js:605 at Array.forEach (<anonymous>) at a.emit (VM8 dojo.js:605) at Object.b.emit (VM8 dojo.js:608) Best Regards Siyabonga Kubeka

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

My Ideas

Latest Contributions by SiyabongaKubeka

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?

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

Re: How to add a pointer or a marker on a map using coordinates?

How to add a pointer or a marker on a map using coordinates?

Re: How to drop a pin from variables in JavaScript

Re: How to drop a pin from variables in JavaScript

How to drop a pin from variables in JavaScript

How to stop a page from auto save after you have dropped a pin on an Esri Map?

Re: How to remove the undo and redo button on a sketch widget?

Re: How to remove the undo and redo button on a sketch widget?

How to remove the undo and redo button on a sketch widget?

Re: How to disable multiple pin-drips per session?

Re: How to disable multiple pin-drips per session?

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