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>
