Skip to content

Instantly share code, notes, and snippets.

@hhkaos

hhkaos/arcgis-marker.html

Last active February 26, 2021 05:18
Show Gist options
  • Save hhkaos/d9c14f02130b1f51e449bf12d33e30f6 to your computer and use it in GitHub Desktop.
Save hhkaos/d9c14f02130b1f51e449bf12d33e30f6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
arcgis-marker.html
<html>
<head>
<style>#mapDiv{width:100%; height:400px}</style>
</head>
<body>
<h1>Drawing marker in ArcGIS</h1>
<div id="mapDiv"></div>
<script type="module">
import MapView from "https://js.arcgis.com/4.18/@arcgis/core/views/MapView.js";
const view = new MapView({
container: "mapDiv",
map: {basemap: "streets-navigation-vector"},
center: {
latitude: 32.7353,
longitude: -117.1490
},
zoom: 11
});
view.graphics.add({
symbol: {
type: "web-style",
name: "park",
styleName: "Esri2DPointSymbolsStyle"
},
geometry: {
type: "point",
latitude: 32.7353,
longitude: -117.1490
},
popupTemplate: {
title: "San Diego Zoo",
content: "<h1>San Diego Zoo</h1>" +
"The <a href='http://zoo.sandiegozoo.org/'>San Diego Zoo</a> " +
" in Balboa Park houses over 3,700 animals.<p><p>" +
"<img src='https://visitoceanside.org/wp-content/uploads/2013/01/SanDiegoZoo.jpg' alt='San Diego Zoo' height='150'>"
}
});
</script>
<script src="https://js.arcgis.com/4.18/"></script>
<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/css/main.css">
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment