Add back layers and force redraw after map style change

Fixes #512

debug/index.html

@@ -41,6 +41,7 @@
 <div class='toggle'>
   <button id='addBtn'>add draw</button>
   <button id='removeBtn'>remove draw</button>
+  <button id='flipStyleBtn'>change style</button>
 </div>
 <script src='/mapbox-gl.js'></script>
 <script src='/mapbox-gl-draw.js'></script>
@@ -73,14 +74,16 @@
     position: 'top-left'
   }));
 
-  var Draw = window.Draw = mapboxgl.Draw({ position: 'bottom-right' });
+  var Draw = window.Draw = mapboxGlDraw({ position: 'bottom-right' });
   map.addControl(Draw);
 
   map.on('load', function() {
 
     // toggle
     var addButton = document.getElementById('addBtn');
     var removeButton = document.getElementById('removeBtn');
+    var flipStyleButton = document.getElementById('flipStyleBtn');
+    var currentStyle = 'streets-v9';
     addButton.onclick = function() {
       if (Draw) return;
       Draw = mapboxgl.Draw();
@@ -91,6 +94,11 @@
       Draw.remove();
       Draw = null;
     }
+    flipStyleButton.onclick = function() {
+      var style = currentStyle === 'streets-v9' ? 'dark-v9' : 'streets-v9';
+      map.setStyle('mapbox://styles/mapbox/' + style);
+      currentStyle = style;
+    }
 
     var startPoint = document.getElementById('start-point');
     var startLine = document.getElementById('start-line');

index.js

@@ -14,6 +14,7 @@ const Draw = function(options) {
   ctx.api = api;
 
   const setup = runSetup(ctx);
+
   api.addTo = setup.addTo;
   api.remove = setup.remove;
   api.types = Constants.types;

src/events.js

@@ -98,6 +98,18 @@ module.exports = function(ctx) {
     ctx.store.changeZoom();
   };
 
+  events.data = function(event) {
+    if (event.dataType === 'style') {
+      const { setup, map, options, store } = ctx;
+      const hasLayers = !!options.styles.find(style => map.getLayer(style.id));
+      if (!hasLayers) {
+        setup.addLayers();
+        store.setDirty();
+        store.render();
+      }
+    }
+  };
+
   function changeMode(modename, nextModeOptions, eventOptions = {}) {
     currentMode.stop();
 
@@ -149,9 +161,9 @@ module.exports = function(ctx) {
     },
     addEventListeners: function() {
       ctx.map.on('mousemove', events.mousemove);
-
       ctx.map.on('mousedown', events.mousedown);
       ctx.map.on('mouseup', events.mouseup);
+      ctx.map.on('data', events.data);
 
       ctx.container.addEventListener('mouseout', events.mouseout);
 
@@ -162,9 +174,9 @@ module.exports = function(ctx) {
     },
     removeEventListeners: function() {
       ctx.map.off('mousemove', events.mousemove);
-
       ctx.map.off('mousedown', events.mousedown);
       ctx.map.off('mouseup', events.mouseup);
+      ctx.map.on('data', events.data);
 
       ctx.container.removeEventListener('mouseout', events.mouseout);
 

src/setup.js

@@ -86,5 +86,7 @@ module.exports = function(ctx) {
     }
   };
 
+  ctx.setup = setup;
+
   return setup;
 };