How do I add multiple pins on to a Map?

SiyabongaKubeka — Fri, 21 Aug 2020 09:45:46 GMT

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?

.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>

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

RobertScheitlin__GISP — Fri, 21 Aug 2020 12:32:59 GMT

Try changing the sketch widgets creationMode property to continuous instead of update.

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch.html#creationMode

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

SiyabongaKubeka — Fri, 28 Aug 2020 10:30:04 GMT

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

topic How do I add multiple pins on to a Map? in ArcGIS JavaScript Maps SDK Questions

How do I add multiple pins on to a Map?

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

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