don't add duplicate layers when custom styles are provided (#168)

Author: mollymerp

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);

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({