From c363c88f23d6947a87e2a77dc8855e202e5db06f Mon Sep 17 00:00:00 2001 From: Lukas Martinelli Date: Sun, 8 Jan 2017 22:03:21 +0100 Subject: [PATCH] Use Mapbox GL Inspect --- package.json | 1 + src/components/App.jsx | 14 +++-- src/components/Toolbar.jsx | 20 +------ src/components/map/FeaturePropertyPopup.jsx | 1 - src/components/map/MapboxGlMap.jsx | 59 +++++++++++++-------- src/components/modals/SettingsModal.jsx | 1 - src/mapboxgl.css | 9 ++++ 7 files changed, 57 insertions(+), 48 deletions(-) diff --git a/package.json b/package.json index 9db5d6a..acfc002 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "lodash.throttle": "^4.1.1", "lodash.topairs": "^4.3.0", "mapbox-gl": "^0.29.0", + "mapbox-gl-inspect": "^1.0.2", "mapbox-gl-style-spec": "^8.11.0", "mousetrap": "^1.6.0", "ol-mapbox-style": "0.0.11", diff --git a/src/components/App.jsx b/src/components/App.jsx index 76fdca5..27a10cc 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -52,6 +52,7 @@ export default class App extends React.Component { selectedLayerIndex: 0, sources: {}, vectorLayers: {}, + inspectModeEnabled: false, } this.layerWatcher = new LayerWatcher({ @@ -149,6 +150,12 @@ export default class App extends React.Component { this.onLayersChange(changedLayers) } + changeInspectMode() { + this.setState({ + inspectModeEnabled: !this.state.inspectModeEnabled + }) + } + mapRenderer() { const metadata = this.state.mapStyle.metadata || {} const mapProps = { @@ -169,12 +176,8 @@ export default class App extends React.Component { // Check if OL3 code has been loaded? if(renderer === 'ol3') { return - } else if(renderer === 'inspection') { - return } else { - return + return } } @@ -194,6 +197,7 @@ export default class App extends React.Component { onStyleChanged={this.onStyleChanged.bind(this)} onStyleOpen={this.onStyleChanged.bind(this)} onStyleDownload={this.onStyleDownload.bind(this)} + onInspectModeToggle={this.changeInspectMode.bind(this)} /> const layerList = } - toggleInspectionMode() { - const metadata = this.props.mapStyle.metadata || {} - const currentRenderer = metadata['maputnik:renderer'] || 'mbgljs' - - const changedRenderer = currentRenderer === 'inspection' ? 'mbgljs' : 'inspection' - - const changedStyle = { - ...this.props.mapStyle, - metadata: { - ...this.props.mapStyle.metadata, - 'maputnik:renderer': changedRenderer - } - } - - this.props.onStyleChanged(changedStyle) - } - toggleModal(modalName) { this.setState({ isOpen: { @@ -194,7 +178,7 @@ export default class Toolbar extends React.Component { Style Settings - + Inspect diff --git a/src/components/map/FeaturePropertyPopup.jsx b/src/components/map/FeaturePropertyPopup.jsx index e6e41e0..e61c1b5 100644 --- a/src/components/map/FeaturePropertyPopup.jsx +++ b/src/components/map/FeaturePropertyPopup.jsx @@ -24,7 +24,6 @@ const Panel = (props) => { } function renderFeature(feature) { - console.log(feature) return
{feature.layer['source-layer']} {renderProperties(feature)} diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx index 0a2eef8..c56af10 100644 --- a/src/components/map/MapboxGlMap.jsx +++ b/src/components/map/MapboxGlMap.jsx @@ -1,24 +1,33 @@ import React from 'react' import ReactDOM from 'react-dom' import MapboxGl from 'mapbox-gl/dist/mapbox-gl.js' +import MapboxInspect from 'mapbox-gl-inspect' import FeatureLayerTable from './FeatureLayerTable' +import FeaturePropertyPopup from './FeaturePropertyPopup' import validateColor from 'mapbox-gl-style-spec/lib/validate/validate_color' import style from '../../libs/style.js' import 'mapbox-gl/dist/mapbox-gl.css' import '../../mapboxgl.css' -function renderPopup(features) { +function renderLayerPopup(features) { var mountNode = document.createElement('div'); ReactDOM.render(, mountNode) return mountNode.innerHTML; } +function renderPropertyPopup(features) { + var mountNode = document.createElement('div'); + ReactDOM.render(, mountNode) + return mountNode.innerHTML; +} + export default class MapboxGlMap extends React.Component { static propTypes = { onDataChange: React.PropTypes.func, mapStyle: React.PropTypes.object.isRequired, accessToken: React.PropTypes.string, style: React.PropTypes.object, + inspectModeEnabled: React.PropTypes.bool.isRequired, } static defaultProps = { @@ -42,9 +51,15 @@ export default class MapboxGlMap extends React.Component { if(!this.state.map) return - //Mapbox GL now does diffing natively so we don't need to calculate - //the necessary operations ourselves! - this.state.map.setStyle(nextProps.mapStyle, { diff: true}) + if(!this.props.inspectModeEnabled) { + //Mapbox GL now does diffing natively so we don't need to calculate + //the necessary operations ourselves! + this.state.map.setStyle(nextProps.mapStyle, { diff: true}) + } + + if(this.props.inspectModeEnabled !== nextProps.inspectModeEnabled) { + this.inspect.toggleInspector() + } } componentDidMount() { @@ -57,6 +72,22 @@ export default class MapboxGlMap extends React.Component { const nav = new MapboxGl.NavigationControl(); map.addControl(nav, 'top-right'); + this.inspect = new MapboxInspect({ + popup: new MapboxGl.Popup({ + closeButton: false, + closeOnClick: false + }), + showInspectButton: false, + renderPopup: features => { + if(this.props.inspectModeEnabled) { + return renderPropertyPopup(features) + } else { + return renderLayerPopup(features) + } + } + }) + map.addControl(this.inspect) + map.on("style.load", () => { this.setState({ map }); }) @@ -67,24 +98,6 @@ export default class MapboxGlMap extends React.Component { map: this.state.map }) }) - - map.on('click', this.displayPopup.bind(this)); - map.on('mousemove', function(e) { - var features = map.queryRenderedFeatures(e.point, { layers: this.layers }) - map.getCanvas().style.cursor = (features.length) ? 'pointer' : '' - }) - } - - displayPopup(e) { - const features = this.state.map.queryRenderedFeatures(e.point, { - layers: this.layers - }); - - if(features.length < 1) return - const popup = new MapboxGl.Popup() - .setLngLat(e.lngLat) - .setHTML(renderPopup(features)) - .addTo(this.state.map) } render() { @@ -93,7 +106,7 @@ export default class MapboxGlMap extends React.Component { style={{ position: "fixed", top: 0, - left: 550, + right: 0, bottom: 0, height: "100%", width: "75%", diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx index c1f9664..ff8f149 100644 --- a/src/components/modals/SettingsModal.jsx +++ b/src/components/modals/SettingsModal.jsx @@ -83,7 +83,6 @@ class SettingsModal extends React.Component { options={[ ['mbgljs', 'MapboxGL JS'], ['ol3', 'Open Layers 3'], - ['inspection', 'Inspection Mode'], ]} value={metadata['maputnik:renderer'] || 'mbgljs'} onChange={this.changeMetadataProperty.bind(this, 'maputnik:renderer')} diff --git a/src/mapboxgl.css b/src/mapboxgl.css index b8e3dd9..5038759 100644 --- a/src/mapboxgl.css +++ b/src/mapboxgl.css @@ -49,3 +49,12 @@ .mapboxgl-ctrl-icon.mapboxgl-ctrl-compass > span.arrow { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%0A%09%3Cpolygon%20fill%3D%27%238e8e8e%27%20points%3D%276%2C9%2010%2C1%2014%2C9%27%2F%3E%0A%09%3Cpolygon%20fill%3D%27%23CCCCCC%27%20points%3D%276%2C11%2010%2C19%2014%2C11%20%27%2F%3E%0A%3C%2Fsvg%3E") } + +.mapboxgl-ctrl-inspect { + background-image: url('data:image/svg+xml;charset=utf8,