mapbox · varna · Jul 2, 2024 · Jul 2, 2024 · Jul 2, 2024 · Jul 2, 2024
@@ -0,0 +1,2 @@
+# remove the <.example> extension from the file name
+MAPBOX_ACCESS_TOKEN="Replace this with your own Mapbox access token"
@@ -9,4 +9,6 @@ dist/bench.js
 dist/bench.js.map
 coverage/
 .nyc_output/
-debug/access_token_generated.js
+
+# Vite
+*.local
@@ -95,7 +95,7 @@ Install dependencies, build the source files and crank up a server via:
 ```
 git clone [email protected]:mapbox/mapbox-gl-draw.git
 npm ci
-npm start & open "http://localhost:9967/debug/?access_token=<token>"
+npm start & open "http://localhost:9967/debug/index.html?access_token=<token>"
 ```
 
 ### Testing

@@ -1,7 +1,6 @@
 export function getAccessToken() {
   const accessToken =
-    process.env.MapboxAccessToken ||
-    process.env.MAPBOX_ACCESS_TOKEN ||
+    import.meta.env.MAPBOX_ACCESS_TOKEN ||
     (new URLSearchParams(location.search).get('access_token')) ||
     localStorage.getItem('accessToken');
 

@@ -1,19 +1,30 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <meta http-equiv="x-ua-compatible" content="IE=edge">
   <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
   <meta charset=utf-8 />
   <title>Mapbox GL Draw | Mapbox</title>
   <style>
-    body { margin:0; padding:0; }
-    html, body, #map { height: 100%; }
+    body {
+      margin: 0;
+      padding: 0;
+    }
+
+    html,
+    body,
+    #map {
+      height: 100%;
+    }
+
     .start-draw {
       position: absolute;
-      left :10px;
+      left: 10px;
       bottom: 10px;
       background: #efefef;
     }
+
     .start-draw div {
       float: right;
       border: 1px solid #ccc;
@@ -22,6 +33,7 @@
       margin: 5px;
       cursor: pointer;
     }
