Skip to content

Instantly share code, notes, and snippets.

@fdq09eca

fdq09eca/arcgis-api-for-javascript-display-a-map.markdown

Last active September 30, 2022 12:16
Show Gist options
  • Save fdq09eca/56091654b229d737794fc8e1a26b8670 to your computer and use it in GitHub Desktop.
Save fdq09eca/56091654b229d737794fc8e1a26b8670 to your computer and use it in GitHub Desktop.
Download ZIP
ArcGIS API for JavaScript: Display a map
Raw
arcgis-api-for-javascript-display-a-map.markdown
Raw
index.html
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>ArcGIS API for JavaScript Tutorials: Display a map</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css">
<link rel="stylesheet" href="style.css">
<script src="https://js.arcgis.com/4.24/"></script>
</head>
<body>
<div id="viewDiv"></div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>
Raw
script.js
require(["esri/config","esri/Map", "esri/views/MapView"], function (esriConfig,Map, MapView) {
esriConfig.apiKey = "AAPK145053262bd6467ca1964310f4fa5dcbkBC4UJkiXHLfDU5QBdgqQiRIMvqYdlD4sxk5nECzG_HtbwDniS4FuUGs5BQoHDnm";
const map = new Map({
basemap: "arcgis-topographic" // Basemap layer service
});
const view = new MapView({
map: map,
center: [-118.805, 34.027], // Longitude, latitude
zoom: 13, // Zoom level
container: "viewDiv" // Div element
});
});
Raw
style.css
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment