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

281
2
Jump to solution
10-15-2020 03:36 AM
SiyabongaKubeka
Occasional Contributor

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>

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Just loop through the array.

          var graphicsLayer = new GraphicsLayer();
webmap.layers.add(graphicsLayer);

var simpleMarkerSymbol = {
type: "simple-marker", //
color: [226, 119, 40], // orange
size: 30,
style: "circle",
outline: {
color: [255, 255, 255], // white
width: 2
}
};

for (i=0; i< zLongitude.length; i++ ){
// Create a point
var point = {
type: "point",
longitude: zLongitude[i],
latitude: zLatitude[i],
};

var pointGraphic = new Graphic({
geometry: webMercatorUtils.geographicToWebMercator(point),
symbol: simpleMarkerSymbol
});
graphicsLayer.add(pointGraphic);
}

View solution in original post

2 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Just loop through the array.

          var graphicsLayer = new GraphicsLayer();
webmap.layers.add(graphicsLayer);

var simpleMarkerSymbol = {
type: "simple-marker", //
color: [226, 119, 40], // orange
size: 30,
style: "circle",
outline: {
color: [255, 255, 255], // white
width: 2
}
};

for (i=0; i< zLongitude.length; i++ ){
// Create a point
var point = {
type: "point",
longitude: zLongitude[i],
latitude: zLatitude[i],
};

var pointGraphic = new Graphic({
geometry: webMercatorUtils.geographicToWebMercator(point),
symbol: simpleMarkerSymbol
});
graphicsLayer.add(pointGraphic);
}

View solution in original post

SiyabongaKubeka
Occasional Contributor

Hi Robert Scheitlin, GISP

Thank you very much. It works.

Kind Regards

Siyabonga Kubeka

0 Kudos