<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/WebMap",
"esri/views/MapView",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/symbols/TextSymbol"
], function (WebMap, MapView, Graphic, GraphicsLayer, TextSymbol) {
const webmap = new WebMap({
portalItem: {
id: "36f72c8a71b542399ca09e10c5aa55f4"
}
});
const view = new MapView({
container: "viewDiv",
map: webmap,
center: [-37.731338217717074, 175.22263172713014],
zoom: 10
});
this.objectTypeList = [
{ Location: '560001', latitude: -37.731338217717074, longitude: 175.22263172713014 },
{ Location: '560002', latitude: -37.487705856583744, longitude: 175.09324140306873 },
{ Location: '560003', latitude: -37.505917118655056, longitude: 175.12036900524583 },
{ Location: '560005', latitude: -37.67287982024181, longitude: 175.23882277753953 },
{ Location: '560005', latitude: -37.67310492511848, longitude: 175.23890380457217 }
];
var graphicsLayer = new GraphicsLayer();
webmap.layers.add(graphicsLayer);
this.objectTypeList.forEach(item => {
var point = {
type: "point",
longitude: item.longitude,
latitude: item.latitude
};
var textSymbol = new TextSymbol({
color: "#BB0000",
haloColor: "black",
haloSize: "1px",
text: `${item.Location}`,
font: { size: 12, family: "Josefin Slab", weight: "bold" }
});
var pointGraphic = new Graphic({
geometry: point,
symbol: textSymbol
});
graphicsLayer.add(pointGraphic);
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
