diff --git a/src/components/App.jsx b/src/components/App.jsx index e816eaa..47f57b1 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -212,6 +212,13 @@ export default class App extends React.Component { vectorLayers: {}, mapState: "map", spec: latest, + mapView: { + zoom: 0, + center: { + lng: 0, + lat: 0, + }, + }, isOpen: { settings: false, sources: false, @@ -531,11 +538,22 @@ export default class App extends React.Component { return metadata['maputnik:renderer'] || 'mbgljs'; } + onMapChange = (mapView) => { + this.setState({ + mapView, + }); + } + mapRenderer() { const metadata = this.state.mapStyle.metadata || {}; const mapProps = { - mapStyle: style.replaceAccessTokens(this.state.mapStyle, {allowFallback: true}), + mapStyle: this.state.mapStyle, + replaceAccessTokens: (mapStyle) => { + return style.replaceAccessTokens(mapStyle, { + allowFallback: true + }); + }, onDataChange: (e) => { this.layerWatcher.analyzeMap(e.map) this.fetchSources(); @@ -550,11 +568,13 @@ export default class App extends React.Component { if(renderer === 'ol') { mapElement = } else { mapElement = this.shortcutEl = el} diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx index 794dbc7..747e400 100644 --- a/src/components/map/MapboxGlMap.jsx +++ b/src/components/map/MapboxGlMap.jsx @@ -66,6 +66,7 @@ export default class MapboxGlMap extends React.Component { onMapLoaded: () => {}, onDataChange: () => {}, onLayerSelect: () => {}, + onChange: () => {}, mapboxAccessToken: tokens.mapbox, options: {}, } @@ -128,12 +129,21 @@ export default class MapboxGlMap extends React.Component { const map = new MapboxGl.Map(mapOpts); + const center = map.getCenter(); + const zoom = map.getZoom(); + + this.setState({ + center, + zoom, + }); + this.props.onChange({center, zoom}); + map.showTileBoundaries = mapOpts.showTileBoundaries; map.showCollisionBoxes = mapOpts.showCollisionBoxes; map.showOverdrawInspector = mapOpts.showOverdrawInspector; - const zoom = new ZoomControl; - map.addControl(zoom, 'top-right'); + const zoomControl = new ZoomControl; + map.addControl(zoomControl, 'top-right'); const nav = new MapboxGl.NavigationControl({visualizePitch:true}); map.addControl(nav, 'top-right'); @@ -189,7 +199,21 @@ export default class MapboxGlMap extends React.Component { this.setState({ zoom: map.getZoom() }); - }) + }); + + map.on("dragend", e => { + this.props.onChange({ + center: map.getCenter(), + zoom: this.state.zoom, + }) + }); + + map.on("zoomend", e => { + this.props.onChange({ + center: this.state.center, + zoom: map.getZoom(), + }) + }); } render() { diff --git a/src/components/map/OpenLayersMap.jsx b/src/components/map/OpenLayersMap.jsx index b1ee83a..d06f2b4 100644 --- a/src/components/map/OpenLayersMap.jsx +++ b/src/components/map/OpenLayersMap.jsx @@ -61,7 +61,9 @@ export default class OpenLayersMap extends React.Component { componentDidUpdate(prevProps) { if (this.props.mapStyle !== prevProps.mapStyle) { - this.updateStyle(this.props.mapStyle); + this.updateStyle( + this.props.replaceAccessTokens(this.props.mapStyle) + ); } } @@ -93,6 +95,22 @@ export default class OpenLayersMap extends React.Component { }) }) + const onMoveEnd = () => { + const zoom = map.getView().getZoom(); + const center = toLonLat(map.getView().getCenter()); + + this.props.onChange({ + zoom, + center: { + lng: center[0], + lat: center[1], + }, + }); + } + + onMoveEnd(); + map.on('moveend', onMoveEnd); + map.on('postrender', (evt) => { const center = toLonLat(map.getView().getCenter()); this.setState({ @@ -108,7 +126,9 @@ export default class OpenLayersMap extends React.Component { this.map = map; - this.updateStyle(this.props.mapStyle); + this.updateStyle( + this.props.replaceAccessTokens(this.props.mapStyle) + ); } closeOverlay = (e) => { diff --git a/src/components/modals/DebugModal.js b/src/components/modals/DebugModal.js index 91bf47c..18df253 100644 --- a/src/components/modals/DebugModal.js +++ b/src/components/modals/DebugModal.js @@ -13,9 +13,12 @@ class DebugModal extends React.Component { onOpenToggle: PropTypes.func.isRequired, mapboxGlDebugOptions: PropTypes.object, openlayersDebugOptions: PropTypes.object, + mapView: PropTypes.object, } render() { + const {mapView} = this.props; + return
+

Options

{this.props.renderer === 'mbgljs' &&
    {Object.entries(this.props.mapboxGlDebugOptions).map(([key, val]) => { @@ -46,6 +50,18 @@ class DebugModal extends React.Component {
}
+
+

Links

+

+ + Open in OSM + — Opens the current view on openstreetmap.org +

+
} }