Add back layers and force redraw after map style change

Fixes mapbox#512

index.js

@@ -16,6 +16,8 @@ var Draw = function(options) {
   ctx.api = api;
 
   var setup = Setup(ctx);
+  ctx.setup = setup;
+
   api.addTo = setup.addTo;
   api.remove = setup.remove;
   api.types = Constants.types;

src/events.js

@@ -104,6 +104,20 @@ module.exports = function(ctx) {
     ctx.store.changeZoom();
   };
 
+  events.data = function(event) {
+    if (event.dataType === 'style') {
+      const { setup, api, map, options } = ctx;
+      const hasLayers = !!options.styles.find(style => map.getLayer(style.id));
+      if (!hasLayers) {
+        setup.addLayers();
+        const featureIds = ctx.api.getSelectedIds();
+        const mode = ctx.api.getMode();
+        ctx.api.changeMode(Constants.modes.STATIC);
+        ctx.api.changeMode(mode, { featureIds });
+      }
+    }
+  };
+
   function changeMode(modename, nextModeOptions, eventOptions = {}) {
     currentMode.stop();
 
@@ -155,9 +169,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);
 
@@ -168,9 +182,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);