Modernize 2024

bench/README.md

@@ -7,13 +7,12 @@ Benchmarks help us catch performance regressions and improve performance.
 Start the benchmark server
 
 ```bash
-MAPBOX_ACCESS_TOKEN={YOUR MAPBOX ACCESS TOKEN} npm start
+MAPBOX_ACCESS_TOKEN={YOUR MAPBOX ACCESS TOKEN} yarn start-bench
 ```
 
 Open a benchmark runner page
 
- - **buffer benchmark** http://localhost:9966/bench/buffer
- - **fps benchmark** http://localhost:9966/bench/fps
+ - http://localhost:9967/bench/
 
 ## Writing a Benchmark
 

bench/index.html

@@ -6,8 +6,8 @@
     <meta charset='utf-8'>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
-    <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css'/>
+    <link href="https://api.mapbox.com/mapbox-assembly/v1.5.1/assembly.min.css" rel="stylesheet">
+    <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.css'/>
     <link rel='stylesheet' href='/dist/mapbox-gl-draw.css'/>
 
     <style>
@@ -47,7 +47,7 @@
     <div id="map"></div>
     <div id="tests"></div>
     <div id="logs"></div>
-    <script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>
+    <script src="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.js"></script>
     <script src="/dist/mapbox-gl-draw-unminified.js"></script>
     <script src="/dist/bench.js"></script>
 </body>

bench/rollup.config.js

@@ -1,9 +1,8 @@
-
-import replace from '@rollup/plugin-replace';
+import commonjs from '@rollup/plugin-commonjs';
+import esbuild from 'rollup-plugin-esbuild';
 import json from '@rollup/plugin-json';
-import buble from '@rollup/plugin-buble';
+import replace from '@rollup/plugin-replace';
 import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
 
 export default {
   input: ['bench/index.js'],
@@ -21,7 +20,11 @@ export default {
       'process.env.MAPBOX_ACCESS_TOKEN': JSON.stringify(process.env.MAPBOX_ACCESS_TOKEN),
       preventAssignment: true
     }),
-    buble({transforms: {dangerousForOf: true}, objectAssign: "Object.assign"}),
+    esbuild({
+      target: 'esnext',
+      minify: false,
+      sourceMap: true,
+    }),
     resolve({
       browser: true,
       preferBuiltins: false

debug/access_token.js

@@ -1,20 +1,10 @@
-'use strict';
+export function getAccessToken() {
+  const accessToken =
+    process.env.MapboxAccessToken ||
+    process.env.MAPBOX_ACCESS_TOKEN ||
+    (new URLSearchParams(location.search).get('access_token')) ||
+    localStorage.getItem('accessToken');
 
-mapboxgl.accessToken = getAccessToken();
-
-function getAccessToken() {
-    var accessToken = (
-        process.env.MapboxAccessToken ||
-        process.env.MAPBOX_ACCESS_TOKEN ||
-        getURLParameter('access_token') ||
-        localStorage.getItem('accessToken')
-    );
-    localStorage.setItem('accessToken', accessToken);
-    return accessToken;
-}
-
-function getURLParameter(name) {
-    var regexp = new RegExp('[?&]' + name + '=([^&#]*)', 'i');
-    var output = regexp.exec(window.location.href);
-    return output && output[1];
+  localStorage.setItem('accessToken', accessToken);
+  return accessToken;
 }

debug/index.html

@@ -5,11 +5,6 @@
   <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
   <meta charset=utf-8 />
   <title>Mapbox GL Draw | Mapbox</title>
-  <script src='https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.js'></script>
-  <link href='https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.css' rel='stylesheet' />
-  <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js'></script>
-  <link href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css' rel='stylesheet'>
-  <link href='/dist/mapbox-gl-draw.css' rel='stylesheet' />
   <style>
     body { margin:0; padding:0; }
     html, body, #map { height: 100%; }
@@ -36,6 +31,7 @@
     }
   </style>
 </head>
+
 <body>
 <div id='map'></div>
 <div class='start-draw' >
@@ -50,12 +46,123 @@
   <button id='removeBtn'>remove draw</button>
   <button id='flipStyleBtn'>change style</button>
 </div>
-<script src='/debug/access_token_generated.js'></script>
-<script src='/dist/mapbox-gl-draw-unminified.js'></script>
-<script src='/debug/app.js'></script>
+
 <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 StaticMode = {};
+
+  StaticMode.onSetup = function () {
+    this.setActionableState(); // default actionable state is false for all actions
+    return {};
+  };
+
+  StaticMode.toDisplayFeatures = function (state, geojson, display) {
+    display(geojson);
+  };
+
+  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;
+  modes.static = StaticMode;
+  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');
+    };
+
+    // Jump into static mode via a custom UI element
+    const startStatic = document.getElementById('start-static');
+    startStatic.onclick = function () {
+      Draw.changeMode('static');
+    };
+  });
+
+</script>
+
 </body>
 </html>