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?
<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;
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>
