Create basic map from Mapbox docs. #6

datameet · Feb 24, 2022 · d9aeb08 · d9aeb08
1 parent eea67b6
commit d9aeb08
Showing 1 changed file with 36 additions and 0 deletions.
diff --git a/map.html b/map.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>PMGSY roads and facilities map</title>
+<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
+<link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet">
+<script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
+<style>
+body { margin: 0; padding: 0; }
+#map { position: absolute; top: 0; bottom: 0; width: 100%; }
+</style>
+</head>
+<body>
+<div id="map"></div>
+<script>
+	mapboxgl.accessToken = 'pk.eyJ1IjoicGxhbmVtYWQiLCJhIjoiY2l2eDhnNzNpMDAwNzJ5cGowcnpiMXJkdyJ9.NljuPglsRA3mTGf-4CLIEg';
+    const map = new mapboxgl.Map({
+        container: 'map', // container ID
+        style: 'mapbox://styles/planemad/cknj1leps0ywv17lrj8d16vnj', // style URL
+        center: [76, 28], // starting position [lng, lat]
+        zoom: 11.5 // starting zoom
+    });
+
+  // Add the control to the map.
+  map.addControl(new mapboxgl.NavigationControl());
+  map.addControl(
+    new MapboxGeocoder({
+    accessToken: mapboxgl.accessToken,
+    mapboxgl: mapboxgl
+    })
+  );
+</script>
+
+</body>
+</html>