How to drop a pin from variables in JavaScript

873
4
Jump to solution
03-31-2020 12:09 AM
SiyabongaKubeka
Occasional Contributor

Hi All

I want to drop a pin using data that is saved on to JavaScript Variables, x and y. How can I do that. Below is the code to drop a pin and get coordinates, is there a way I can change it so that I drop the pin using data that is saved on variables?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>DEA GIS APPLICATION</title>

<link
rel="stylesheet"
href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.12/"></script>

<style>
html,
body,
#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>
require([
"esri/widgets/Sketch",
"esri/Map",
"esri/layers/GraphicsLayer",
"esri/views/MapView"
], function(Sketch, Map, GraphicsLayer, MapView) {
const layer = new GraphicsLayer();

const map = new Map({
basemap: "streets",
layers: [layer]
});

const view = new MapView({
container: "viewDiv",
map: map,
zoom: 5,
center: [90, 45]
});

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

const sketch = new Sketch({
layer: layer,
view: view,
symbol: symbol,
availableCreateTools: ["point"]
});

view.ui.add(sketch, "top-right");

sketch.on('create', function (evt) {
if (view.zoom >= 11) {
// check if the create event's state has changed to complete indicating
// the graphic create operation is completed.
let gra = evt.graphic.clone();
evt.graphic.layer.removeAll();
gra.symbol.color = "blue";
layer.add(gra);
console.log("X = ", gra.geometry.x);
console.log("Y = ", gra.geometry.y);
} else {
alert("please zoom in");
evt.graphic.layer.remove(evt.graphic);
}
});
});
</script>
</head>

<body>
<div id="viewDiv"></div>
</body>
</html>

Please assist.

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
Egge-Jan_Pollé
MVP Regular Contributor

Hi Siyabonga Kubeka,

Recently, I did create a little app - with the ArcGIS API for JavaScript 4.x - with a custom tool to enter WGS84 Coordinates to zoom to a certain point, see screen capture attached.

These entries are used to create a new Graphic that is added to the MapView.

You can find (the source code of) the app here:

ArcGIS JavaScript Tutorial - Go to Latitude/Longitude

 

Is this useful to you?

 

Cheers,

 

Egge-Jan

View solution in original post

0 Kudos
4 Replies
Egge-Jan_Pollé
MVP Regular Contributor

Hi Siyabonga Kubeka,

Recently, I did create a little app - with the ArcGIS API for JavaScript 4.x - with a custom tool to enter WGS84 Coordinates to zoom to a certain point, see screen capture attached.

These entries are used to create a new Graphic that is added to the MapView.

You can find (the source code of) the app here:

ArcGIS JavaScript Tutorial - Go to Latitude/Longitude

 

Is this useful to you?

 

Cheers,

 

Egge-Jan

0 Kudos
SiyabongaKubeka
Occasional Contributor

Hi Egge-Jan Polle

Thank you very much, let me try that.

SiyabongaKubeka
Occasional Contributor

Hi Egge-Jan Polle

Can I please the .htm file? Please email to siyakubeka@live.com

0 Kudos
Egge-Jan_Pollé
MVP Regular Contributor

Hi Siyabonga Kubeka,

Yes, of course! You can view the source in your browser, and copy the full .htm file from there.

You can access the source - both in Firefox and Google Chrome - by hitting Ctrl+U with the page open --> the source will then be opened in a separate window.

Did you know this trick already?

Cheers,

Egge-Jan

0 Kudos