From 79fa2b35080ef708a31ddf43fe5e5cdfd8752740 Mon Sep 17 00:00:00 2001 From: orangemug Date: Sun, 19 Jan 2020 13:37:56 +0000 Subject: [PATCH 1/4] Feature to update current map view in OSM --- src/components/App.jsx | 23 ++++++++++++++++++++- src/components/map/MapboxGlMap.jsx | 30 +++++++++++++++++++++++++--- src/components/map/OpenLayersMap.jsx | 24 ++++++++++++++++++++-- src/components/modals/DebugModal.js | 16 +++++++++++++++ 4 files changed, 87 insertions(+), 6 deletions(-) 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 +

+
} } From 4269e4573c4f7af20e8259ffe62cd2eb06c64cd5 Mon Sep 17 00:00:00 2001 From: orangemug Date: Sun, 19 Jan 2020 16:00:29 +0000 Subject: [PATCH 2/4] Fixed lint errors. --- src/components/map/MapboxGlMap.jsx | 1 + src/components/map/OpenLayersMap.jsx | 2 ++ src/components/modals/DebugModal.js | 2 +- 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx index 747e400..bd9e476 100644 --- a/src/components/map/MapboxGlMap.jsx +++ b/src/components/map/MapboxGlMap.jsx @@ -60,6 +60,7 @@ export default class MapboxGlMap extends React.Component { inspectModeEnabled: PropTypes.bool.isRequired, highlightedLayer: PropTypes.object, options: PropTypes.object, + onChange: PropTypes.func.isRequired, } static defaultProps = { diff --git a/src/components/map/OpenLayersMap.jsx b/src/components/map/OpenLayersMap.jsx index d06f2b4..446096a 100644 --- a/src/components/map/OpenLayersMap.jsx +++ b/src/components/map/OpenLayersMap.jsx @@ -32,6 +32,8 @@ export default class OpenLayersMap extends React.Component { style: PropTypes.object, onLayerSelect: PropTypes.func.isRequired, debugToolbox: PropTypes.bool.isRequired, + replaceAccessTokens: PropTypes.func.isRequired, + onChange: PropTypes.func.isRequired, } static defaultProps = { diff --git a/src/components/modals/DebugModal.js b/src/components/modals/DebugModal.js index 18df253..eddeb0c 100644 --- a/src/components/modals/DebugModal.js +++ b/src/components/modals/DebugModal.js @@ -55,7 +55,7 @@ class DebugModal extends React.Component {

Open in OSM From 27e6675d26522f5ecbb49fef07374e320b37f3a1 Mon Sep 17 00:00:00 2001 From: orangemug Date: Sun, 19 Jan 2020 16:30:27 +0000 Subject: [PATCH 3/4] Fix replacing of access tokens in MapboxGl. --- src/components/map/MapboxGlMap.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx index bd9e476..d677212 100644 --- a/src/components/map/MapboxGlMap.jsx +++ b/src/components/map/MapboxGlMap.jsx @@ -60,6 +60,7 @@ export default class MapboxGlMap extends React.Component { inspectModeEnabled: PropTypes.bool.isRequired, highlightedLayer: PropTypes.object, options: PropTypes.object, + replaceAccessTokens: PropTypes.func.isRequired, onChange: PropTypes.func.isRequired, } @@ -90,7 +91,10 @@ export default class MapboxGlMap extends React.Component { //Mapbox GL now does diffing natively so we don't need to calculate //the necessary operations ourselves! - this.state.map.setStyle(props.mapStyle, {diff: true}) + this.state.map.setStyle( + this.props.replaceAccessTokens(props.mapStyle), + {diff: true} + ) } componentDidUpdate(prevProps) { From 0009c7494871f977a5eefc7a50474bca87128634 Mon Sep 17 00:00:00 2001 From: orangemug Date: Sun, 19 Jan 2020 19:09:04 +0000 Subject: [PATCH 4/4] Fixes lat/lon precision and center change via zoom without pan. --- src/components/map/MapboxGlMap.jsx | 29 ++++++++--------------------- src/components/modals/DebugModal.js | 6 +++++- 2 files changed, 13 insertions(+), 22 deletions(-) diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx index d677212..3b04702 100644 --- a/src/components/map/MapboxGlMap.jsx +++ b/src/components/map/MapboxGlMap.jsx @@ -134,14 +134,12 @@ 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}); + const mapViewChange = () => { + const center = map.getCenter(); + const zoom = map.getZoom(); + this.props.onChange({center, zoom}); + } + mapViewChange(); map.showTileBoundaries = mapOpts.showTileBoundaries; map.showCollisionBoxes = mapOpts.showCollisionBoxes; @@ -206,19 +204,8 @@ export default class MapboxGlMap extends React.Component { }); }); - 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(), - }) - }); + map.on("dragend", mapViewChange); + map.on("zoomend", mapViewChange); } render() { diff --git a/src/components/modals/DebugModal.js b/src/components/modals/DebugModal.js index eddeb0c..181983f 100644 --- a/src/components/modals/DebugModal.js +++ b/src/components/modals/DebugModal.js @@ -19,6 +19,10 @@ class DebugModal extends React.Component { render() { const {mapView} = this.props; + const osmZoom = Math.round(mapView.zoom)+1; + const osmLon = Number.parseFloat(mapView.center.lng).toFixed(5); + const osmLat = Number.parseFloat(mapView.center.lat).toFixed(5); + return Open in OSM — Opens the current view on openstreetmap.org