mirror of
https://github.com/a-nyx/maputnik-with-pmtiles.git
synced 2024-12-28 18:31:17 +01:00
Use Mapbox GL Inspect
This commit is contained in:
Lukas Martinelli
parent
e9daee4470
commit
c363c88f23
7 changed files with 57 additions and 48 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 <OpenLayers3Map {...mapProps} />
|
||||
} else if(renderer === 'inspection') {
|
||||
return <InspectionMap {...mapProps}
|
||||
sources={this.state.sources}
|
||||
highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]} />
|
||||
} else {
|
||||
return <MapboxGlMap {...mapProps} />
|
||||
return <MapboxGlMap {...mapProps} inspectModeEnabled={this.state.inspectModeEnabled} />
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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 = <LayerList
|
||||
|
|
|
|||
|
|
@ -84,6 +84,7 @@ export default class Toolbar extends React.Component {
|
|||
onStyleDownload: React.PropTypes.func.isRequired,
|
||||
// A dict of source id's and the available source layers
|
||||
sources: React.PropTypes.object.isRequired,
|
||||
onInspectModeToggle: React.PropTypes.func.isRequired
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
|
|
@ -105,23 +106,6 @@ export default class Toolbar extends React.Component {
|
|||
</ToolbarAction>
|
||||
}
|
||||
|
||||
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 {
|
|||
<SettingsIcon />
|
||||
<IconText>Style Settings</IconText>
|
||||
</ToolbarAction>
|
||||
<ToolbarAction onClick={this.toggleInspectionMode.bind(this)}>
|
||||
<ToolbarAction onClick={this.props.onInspectModeToggle}>
|
||||
<InspectionIcon />
|
||||
<IconText>Inspect</IconText>
|
||||
</ToolbarAction>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,6 @@ const Panel = (props) => {
|
|||
}
|
||||
|
||||
function renderFeature(feature) {
|
||||
console.log(feature)
|
||||
return <div>
|
||||
<Panel>{feature.layer['source-layer']}</Panel>
|
||||
{renderProperties(feature)}
|
||||
|
|
|
|||
|
|
@ -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(<FeatureLayerTable features={features} />, mountNode)
|
||||
return mountNode.innerHTML;
|
||||
}
|
||||
|
||||
function renderPropertyPopup(features) {
|
||||
var mountNode = document.createElement('div');
|
||||
ReactDOM.render(<FeaturePropertyPopup features={features} />, 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,11 +51,17 @@ export default class MapboxGlMap extends React.Component {
|
|||
|
||||
if(!this.state.map) return
|
||||
|
||||
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() {
|
||||
const map = new MapboxGl.Map({
|
||||
container: this.container,
|
||||
|
|
@ -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%",
|
||||
|
|
|
|||
|
|
@ -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')}
|
||||
|
|
|
|||
|
|
@ -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,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="#8e8e8e%22%20preserveAspectRatio=%22xMidYMid%20meet%22%20viewBox=%22-10%20-10%2060%2060%22%3E%3Cg%3E%3Cpath%20d=%22m15%2021.6q0-2%201.5-3.5t3.5-1.5%203.5%201.5%201.5%203.5-1.5%203.6-3.5%201.4-3.5-1.4-1.5-3.6z%20m18.4%2011.1l-6.4-6.5q1.4-2.1%201.4-4.6%200-3.4-2.5-5.8t-5.9-2.4-5.9%202.4-2.5%205.8%202.5%205.9%205.9%202.5q2.4%200%204.6-1.4l7.4%207.4q-0.9%200.6-2%200.6h-20q-1.3%200-2.3-0.9t-1.1-2.3l0.1-26.8q0-1.3%201-2.3t2.3-0.9h13.4l10%2010v19.3z%22%3E%3C/path%3E%3C/g%3E%3C/svg%3E');
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-map {
|
||||
background-image: url('data:image/svg+xml;charset=utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="#8e8e8e%22%20viewBox=%22-10%20-10%2060%2060%22%20preserveAspectRatio=%22xMidYMid%20meet%22%3E%3Cg%3E%3Cpath%20d=%22m25%2031.640000000000004v-19.766666666666673l-10-3.511666666666663v19.766666666666666z%20m9.140000000000008-26.640000000000004q0.8599999999999923%200%200.8599999999999923%200.8600000000000003v25.156666666666666q0%200.625-0.625%200.783333333333335l-9.375%203.1999999999999993-10-3.5133333333333354-8.906666666666668%203.4383333333333326-0.2333333333333334%200.07833333333333314q-0.8616666666666664%200-0.8616666666666664-0.8599999999999994v-25.156666666666663q0-0.625%200.6233333333333331-0.7833333333333332l9.378333333333334-3.198333333333334%2010%203.5133333333333336%208.905000000000001-3.4383333333333344z%22%3E%3C/path%3E%3C/g%3E%3C/svg%3E');
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue