Skip to content

Instantly share code, notes, and snippets.

@ghoti143

ghoti143/display-a-map.markdown

Created June 15, 2022 21:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ghoti143/5df7c3a8b3072b771e5158311a09f7e3 to your computer and use it in GitHub Desktop.
Save ghoti143/5df7c3a8b3072b771e5158311a09f7e3 to your computer and use it in GitHub Desktop.
Download ZIP
Display a map
Raw
index.html
<!--
To run this demo, you need to replace 'YOUR_API_KEY' with an API key from the ArcGIS Developer dashboard.
Sign up for a free account and get an API key.
https://developers.arcgis.com/documentation/mapping-apis-and-services/get-started/
-->
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Mapbox GL JS Tutorials: Display a map</title>
<style>
html,
body,
#map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #323232;
}
</style>
<script src="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.css" rel="stylesheet" />
</head>
<body>
<div id="map"></div>
<script>
const apiKey = "AAPKa0c1c5d8dd94416abbd2180e6f276f92JPZChEd-oGxjQtTPOC6yO1G7sL6eAv8Jkag_WbBEVvhbB7TOanxd0u58rje5wWWq";
const basemapEnum = "ArcGIS:LightGray";
const map = new maplibregl.Map({
container: "map", // the id of the div element
style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`,
zoom: 12, // starting zoom
center: [-118.805, 34.027] // starting location [longitude, latitude]
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment