AlanPew/index.html

## index.html
<!--

To run this demo, you need to replace 'YOUR_API_KEY' with an API key from the ArcGIS Developers 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>MapLibre GL JS Tutorials: Add a styled basemap layer</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 = "AAPK40227465b1fb4bb09182247cf1beb820xRhOp5k4k_gXM_rcN7UzsO-jpL9fDVFJxl1mW-2VUfNv0yCL81xh5yd7ydX-xIJd";

      const basemapEnum = "3e1a00aeae81496587988075fe529f71"; // Custom vector tile style

      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>
	<!--

	To run this demo, you need to replace 'YOUR_API_KEY' with an API key from the ArcGIS Developers 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>MapLibre GL JS Tutorials: Add a styled basemap layer</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 = "AAPK40227465b1fb4bb09182247cf1beb820xRhOp5k4k_gXM_rcN7UzsO-jpL9fDVFJxl1mW-2VUfNv0yCL81xh5yd7ydX-xIJd";

	const basemapEnum = "3e1a00aeae81496587988075fe529f71"; // Custom vector tile style

	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>