feat: add multi line support

Author: fredj

demos/simple/demo.js

@@ -126,6 +126,14 @@ function main() {
     }
     trackManager.addPOI(poiOverlay, onAddListener)
   });
+
+  document.querySelector('#createNewPart').addEventListener('click', () => {
+    trackManager.createNewPart();
+  });
+  document.querySelector('#changeActivePart').addEventListener('click', () => {
+    const nextPart = (trackManager.activePart() + 1) % trackManager.partsCount();
+    trackManager.workOnPart(nextPart);
+  });
 }
 
 main();

demos/simple/simple.html

@@ -56,7 +56,12 @@
         <button id="poiCancel">Cancel</button>
         <button id="poiSave">Save</button>
       </div>
-  </div>
+      <br />
+      <br />
+      <a href="#" id="createNewPart">Add a new line string</a>
+      <br />
+      <a href="#" id="changeActivePart">Change active line string</a>
+    </div>
     <div id="map"></div>
   </main>
 </body>

demos/simple/style.js

@@ -12,6 +12,8 @@ export const sketchControlPoint = {
 export const trackLine = {
   "stroke-width": 6,
   "stroke-color": "purple",
+  "text-value": ["concat", "", ["get", "part"]],
+  "text-fill-color": "#fff",
 };
 
 export const trackLineModifying = {
@@ -27,15 +29,15 @@ export const poiPoint = {
   "text-font": "bold 11px Inter",
   "text-fill-color": "#000",
   // use 'concat' to convert number to string
-  "text-value": ["concat", ["get", "index"], ""],
+  "text-value": ["concat", "", ["get", "part"]],
 };
 
 export const numberedControlPoint = {
   ...controlPoint,
   "circle-fill-color": "#ffffffdd",
   "text-color": "blue",
   // use 'concat' to convert number to string
-  "text-value": ["concat", ["get", "index"], ""],
+  "text-value": ["concat", "", ["get", "part"]],
 };
 
 export const snappedTrue = {