AnsweredAssumed Answered

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

Question asked by siyakubeka on Oct 15, 2020
Latest reply on Oct 15, 2020 by siyakubeka

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>

Outcomes