mirror of
https://github.com/a-nyx/maputnik-with-pmtiles.git
synced 2024-12-27 09:15:29 +01:00
Split OL3 and GL map into separate files
This commit is contained in:
lukasmartinelli
parent
6288fa51d4
commit
d5b5261c1d
6 changed files with 196 additions and 200 deletions
|
|
@ -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
|
||||
|
|
@ -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}
|
||||
/>
|
||||
|
|
|
|||
53
src/gl.jsx
Normal file
53
src/gl.jsx
Normal file
|
|
@ -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 });
|
||||
});
|
||||
}
|
||||
}
|
||||
124
src/map.jsx
124
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 = {
|
||||
mapStyle: React.PropTypes.instanceOf(Immutable.Map).isRequired,
|
||||
accessToken: React.PropTypes.string,
|
||||
}
|
||||
static propTypes = {
|
||||
mapStyle: React.PropTypes.instanceOf(Immutable.Map).isRequired,
|
||||
accessToken: React.PropTypes.string,
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps, nextState) {
|
||||
//TODO: If we enable this React mixin for immutable comparison we can remove this?
|
||||
return nextProps.mapStyle !== this.props.mapStyle
|
||||
}
|
||||
shouldComponentUpdate(nextProps, nextState) {
|
||||
//TODO: If we enable this React mixin for immutable comparison we can remove this?
|
||||
return nextProps.mapStyle !== this.props.mapStyle
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div
|
||||
ref={x => this.container = x}
|
||||
style={{
|
||||
...fullHeight,
|
||||
width: "100%",
|
||||
}}></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 });
|
||||
});
|
||||
render() {
|
||||
return <div
|
||||
ref={x => this.container = x}
|
||||
style={{
|
||||
...fullHeight,
|
||||
width: "100%",
|
||||
}}></div>
|
||||
}
|
||||
}
|
||||
|
||||
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 });
|
||||
}
|
||||
}
|
||||
|
|
|
|||
48
src/ol3.jsx
Normal file
48
src/ol3.jsx
Normal file
|
|
@ -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 });
|
||||
}
|
||||
}
|
||||
|
|
@ -8,88 +8,91 @@ var WebpackCleanupPlugin = require('webpack-cleanup-plugin');
|
|||
|
||||
// local css modules
|
||||
loaders.push({
|
||||
test: /[\/\\]src[\/\\].*\.css/,
|
||||
loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
|
||||
test: /[\/\\]src[\/\\].*\.css/,
|
||||
loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
|
||||
});
|
||||
|
||||
// local scss modules
|
||||
loaders.push({
|
||||
test: /[\/\\]src[\/\\].*\.scss/,
|
||||
loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]', 'sass')
|
||||
test: /[\/\\]src[\/\\].*\.scss/,
|
||||
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$/,
|
||||
loader: ExtractTextPlugin.extract('style', 'css')
|
||||
test: /[\/\\](node_modules|global)[\/\\].*\.css$/,
|
||||
loader: ExtractTextPlugin.extract('style', 'css')
|
||||
});
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
app: './src/index.jsx',
|
||||
vendor: [
|
||||
'file-saver',
|
||||
'immutable',
|
||||
'mapbox-gl',
|
||||
//TODO: Cannot resolve migrations file?
|
||||
//"mapbox-gl-style-spec",
|
||||
"randomcolor",
|
||||
'react',
|
||||
"react-collapse",
|
||||
"react-dom",
|
||||
"react-file-reader-input",
|
||||
"react-height",
|
||||
//TODO: Icons raise multi vendor errors?
|
||||
//"react-icons",
|
||||
"react-motion",
|
||||
"rebass",
|
||||
]
|
||||
},
|
||||
output: {
|
||||
path: path.join(__dirname, 'public'),
|
||||
filename: '[chunkhash].app.js'
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'webworkify': 'webworkify-webpack',
|
||||
},
|
||||
extensions: ['', '.js', '.jsx']
|
||||
},
|
||||
module: {
|
||||
loaders,
|
||||
postLoaders: [{
|
||||
include: /node_modules\/mapbox-gl-shaders/,
|
||||
loader: 'transform',
|
||||
query: 'brfs'
|
||||
}]
|
||||
},
|
||||
node: {
|
||||
fs: "empty"
|
||||
},
|
||||
plugins: [
|
||||
new webpack.NoErrorsPlugin(),
|
||||
new webpack.optimize.CommonsChunkPlugin('vendor', '[chunkhash].vendor.js'),
|
||||
new WebpackCleanupPlugin(),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
NODE_ENV: '"production"'
|
||||
}
|
||||
}),
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: {
|
||||
warnings: false,
|
||||
screw_ie8: true,
|
||||
drop_console: true,
|
||||
drop_debugger: true
|
||||
}
|
||||
}),
|
||||
new webpack.optimize.OccurenceOrderPlugin(),
|
||||
new ExtractTextPlugin('[contenthash].css', {
|
||||
allChunks: true
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
template: './src/template.html',
|
||||
title: 'Maputnik'
|
||||
}),
|
||||
new webpack.optimize.DedupePlugin()
|
||||
]
|
||||
entry: {
|
||||
app: './src/index.jsx',
|
||||
vendor: [
|
||||
'file-saver',
|
||||
'immutable',
|
||||
'mapbox-gl',
|
||||
//TODO: Cannot resolve migrations file?
|
||||
//"mapbox-gl-style-spec",
|
||||
"randomcolor",
|
||||
'react',
|
||||
"react-collapse",
|
||||
"react-dom",
|
||||
"react-file-reader-input",
|
||||
"react-height",
|
||||
//TODO: Icons raise multi vendor errors?
|
||||
//"react-icons",
|
||||
"react-motion",
|
||||
"rebass",
|
||||
// Open Layers
|
||||
'openlayers',
|
||||
'ol-mapbox-style'
|
||||
]
|
||||
},
|
||||
output: {
|
||||
path: path.join(__dirname, 'public'),
|
||||
filename: '[chunkhash].app.js'
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'webworkify': 'webworkify-webpack',
|
||||
},
|
||||
extensions: ['', '.js', '.jsx']
|
||||
},
|
||||
module: {
|
||||
loaders,
|
||||
postLoaders: [{
|
||||
include: /node_modules\/mapbox-gl-shaders/,
|
||||
loader: 'transform',
|
||||
query: 'brfs'
|
||||
}]
|
||||
},
|
||||
node: {
|
||||
fs: "empty"
|
||||
},
|
||||
plugins: [
|
||||
new webpack.NoErrorsPlugin(),
|
||||
new webpack.optimize.CommonsChunkPlugin('vendor', '[chunkhash].vendor.js'),
|
||||
new WebpackCleanupPlugin(),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
NODE_ENV: '"production"'
|
||||
}
|
||||
}),
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: {
|
||||
warnings: false,
|
||||
screw_ie8: true,
|
||||
drop_console: true,
|
||||
drop_debugger: true
|
||||
}
|
||||
}),
|
||||
new webpack.optimize.OccurenceOrderPlugin(),
|
||||
new ExtractTextPlugin('[contenthash].css', {
|
||||
allChunks: true
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
template: './src/template.html',
|
||||
title: 'Maputnik'
|
||||
}),
|
||||
new webpack.optimize.DedupePlugin()
|
||||
]
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue