Add example of maplibre-gl-draw (#5086)

* Add example of maplibre-gl-draw * changelog * use latest v2 * use latest * use latest turf * fixes * don't revert title
maplibre · Nov 21, 2024 · 94e2729 · 94e2729
1 parent 40bf2b5
commit 94e2729
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,7 +1,6 @@
 ## main
 
 ### ✨ Features and improvements
-
 - ⚠️ Change the return type of `on` method to return a `Subscription` to allow for easy unsubscribe ([#5080](https://github.com/maplibre/maplibre-gl-js/pull/5080))
 - _...Add new stuff here..._
 

diff --git a/docs/assets/examples/mapbox-gl-draw.png → docs/assets/examples/maplibre-gl-draw.png b/docs/assets/examples/mapbox-gl-draw.png → docs/assets/examples/maplibre-gl-draw.png
diff --git a/test/examples/mapbox-gl-draw.html → test/examples/maplibre-gl-draw.html b/test/examples/mapbox-gl-draw.html → test/examples/maplibre-gl-draw.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>Show drawn polygon area</title>
-    <meta property="og:description" content="Use mapbox-gl-draw to draw a polygon and Turf.js to calculate its area in square meters." />
+    <title>Draw polygon with maplibre-gl-draw</title>
+    <meta property="og:description" content="Use jsr:@birkskyum/maplibre-gl-draw to draw a polygon and Turf.js to calculate its area in square meters." />
     <meta charset='utf-8'>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel='stylesheet' href='../../dist/maplibre-gl.css' />
@@ -31,23 +31,25 @@
         font-size: 13px;
     }
 </style>
-
-<script src="https://www.unpkg.com/turf@3.0.14/turf.min.js"></script>
-<script src="https://www.unpkg.com/@mapbox/mapbox-gl-draw@1.4.3/dist/mapbox-gl-draw.js"></script>
 <link
     rel="stylesheet"
-    href="https://www.unpkg.com/@mapbox/mapbox-gl-draw@1.4.3/dist/mapbox-gl-draw.css"
-/>
-<div id="map"></div>
-<div class="calculation-box">
-    <p>Draw a polygon using the draw tools.</p>
-    <div id="calculated-area"></div>
-</div>
+    href="https://esm.sh/jsr/@birkskyum/maplibre-gl-draw@^2/dist/maplibre-gl-draw.css"
+    />
+    <div id="map"></div>
+    <div class="calculation-box">
+        <p>Draw a polygon using the draw tools.</p>
+        <div id="calculated-area"></div>
+    </div>
+
+    <script type="module">
+
+
+    import * as turf from 'https://esm.sh/@turf/turf@7.1.0';
 
-<script>
-    MapboxDraw.constants.classes.CONTROL_BASE  = 'maplibregl-ctrl';
-    MapboxDraw.constants.classes.CONTROL_PREFIX = 'maplibregl-ctrl-';
-    MapboxDraw.constants.classes.CONTROL_GROUP = 'maplibregl-ctrl-group';
+    import {MapLibreDraw} from 'https://esm.sh/jsr/@birkskyum/maplibre-gl-draw@^2';
+    MapLibreDraw.constants.classes.CONTROL_BASE  = 'maplibregl-ctrl';
+    MapLibreDraw.constants.classes.CONTROL_PREFIX = 'maplibregl-ctrl-';
+    MapLibreDraw.constants.classes.CONTROL_GROUP = 'maplibregl-ctrl-group';
 
     const map = new maplibregl.Map({
         container: 'map', // container id
@@ -57,7 +59,7 @@
         zoom: 12 // starting zoom
     });
 
-    const draw = new MapboxDraw({
+    const draw = new MapLibreDraw({
         displayControlsDefault: false,
         controls: {
             polygon: true,