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,11 +1,6 @@
 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 = {
@@ -27,92 +22,3 @@ export class Map extends React.Component {
     }}></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

@@ -42,6 +42,9 @@ module.exports = {
         //"react-icons",
         "react-motion",
         "rebass",
+        // Open Layers
+        'openlayers',
+        'ol-mapbox-style'
     ]
   },
   output: {