diff --git a/examples/reuse-map/README.md b/examples/reuse-map/README.md
new file mode 100644
index 00000000..71a79268
--- /dev/null
+++ b/examples/reuse-map/README.md
@@ -0,0 +1,7 @@
+
+
+
+
+ Toggle Map
+
+ {showMap &&
}
+
{name}
+
+ );
+ }
+
+ render() {
+ const {viewport, settings} = this.state;
+ return (
+
+
+ { bartStations.map(this._renderMarker) }
+
+ );
+ }
+
+}
diff --git a/examples/reuse-map/src/marker-style.js b/examples/reuse-map/src/marker-style.js
new file mode 100644
index 00000000..ab6546eb
--- /dev/null
+++ b/examples/reuse-map/src/marker-style.js
@@ -0,0 +1,30 @@
+export default `
+.station:before {
+ content: ' ';
+ display: inline-block;
+ width: 8px;
+ height: 8px;
+ background: red;
+ border-radius: 8px;
+ margin: 0 8px;
+}
+.station {
+ border-radius: 20px;
+ padding-right: 12px;
+ margin: -12px;
+ color: transparent;
+ line-height: 24px;
+ font-size: 13px;
+ white-space: nowrap;
+}
+.station span {
+ display: none;
+}
+.station:hover {
+ background: rgba(0,0,0,0.8);
+ color: #fff;
+}
+.station:hover span {
+ display: inline-block;
+}
+`;
diff --git a/examples/reuse-map/src/root.js b/examples/reuse-map/src/root.js
new file mode 100644
index 00000000..715cac95
--- /dev/null
+++ b/examples/reuse-map/src/root.js
@@ -0,0 +1,6 @@
+/* global document */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './app';
+
+ReactDOM.render(, document.body.appendChild(document.createElement('div')));
diff --git a/examples/reuse-map/webpack.config.js b/examples/reuse-map/webpack.config.js
new file mode 100644
index 00000000..1a53c5fd
--- /dev/null
+++ b/examples/reuse-map/webpack.config.js
@@ -0,0 +1,57 @@
+// NOTE: To use this example standalone (e.g. outside of deck.gl repo)
+// delete the local development overrides at the bottom of this file
+
+// avoid destructuring for older Node version support
+const resolve = require('path').resolve;
+const webpack = require('webpack');
+
+// Otherwise modules imported from outside this directory does not compile.
+// Also needed if modules from this directory were imported elsewhere
+// Seems to be a Babel bug
+// https://github.com/babel/babel-loader/issues/149#issuecomment-191991686
+const BABEL_CONFIG = {
+ presets: [
+ 'es2015',
+ 'react',
+ 'stage-2'
+ ].map(function configMap(name) {
+ return require.resolve(`babel-preset-${name}`);
+ })
+};
+
+const config = {
+ entry: {
+ app: resolve('./src/root.js')
+ },
+
+ devtool: 'source-map',
+
+ module: {
+ rules: [{
+ // Compile ES2015 using bable
+ test: /\.js$/,
+ include: [resolve('.')],
+ exclude: [/node_modules/],
+ use: [{
+ loader: 'babel-loader',
+ options: BABEL_CONFIG
+ }]
+ }]
+ },
+
+ resolve: {
+ alias: {
+ // From mapbox-gl-js README. Required for non-browserify bundlers (e.g. webpack):
+ 'mapbox-gl$': resolve('./node_modules/mapbox-gl/dist/mapbox-gl.js')
+ }
+ },
+
+ // Optional: Enables reading mapbox token from environment variable
+ plugins: [
+ new webpack.EnvironmentPlugin(['MapboxAccessToken'])
+ ]
+};
+
+// Enables bundling against src in this repo rather than the installed version
+module.exports = env => env && env.local ?
+ require('../webpack.config.local')(config)(env) : config;
diff --git a/src/mapbox/mapbox.js b/src/mapbox/mapbox.js
index c4537866..b31c7cc6 100644
--- a/src/mapbox/mapbox.js
+++ b/src/mapbox/mapbox.js
@@ -33,8 +33,7 @@ function noop() {}
const propTypes = {
// Creation parameters
- // container: PropTypes.DOMElement || String
-
+ container: PropTypes.object, /** The container to have the map. */
mapboxApiAccessToken: PropTypes.string, /** Mapbox API access token for Mapbox tiles/styles. */
attributionControl: PropTypes.bool, /** Show attribution control or not. */
preserveDrawingBuffer: PropTypes.bool, /** Useful when you want to export the canvas as a PNG. */
@@ -163,6 +162,17 @@ export default class Mapbox {
// Reuse a saved map, if available
if (props.reuseMaps && Mapbox.savedMap) {
this._map = this.map = Mapbox.savedMap;
+ // When reusing the saved map, we need to reparent the map(canvas) and other child nodes
+ // intoto the new container from the props.
+ // Step1: reparenting child nodes from old container to new container
+ const oldContainer = this._map.getContainer();
+ const newContainer = props.container;
+ newContainer.classList.add('mapboxgl-map');
+ while (oldContainer.childNodes.length > 0) {
+ newContainer.appendChild(oldContainer.childNodes[0]);
+ }
+ // Step2: replace the internal container with new container from the react component
+ this._map._container = newContainer;
Mapbox.savedMap = null;
// TODO - need to call onload again, need to track with Promise?
props.onLoad();