+
     .toggle {
       position: absolute;
       bottom: 20px;
@@ -32,117 +44,118 @@
 </head>
 
 <body>
-<div id='map'></div>
-<div class='start-draw'>
-  <div id='start-point'>POINT</div>
-  <div id='start-line'>LINE</div>
-  <div id='start-polygon'>POLYGON</div>
-</div>
-<div class='toggle'>
-  <button id='doubleClickZoom'>disable dblclick zoom</button>
-  <button id='addBtn'>add draw</button>
-  <button id='removeBtn'>remove draw</button>
-  <button id='flipStyleBtn'>change style</button>
-</div>
-
-<script type='text/javascript'>
-// Adds in the FPS graph to the top of the page.
-(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();stats.domElement.style.cssText='position:fixed;right: 500px;top:0;z-index:10000';document.body.appendChild(stats.domElement);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='//rawgit.com/mrdoob/stats.js/master/build/stats.min.js';document.head.appendChild(script);})();
-</script>
-
-<script type='module'>
-  import mapboxgl from 'mapbox-gl';
-  import 'mapbox-gl/dist/mapbox-gl.css';
-
-  import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
-  import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
-
-  import MapboxDraw from '../index.js';
-  import '../dist/mapbox-gl-draw.css';
-
-  import {getAccessToken} from './access_token_generated.js';
-
-  mapboxgl.accessToken = getAccessToken();
-
-  const map = new mapboxgl.Map({
-    container: 'map',
-    zoom: 1,
-    center: [0, 0],
-  });
-
-  map.addControl(new MapboxGeocoder({
-    accessToken: mapboxgl.accessToken,
-    mapboxgl
-  }));
-
-  map.addControl(new mapboxgl.NavigationControl(), 'top-left');
-
-  const modes = MapboxDraw.modes;
-  const Draw = window.Draw = new MapboxDraw({ modes });
-  let drawIsActive = true;
-  map.addControl(Draw, 'bottom-right');
-
-  map.on('load', () => {
-    // Add Draw to the map if it is inactive
-    const addButton = document.getElementById('addBtn');
-    addButton.onclick = function () {
-      if (drawIsActive) return;
-      drawIsActive = true;
-      map.addControl(Draw, 'bottom-right');
-    };
-
-    // Remove draw from the map if it is active
-    const removeButton = document.getElementById('removeBtn');
-    removeButton.onclick = function () {
-      if (!drawIsActive) return;
-      drawIsActive = false;
-      map.removeControl(Draw);
-    };
-
-    // Toggle the style between dark and streets
-    const flipStyleButton = document.getElementById('flipStyleBtn');
-    let currentStyle = 'streets-v9';
-    flipStyleButton.onclick = function () {
-      const style = currentStyle === 'streets-v9' ? 'dark-v9' : 'streets-v9';
-      map.setStyle(`mapbox://styles/mapbox/${style}`);
-      currentStyle = style;
-    };
-
-    // toggle double click zoom
-    const doubleClickZoom = document.getElementById('doubleClickZoom');
-    let doubleClickZoomOn = true;
-    doubleClickZoom.onclick = function () {
-      if (doubleClickZoomOn) {
-        doubleClickZoomOn = false;
-        map.doubleClickZoom.disable();
-        doubleClickZoom.innerText = 'enable dblclick zoom';
-      } else {
-        map.doubleClickZoom.enable();
-        doubleClickZoomOn = true;
-        doubleClickZoom.innerText = 'disable dblclick zoom';
-      }
-    };
-
-    // Jump into draw point mode via a custom UI element
-    const startPoint = document.getElementById('start-point');
-    startPoint.onclick = function () {
-      Draw.changeMode('draw_point');
-    };
-
-    // Jump into draw line mode via a custom UI element
-    const startLine = document.getElementById('start-line');
-    startLine.onclick = function () {
-      Draw.changeMode('draw_line_string');
-    };
-
-    // Jump into draw polygon mode via a custom UI element
-    const startPolygon = document.getElementById('start-polygon');
-    startPolygon.onclick = function () {
-      Draw.changeMode('draw_polygon');
-    };
-  });
-
-</script>
+  <div id='map'></div>
+  <div class='start-draw'>
+    <div id='start-point'>POINT</div>
+    <div id='start-line'>LINE</div>
+    <div id='start-polygon'>POLYGON</div>
+  </div>
+  <div class='toggle'>
+    <button id='doubleClickZoom'>disable dblclick zoom</button>
+    <button id='addBtn'>add draw</button>
+    <button id='removeBtn'>remove draw</button>
+    <button id='flipStyleBtn'>change style</button>
+  </div>
+
+  <script type='text/javascript'>
+    // Adds in the FPS graph to the top of the page.
+    (function () { var script = document.createElement('script'); script.onload = function () { var stats = new Stats(); stats.domElement.style.cssText = 'position:fixed;right: 500px;top:0;z-index:10000'; document.body.appendChild(stats.domElement); requestAnimationFrame(function loop() { stats.update(); requestAnimationFrame(loop) }); }; script.src = '//rawgit.com/mrdoob/stats.js/master/build/stats.min.js'; document.head.appendChild(script); })();
+  </script>
+
+  <script type='module'>
+    import mapboxgl from 'mapbox-gl';
+    import 'mapbox-gl/dist/mapbox-gl.css';
+
+    import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
+    import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
+
+    import MapboxDraw from '../index.js';
+    import '../dist/mapbox-gl-draw.css';
+
+    import { getAccessToken } from './access_token.js';
+
+    mapboxgl.accessToken = getAccessToken();
+
+    const map = new mapboxgl.Map({
+      container: 'map',
+      zoom: 1,
+      center: [0, 0],
+    });
+
+    map.addControl(new MapboxGeocoder({
+      accessToken: mapboxgl.accessToken,
+      mapboxgl
+    }));
+
+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
+
+    const modes = MapboxDraw.modes;
+    const Draw = window.Draw = new MapboxDraw({ modes });
+    let drawIsActive = true;
+    map.addControl(Draw, 'bottom-right');
+
+    map.on('load', () => {
+      // Add Draw to the map if it is inactive
+      const addButton = document.getElementById('addBtn');
+      addButton.onclick = function () {
+        if (drawIsActive) return;
+        drawIsActive = true;
+        map.addControl(Draw, 'bottom-right');
+      };
+
+      // Remove draw from the map if it is active
+      const removeButton = document.getElementById('removeBtn');
+      removeButton.onclick = function () {
+        if (!drawIsActive) return;
+        drawIsActive = false;
+        map.removeControl(Draw);
+      };
+
+      // Toggle the style between dark and streets
+      const flipStyleButton = document.getElementById('flipStyleBtn');
+      let currentStyle = 'streets-v9';
+      flipStyleButton.onclick = function () {
+        const style = currentStyle === 'streets-v9' ? 'dark-v9' : 'streets-v9';
+        map.setStyle(`mapbox://styles/mapbox/${style}`);
+        currentStyle = style;
+      };
+
+      // toggle double click zoom
+      const doubleClickZoom = document.getElementById('doubleClickZoom');
+      let doubleClickZoomOn = true;
+      doubleClickZoom.onclick = function () {
+        if (doubleClickZoomOn) {
+          doubleClickZoomOn = false;
+          map.doubleClickZoom.disable();
+          doubleClickZoom.innerText = 'enable dblclick zoom';
+        } else {
+          map.doubleClickZoom.enable();
+          doubleClickZoomOn = true;
+          doubleClickZoom.innerText = 'disable dblclick zoom';
+        }
+      };
+
+      // Jump into draw point mode via a custom UI element
+      const startPoint = document.getElementById('start-point');
+      startPoint.onclick = function () {
+        Draw.changeMode('draw_point');
+      };
+
+      // Jump into draw line mode via a custom UI element
+      const startLine = document.getElementById('start-line');
+      startLine.onclick = function () {
+        Draw.changeMode('draw_line_string');
+      };
+
+      // Jump into draw polygon mode via a custom UI element
+      const startPolygon = document.getElementById('start-polygon');
+      startPolygon.onclick = function () {
+        Draw.changeMode('draw_polygon');
+      };
+    });
+
+  </script>
 
 </body>
-</html>
+
+</html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# remove the <.example> extension from the file name
		MAPBOX_ACCESS_TOKEN="Replace this with your own Mapbox access token"