From 31c7911a616a0e2e306742b30d87e33cdfd56c8f Mon Sep 17 00:00:00 2001
From: Molly Lloyd <mollymerp@users.noreply.github.com>
Date: Tue, 20 Mar 2018 13:28:10 -0700
Subject: [PATCH] don't add duplicate layers when custom styles are provided
 (#168)

---
 src/directions.js       |  7 +++++--
 test/test.directions.js | 34 ++++++++++++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/src/directions.js b/src/directions.js
index 603c140..819cd99 100644
--- a/src/directions.js
+++ b/src/directions.js
@@ -137,9 +137,12 @@ export default class MapboxDirections {
     this._map.addSource('directions', geojson);
 
     // Add direction specific styles to the map
-    directionsStyle.forEach((style) => this._map.addLayer(style));
-
     if (styles && styles.length) styles.forEach((style) => this._map.addLayer(style));
+    directionsStyle.forEach((style) => {
+      // only add the default style layer if a custom layer wasn't provided
+      if (!this._map.getLayer(style.id)) this._map.addLayer(style);
+    });
+
 
     if (interactive) {
       this._map.on('mousedown', this.onDragDown);
diff --git a/test/test.directions.js b/test/test.directions.js
index 64494c5..b39fc39 100644
--- a/test/test.directions.js
+++ b/test/test.directions.js
@@ -10,6 +10,7 @@ function setup() {
   "version": 8,
   "sources": {
   },
+  "glyphs": "local://glyphs/{fontstack}/{range}.pbf",
   "layers": [
       {
           "id": "background", "type": "background",
@@ -65,6 +66,39 @@ test('directions', (tt) => {
   tt.end();
 });
 
+test('Directions with custom styles', t => {
+  var map = setup();
+  var customLayer = {
+    'id': 'directions-route-line',
+    'type': 'line',
+    'source': 'directions',
+    'filter': [
+      'all',
+      ['in', '$type', 'LineString'],
+      ['in', 'route', 'selected']
+    ],
+    'layout': {
+      'line-cap': 'round',
+      'line-join': 'round'
+    },
+    'paint': {
+      'line-color': '#3bb2d0',
+      'line-width': 4
+    }
+  };
+  var directions = new MapboxDirections({
+    styles: [customLayer]
+  });
+  t.ok(map.addControl(directions));
+  map.on('load', ()=>{
+    t.ok(map.getLayer('directions-route-line-alt'), 'adds default for unspecified custom layer');
+    t.deepEqual(map.getLayer('directions-route-line').serialize(), customLayer);
+  })
+
+  t.end();
+});
+
+
 test('Directions#onRemove', t => {
   var map = setup();
   var directions = new MapboxDirections({