schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-27 09:05:25 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix displaying OL3

Browse source
This commit is contained in:
Lukas Martinelli 2016-12-22 20:26:47 +01:00
parent 5246b611a1
commit 5d68867840
1 changed files with 31 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
src/components/map/OpenLayers3Map.jsx
View file

@ -5,16 +5,25 @@ import style from '../../libs/style.js'
class OpenLayers3Map extends Map {
constructor(props) {
super(props)
}
this.state = {
map: null,
ol: null,
olms: null
}
componentWillReceiveProps(nextProps) {
require.ensure(["openlayers", "ol-mapbox-style"], ()=> {
const ol = require('openlayers')
const olms = require('ol-mapbox-style')
const jsonStyle = nextProps.mapStyle
const styleFunc = olms.getStyleFunction(jsonStyle, 'openmaptiles', this.resolutions)
this.layer.setStyle(styleFunc)
this.state.map.render()
})
}
componentDidMount() {
//Load OpenLayers dynamically once we need it
//TODO: Make this more convenient
require.ensure(["openlayers", "ol-mapbox-style"], ()=> {
console.log('Loaded OpenLayers3 renderer')
const ol = require('openlayers')
const olms = require('ol-mapbox-style')
@ -22,55 +31,32 @@ class OpenLayers3Map extends Map {
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>',
attributions: '© <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'
url: 'https://free-0.tilehosting.com/data/v3/{z}/{x}/{y}.pbf?key=tXiQqN3lIgskyDErJCeY'
})
})
this.setState({
ol: ol,
olms: olms,
const jsonStyle = this.props.mapStyle
const styleFunc = olms.getStyleFunction(jsonStyle, 'openmaptiles', this.resolutions)
this.layer.setStyle(styleFunc)
console.log(jsonStyle.center, jsonStyle.zoom)
const map = new ol.Map({
target: this.container,
layers: [this.layer],
view: new ol.View({
center: jsonStyle.center,
zoom: 2,
//zoom: jsonStyle.zoom,
})
})
console.log('Loaded OpenLayers3 renderer')
map.addControl(new ol.control.Zoom());
this.setState({ map });
})
}
componentWillReceiveProps(nextProps) {
const olms = this.state.olms
const ol = this.state.ol
if(!olms || !ol) return
const jsonStyle = style.toJSON(nextProps.mapStyle)
const styleFunc = olms.getStyleFunction(jsonStyle, 'mapbox', this.resolutions)
this.layer.setStyle(styleFunc)
this.state.map.render()
}
componentDidMount() {
const olms = this.state.olms
const ol = this.state.ol
if(!olms || !ol) return
const jsonStyle = style.toJSON(this.props.mapStyle)
const styleFunc = olms.getStyleFunction(jsonStyle, 'mapbox', this.resolutions)
this.layer.setStyle(styleFunc)
const map = new ol.Map({
target: this.container,
layers: [this.layer],
view: new ol.View({
center: jsonStyle.center,
zoom: jsonStyle.zoom,
})
})
map.addControl(new ol.control.Zoom());
this.setState({ map });
}
}
export default OpenLayers3Map