Split OL3 and GL map into separate files

.editorconfig

@@ -1,15 +0,0 @@
-root = true
-
-# Unix-style newlines with a newline ending every file
-[*]
-end_of_line = lf
-insert_final_newline = true
-
-
-# Matches multiple files with brace expansion notation
-# Set default charset
-[*.{js,jsx,html,sass}]
-charset = utf-8
-indent_style = tab
-indent_size = 2
-trim_trailing_whitespace = true

src/app.jsx

@@ -6,7 +6,8 @@ import Container from 'rebass/dist/Container'
 import Block from 'rebass/dist/Block'
 import Fixed from 'rebass/dist/Fixed'
 
-import { MapboxGlMap, OpenLayer3Map } from './map.jsx'
+import { MapboxGlMap } from './gl.jsx'
+import { OpenLayers3Map } from './ol3.jsx'
 import {Toolbar} from './toolbar.jsx'
 import style from './style.js'
 import { loadDefaultStyle, SettingsStore, StyleStore } from './stylestore.js'
@@ -110,7 +111,7 @@ export default class App extends React.Component {
 				accessToken={this.state.accessToken}
 				onAccessTokenChanged={this.onAccessTokenChanged.bind(this)}
 			/>
-			<OpenLayer3Map
+			<OpenLayers3Map
 				mapStyle={this.state.currentStyle}
 				accessToken={this.state.accessToken}
 			/>

src/gl.jsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import MapboxGl from 'mapbox-gl';
+import { fullHeight } from './theme.js'
+import style from './style.js'
+import { Map } from './map.jsx'
+import Immutable from 'immutable'
+import validateColor from 'mapbox-gl-style-spec/lib/validate/validate_color'
+
+export class MapboxGlMap extends Map {
+  componentWillReceiveProps(nextProps) {
+    const tokenChanged = nextProps.accessToken !== MapboxGl.accessToken
+
+    // If the id has changed a new style has been uplaoded and
+    // it is safer to do a full new render
+    // TODO: might already be handled in diff algorithm?
+    const mapIdChanged = this.props.mapStyle.get('id') !== nextProps.mapStyle.get('id')
+
+    if(mapIdChanged || tokenChanged) {
+      this.state.map.setStyle(style.toJSON(nextProps.mapStyle))
+      return
+    }
+
+    // TODO: If there is no map yet we need to apply the changes later?
+    if(this.state.map) {
+      style.diffStyles(this.props.mapStyle, nextProps.mapStyle).forEach(change => {
+
+        //TODO: Invalid outline color can cause map to freeze?
+        if(change.command === "setPaintProperty" && change.args[1] === "fill-outline-color" ) {
+          const value = change.args[2]
+          if(validateColor({value}).length > 0) {
+            return
+          }
+        }
+
+        console.log(change.command, ...change.args)
+        this.state.map[change.command].apply(this.state.map, change.args);
+      });
+    }
+  }
+
+  componentDidMount() {
+    MapboxGl.accessToken = this.props.accessToken
+
+    const map = new MapboxGl.Map({
+      container: this.container,
+      style: style.toJSON(this.props.mapStyle),
+    });
+
+    map.on("style.load", (...args) => {
+      this.setState({ map });
+    });
+  }
+}

src/map.jsx

@@ -1,118 +1,24 @@
 import React from 'react'
-import MapboxGl from 'mapbox-gl';
 import { fullHeight } from './theme.js'
-import style from './style.js'
 import Immutable from 'immutable'
-import validateColor from 'mapbox-gl-style-spec/lib/validate/validate_color'
-import ol from 'openlayers'
-import olms from 'ol-mapbox-style'
 
 export class Map extends React.Component {
-	static propTypes = {
+  static propTypes = {
-		mapStyle: React.PropTypes.instanceOf(Immutable.Map).isRequired,
+    mapStyle: React.PropTypes.instanceOf(Immutable.Map).isRequired,
-		accessToken: React.PropTypes.string,
+    accessToken: React.PropTypes.string,
-	}
+  }
 
-	shouldComponentUpdate(nextProps, nextState) {
+  shouldComponentUpdate(nextProps, nextState) {
-		//TODO: If we enable this React mixin for immutable comparison we can remove this?
+    //TODO: If we enable this React mixin for immutable comparison we can remove this?
-		return nextProps.mapStyle !== this.props.mapStyle
+    return nextProps.mapStyle !== this.props.mapStyle
-	}
+  }
 
-	render() {
+  render() {
-		return <div
+    return <div
-		ref={x => this.container = x}
+    ref={x => this.container = x}
-		style={{
+    style={{
-			...fullHeight,
+      ...fullHeight,
-			width: "100%",
+      width: "100%",
-		}}></div>
+    }}></div>
-	}
-}
-
-export class MapboxGlMap extends Map {
-	componentWillReceiveProps(nextProps) {
-		const tokenChanged = nextProps.accessToken !== MapboxGl.accessToken
-
-		// If the id has changed a new style has been uplaoded and
-		// it is safer to do a full new render
-		// TODO: might already be handled in diff algorithm?
-		const mapIdChanged = this.props.mapStyle.get('id') !== nextProps.mapStyle.get('id')
-
-		if(mapIdChanged || tokenChanged) {
-			this.state.map.setStyle(style.toJSON(nextProps.mapStyle))
-			return
-		}
-
-		// TODO: If there is no map yet we need to apply the changes later?
-		if(this.state.map) {
-			style.diffStyles(this.props.mapStyle, nextProps.mapStyle).forEach(change => {
-
-				//TODO: Invalid outline color can cause map to freeze?
-				if(change.command === "setPaintProperty" && change.args[1] === "fill-outline-color" ) {
-					const value = change.args[2]
-					if(validateColor({value}).length > 0) {
-						return
-					}
-				}
-
-				console.log(change.command, ...change.args)
-				this.state.map[change.command].apply(this.state.map, change.args);
-			});
-		}
-	}
-
-	componentDidMount() {
-		MapboxGl.accessToken = this.props.accessToken
-
-		const map = new MapboxGl.Map({
-			container: this.container,
-			style: style.toJSON(this.props.mapStyle),
-		});
-
-		map.on("style.load", (...args) => {
-			this.setState({ map });
-		});
   }
 }
-
-export class OpenLayer3Map extends Map {
-	constructor(props) {
-		super(props)
-
-		const tilegrid = ol.tilegrid.createXYZ({tileSize: 512, maxZoom: 22})
-		this.resolutions = tilegrid.getResolutions()
-		this.layer = new ol.layer.VectorTile({
-			source: new ol.source.VectorTile({
-				attributions: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
-					'© <a href="http://www.openstreetmap.org/copyright">' +
-					'OpenStreetMap contributors</a>',
-				format: new ol.format.MVT(),
-				tileGrid: tilegrid,
-				tilePixelRatio: 8,
-				url: 'http://osm2vectortiles-0.tileserver.com/v2/{z}/{x}/{y}.pbf'
-			})
-		})
-	}
-
-	componentWillReceiveProps(nextProps) {
-		const jsonStyle = style.toJSON(nextProps.mapStyle)
-		const styleFunc = olms.getStyleFunction(jsonStyle, 'mapbox', this.resolutions)
-		this.layer.setStyle(styleFunc)
-		this.state.map.render()
-	}
-
-
-	componentDidMount() {
-		const styleFunc = olms.getStyleFunction(style.toJSON(this.props.mapStyle), 'mapbox', this.resolutions)
-		this.layer.setStyle(styleFunc)
-
-		const map = new ol.Map({
-		target: this.container,
-			layers: [this.layer],
-			view: new ol.View({
-				center: [949282, 6002552],
-				zoom: 4
-			})
-		})
-		this.setState({ map });
-	}
-}

src/ol3.jsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import style from './style.js'
+import { Map } from './map.jsx'
+import ol from 'openlayers'
+import olms from 'ol-mapbox-style'
+
+export class OpenLayers3Map extends Map {
+  constructor(props) {
+    super(props)
+
+    const tilegrid = ol.tilegrid.createXYZ({tileSize: 512, maxZoom: 22})
+    this.resolutions = tilegrid.getResolutions()
+    this.layer = new ol.layer.VectorTile({
+      source: new ol.source.VectorTile({
+        attributions: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
+          '© <a href="http://www.openstreetmap.org/copyright">' +
+          'OpenStreetMap contributors</a>',
+        format: new ol.format.MVT(),
+        tileGrid: tilegrid,
+        tilePixelRatio: 8,
+        url: 'http://osm2vectortiles-0.tileserver.com/v2/{z}/{x}/{y}.pbf'
+      })
+    })
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const jsonStyle = style.toJSON(nextProps.mapStyle)
+    const styleFunc = olms.getStyleFunction(jsonStyle, 'mapbox', this.resolutions)
+    this.layer.setStyle(styleFunc)
+    this.state.map.render()
+  }
+
+
+  componentDidMount() {
+    const styleFunc = olms.getStyleFunction(style.toJSON(this.props.mapStyle), 'mapbox', this.resolutions)
+    this.layer.setStyle(styleFunc)
+
+    const map = new ol.Map({
+    target: this.container,
+      layers: [this.layer],
+      view: new ol.View({
+        center: [949282, 6002552],
+        zoom: 4
+      })
+    })
+    this.setState({ map });
+  }
+}

webpack.production.config.js

@@ -8,88 +8,91 @@ var WebpackCleanupPlugin = require('webpack-cleanup-plugin');
 
 // local css modules
 loaders.push({
-	test: /[\/\\]src[\/\\].*\.css/,
+  test: /[\/\\]src[\/\\].*\.css/,
-	loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
+  loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
 });
 
 // local scss modules
 loaders.push({
-	test: /[\/\\]src[\/\\].*\.scss/,
+  test: /[\/\\]src[\/\\].*\.scss/,
-	loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]', 'sass')
+  loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]', 'sass')
 });
 // global css files
 loaders.push({
-	test: /[\/\\](node_modules|global)[\/\\].*\.css$/,
+  test: /[\/\\](node_modules|global)[\/\\].*\.css$/,
-	loader: ExtractTextPlugin.extract('style', 'css')
+  loader: ExtractTextPlugin.extract('style', 'css')
 });
 
 module.exports = {
-	entry: {
+  entry: {
-		app: './src/index.jsx',
+    app: './src/index.jsx',
-		vendor: [
+    vendor: [
-				'file-saver',
+        'file-saver',
-				'immutable',
+        'immutable',
-				'mapbox-gl',
+        'mapbox-gl',
-				//TODO: Cannot resolve migrations file?
+        //TODO: Cannot resolve migrations file?
-				//"mapbox-gl-style-spec",
+        //"mapbox-gl-style-spec",
-				"randomcolor",
+        "randomcolor",
-				'react',
+        'react',
-				"react-collapse",
+        "react-collapse",
-				"react-dom",
+        "react-dom",
-				"react-file-reader-input",
+        "react-file-reader-input",
-				"react-height",
+        "react-height",
-				//TODO: Icons raise multi vendor errors?
+        //TODO: Icons raise multi vendor errors?
-				//"react-icons",
+        //"react-icons",
-				"react-motion",
+        "react-motion",
-				"rebass",
+        "rebass",
-		]
+        // Open Layers
-	},
+        'openlayers',
-	output: {
+        'ol-mapbox-style'
-		path: path.join(__dirname, 'public'),
+    ]
-		filename: '[chunkhash].app.js'
+  },
-	},
+  output: {
-	resolve: {
+    path: path.join(__dirname, 'public'),
-		alias: {
+    filename: '[chunkhash].app.js'
-			'webworkify': 'webworkify-webpack',
+  },
-		},
+  resolve: {
-		extensions: ['', '.js', '.jsx']
+    alias: {
-	},
+      'webworkify': 'webworkify-webpack',
-	module: {
+    },
-		loaders,
+    extensions: ['', '.js', '.jsx']
-		postLoaders: [{
+  },
-			include: /node_modules\/mapbox-gl-shaders/,
+  module: {
-			loader: 'transform',
+    loaders,
-			query: 'brfs'
+    postLoaders: [{
-		}]
+      include: /node_modules\/mapbox-gl-shaders/,
-	},
+      loader: 'transform',
-	node: {
+      query: 'brfs'
-		fs: "empty"
+    }]
-	},
+  },
-	plugins: [
+  node: {
-		new webpack.NoErrorsPlugin(),
+    fs: "empty"
-		new webpack.optimize.CommonsChunkPlugin('vendor', '[chunkhash].vendor.js'),
+  },
-		new WebpackCleanupPlugin(),
+  plugins: [
-		new webpack.DefinePlugin({
+    new webpack.NoErrorsPlugin(),
-			'process.env': {
+    new webpack.optimize.CommonsChunkPlugin('vendor', '[chunkhash].vendor.js'),
-				NODE_ENV: '"production"'
+    new WebpackCleanupPlugin(),
-			}
+    new webpack.DefinePlugin({
-		}),
+      'process.env': {
-		new webpack.optimize.UglifyJsPlugin({
+        NODE_ENV: '"production"'
-			compress: {
+      }
-				warnings: false,
+    }),
-				screw_ie8: true,
+    new webpack.optimize.UglifyJsPlugin({
-				drop_console: true,
+      compress: {
-				drop_debugger: true
+        warnings: false,
-			}
+        screw_ie8: true,
-		}),
+        drop_console: true,
-		new webpack.optimize.OccurenceOrderPlugin(),
+        drop_debugger: true
-		new ExtractTextPlugin('[contenthash].css', {
+      }
-			allChunks: true
+    }),
-		}),
+    new webpack.optimize.OccurenceOrderPlugin(),
-		new HtmlWebpackPlugin({
+    new ExtractTextPlugin('[contenthash].css', {
-			template: './src/template.html',
+      allChunks: true
-			title: 'Maputnik'
+    }),
-		}),
+    new HtmlWebpackPlugin({
-		new webpack.optimize.DedupePlugin()
+      template: './src/template.html',
-	]
+      title: 'Maputnik'
+    }),
+    new webpack.optimize.DedupePlugin()
+  ]
 };