Give the ability to add unlimited amount of layers

README.md

@@ -38,15 +38,16 @@ const featureCollection = mapboxPathControl.getFeatureCollection();
 
 ```
 LayersCustomisation {
-  pointCircleLayerCustomisation: LayerCustomisation;
-  pointTextLayerCustomisation: LayerCustomisation;
-  lineLayerCustomisation: LayerCustomisation;
-  phantomJunctionLineLayerCustomisation: LayerCustomisation;
+  pointLayerList: LayerCustomisation;
+  lineLayerList: LayerCustomisation;
+  phantomJunctionLineLayerList: LayerCustomisation;
 }
 
 LayerCustomisation {
+  id: string | undefined;
   layout: AnyLayout;
   paint: AnyPaint;
+  type: string | undefined;
 }
 ```
 

rollup.config.dev.js

@@ -32,25 +32,33 @@ export default [
           const content = `<div id="map" style="width: 100vw; height: 100vh;"></div>`;
           const scriptMapbox = `<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>`;
           const layersCustomisation = `{
-            pointCircleLayerCustomisation: {
+            pointLayerList: [{
               paint: {
                 "circle-radius": 10,
                 "circle-color": "#FFFFFF",
                 "circle-stroke-width": 1,
                 "circle-stroke-color": "#0D47A1",
               },
-            },
-            pointTextLayerCustomisation: { paint: { "text-color": "#B71C1C" } },
-            lineLayerCustomisation: {
+            }, {
+              paint: {
+                "text-color": "#B71C1C"
+              },
+              type: "symbol",
+              layout: {
+                "text-field": ["to-string", ["+", ["get", "index"], 1]],
+                "text-allow-overlap": true,
+              },
+            }],
+            lineLayerList: [{
               paint: { "line-width": 10, "line-color": "#0D47A1" },
-            },
-            phantomJunctionLineLayerCustomisation: {
+            }],
+            phantomJunctionLineLayerList: [{
               paint: {
                 "line-width": 10,
                 "line-color": "#0D47A1",
                 "line-dasharray": [1, 1],
               },
-            },
+            }],
           }`;
           const featureCollection = `undefined`;
           const directionsThemes = `[{

src/index.ts

@@ -10,10 +10,9 @@ import {
   pointsAndLinesSource,
   pointCircleLayerId,
   betweenPointsLineLayerId,
-  referencePointsCircleLayer,
-  referencePointsTextLayer,
-  betweenPointsLineLayer,
-  phantomJunctionLineLayer,
+  defaultPointLayerList,
+  defaultLineLayerList,
+  defaultPhantomJunctionLineLayerList,
   LayersCustomisation,
   pointTextLayerId,
   phantomJunctionLineLayerId,
@@ -221,44 +220,58 @@ export default class MapboxPathControl implements IControl {
 
   private initializeSourceAndLayers(): void {
     this.map!.addSource(sourcePointAndLineId, pointsAndLinesSource);
-    this.map!.addLayer(
-      this.layersCustomisation &&
-        this.layersCustomisation.pointCircleLayerCustomisation
-        ? {
-            ...referencePointsCircleLayer,
-            ...this.layersCustomisation.pointCircleLayerCustomisation,
-          }
-        : referencePointsCircleLayer
-    );
-    this.map!.addLayer(
-      this.layersCustomisation &&
-        this.layersCustomisation.pointTextLayerCustomisation
-        ? {
-            ...referencePointsTextLayer,
-            ...this.layersCustomisation.pointTextLayerCustomisation,
-          }
-        : referencePointsTextLayer
-    );
-    this.map!.addLayer(
-      this.layersCustomisation &&
-        this.layersCustomisation.lineLayerCustomisation
-        ? {
-            ...betweenPointsLineLayer,
-            ...this.layersCustomisation.lineLayerCustomisation,
-          }
-        : betweenPointsLineLayer,
-      pointCircleLayerId
-    );
-    this.map!.addLayer(
-      this.layersCustomisation &&
-        this.layersCustomisation.phantomJunctionLineLayerCustomisation
-        ? {
-            ...phantomJunctionLineLayer,
-            ...this.layersCustomisation.phantomJunctionLineLayerCustomisation,
-          }
-        : phantomJunctionLineLayer,
-      pointCircleLayerId
-    );
+    const {
+      lineLayerList = defaultLineLayerList,
+      phantomJunctionLineLayerList = defaultPhantomJunctionLineLayerList,
+      pointLayerList = defaultPointLayerList,
+    } = this.layersCustomisation || {};
+
+    const groupLayerList = [
+      {
+        baseId: betweenPointsLineLayerId,
+        layerList: lineLayerList,
+        props: {
+          filter: [
+            "all",
+            ["in", "$type", "LineString"],
+            ["!has", "isPhantomJunction"],
+          ],
+          type: "line",
+        },
+      },
+      {
+        baseId: phantomJunctionLineLayerId,
+        layerList: phantomJunctionLineLayerList,
+        props: {
+          filter: [
+            "all",
+            ["in", "$type", "LineString"],
+            ["has", "isPhantomJunction"],
+          ],
+          type: "line",
+        },
+      },
+      {
+        baseId: pointCircleLayerId,
+        layerList: pointLayerList,
+        props: {
+          filter: ["in", "$type", "Point"],
+          type: "circle",
+        },
+      },
+    ];
+    groupLayerList.forEach(({ baseId, layerList, props }) => {
+      layerList.forEach((layer: any, index: number) => {
+        // The first layer must have the ID without suffix or override to apply its interactions
+        const id = index === 0 ? baseId : layer.id || `${baseId}-${index}`;
+        this.map!.addLayer({
+          source: sourcePointAndLineId,
+          ...props,
+          ...layer,
+          id,
+        });
+      });
+    });
   }
 
   private initializeEvents(): void {

src/source-and-layers.ts

@@ -1,64 +1,56 @@
-import { Layer, GeoJSONSourceRaw, AnyLayout, AnyPaint } from "mapbox-gl";
+import { GeoJSONSourceRaw, AnyLayout, AnyPaint } from "mapbox-gl";
 
 export const sourcePointAndLineId = "gl-pathControl-points-and-lines";
 export const pointCircleLayerId = "gl-pathControl-reference-points-circle";
 export const pointTextLayerId = "gl-pathControl-reference-points-text";
 export const betweenPointsLineLayerId = "gl-pathControl-between-points-lines";
-export const phantomJunctionLineLayerId = "gl-pathControl-phantom-junction-lines";
+export const phantomJunctionLineLayerId =
+  "gl-pathControl-phantom-junction-lines";
 
 export const pointsAndLinesSource: GeoJSONSourceRaw = {
   type: "geojson",
   data: { type: "FeatureCollection", features: [] },
 };
 
-export const referencePointsCircleLayer: Layer = {
-  id: pointCircleLayerId,
-  type: "circle",
-  source: sourcePointAndLineId,
-  paint: { "circle-radius": 10, "circle-color": "#000000" },
-  filter: ["in", "$type", "Point"],
-};
-
-export const referencePointsTextLayer: Layer = {
-  id: pointTextLayerId,
-  type: "symbol",
-  source: sourcePointAndLineId,
-  paint: { "text-color": "#FFFFFF" },
-  layout: {
-    "text-field": ["to-string", ["+", ["get", "index"], 1]],
-    "text-allow-overlap": true,
+export const defaultPointLayerList = [
+  {
+    paint: { "circle-radius": 10, "circle-color": "#000000" },
   },
-  filter: ["in", "$type", "Point"],
-};
-
-export const betweenPointsLineLayer: Layer = {
-  id: betweenPointsLineLayerId,
-  type: "line",
-  source: sourcePointAndLineId,
-  paint: { "line-width": 10, "line-color": "#000000" },
-  filter: ["all", ["in", "$type", "LineString"], ["!has", "isPhantomJunction"]],
-};
+  {
+    type: "symbol",
+    paint: { "text-color": "#FFFFFF" },
+    layout: {
+      "text-field": ["to-string", ["+", ["get", "index"], 1]],
+      "text-allow-overlap": true,
+    },
+  },
+];
 
-export const phantomJunctionLineLayer: Layer = {
-  id: phantomJunctionLineLayerId,
-  type: "line",
-  source: sourcePointAndLineId,
-  paint: {
-    "line-width": 10,
-    "line-color": "#000000",
-    "line-dasharray": [1, 1],
+export const defaultLineLayerList = [
+  {
+    paint: { "line-width": 10, "line-color": "#000000" },
   },
-  filter: ["all", ["in", "$type", "LineString"], ["has", "isPhantomJunction"]],
-};
+];
+
+export const defaultPhantomJunctionLineLayerList = [
+  {
+    paint: {
+      "line-width": 10,
+      "line-color": "#000000",
+      "line-dasharray": [1, 1],
+    },
+  },
+];
 
 export interface LayersCustomisation {
-  pointCircleLayerCustomisation: LayerCustomisation;
-  pointTextLayerCustomisation: LayerCustomisation;
-  lineLayerCustomisation: LayerCustomisation;
-  phantomJunctionLineLayerCustomisation: LayerCustomisation;
+  lineLayerList: LayerCustomisation[];
+  phantomJunctionLineLayerList: LayerCustomisation[];
+  pointLayerList: LayerCustomisation[];
 }
 
 export interface LayerCustomisation {
+  id: string | undefined;
   layout: AnyLayout;
   paint: AnyPaint;
+  type: string | undefined;
 }