mirror of
https://github.com/a-nyx/maputnik-with-pmtiles.git
synced 2024-12-29 09:00:29 +01:00
Use Mapbox GL Inspect
This commit is contained in:
parent
e9daee4470
commit
c363c88f23
7 changed files with 57 additions and 48 deletions
|
@ -28,6 +28,7 @@
|
||||||
"lodash.throttle": "^4.1.1",
|
"lodash.throttle": "^4.1.1",
|
||||||
"lodash.topairs": "^4.3.0",
|
"lodash.topairs": "^4.3.0",
|
||||||
"mapbox-gl": "^0.29.0",
|
"mapbox-gl": "^0.29.0",
|
||||||
|
"mapbox-gl-inspect": "^1.0.2",
|
||||||
"mapbox-gl-style-spec": "^8.11.0",
|
"mapbox-gl-style-spec": "^8.11.0",
|
||||||
"mousetrap": "^1.6.0",
|
"mousetrap": "^1.6.0",
|
||||||
"ol-mapbox-style": "0.0.11",
|
"ol-mapbox-style": "0.0.11",
|
||||||
|
|
|
@ -52,6 +52,7 @@ export default class App extends React.Component {
|
||||||
selectedLayerIndex: 0,
|
selectedLayerIndex: 0,
|
||||||
sources: {},
|
sources: {},
|
||||||
vectorLayers: {},
|
vectorLayers: {},
|
||||||
|
inspectModeEnabled: false,
|
||||||
}
|
}
|
||||||
|
|
||||||
this.layerWatcher = new LayerWatcher({
|
this.layerWatcher = new LayerWatcher({
|
||||||
|
@ -149,6 +150,12 @@ export default class App extends React.Component {
|
||||||
this.onLayersChange(changedLayers)
|
this.onLayersChange(changedLayers)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
changeInspectMode() {
|
||||||
|
this.setState({
|
||||||
|
inspectModeEnabled: !this.state.inspectModeEnabled
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
mapRenderer() {
|
mapRenderer() {
|
||||||
const metadata = this.state.mapStyle.metadata || {}
|
const metadata = this.state.mapStyle.metadata || {}
|
||||||
const mapProps = {
|
const mapProps = {
|
||||||
|
@ -169,12 +176,8 @@ export default class App extends React.Component {
|
||||||
// Check if OL3 code has been loaded?
|
// Check if OL3 code has been loaded?
|
||||||
if(renderer === 'ol3') {
|
if(renderer === 'ol3') {
|
||||||
return <OpenLayers3Map {...mapProps} />
|
return <OpenLayers3Map {...mapProps} />
|
||||||
} else if(renderer === 'inspection') {
|
|
||||||
return <InspectionMap {...mapProps}
|
|
||||||
sources={this.state.sources}
|
|
||||||
highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]} />
|
|
||||||
} else {
|
} 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)}
|
onStyleChanged={this.onStyleChanged.bind(this)}
|
||||||
onStyleOpen={this.onStyleChanged.bind(this)}
|
onStyleOpen={this.onStyleChanged.bind(this)}
|
||||||
onStyleDownload={this.onStyleDownload.bind(this)}
|
onStyleDownload={this.onStyleDownload.bind(this)}
|
||||||
|
onInspectModeToggle={this.changeInspectMode.bind(this)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
const layerList = <LayerList
|
const layerList = <LayerList
|
||||||
|
|
|
@ -84,6 +84,7 @@ export default class Toolbar extends React.Component {
|
||||||
onStyleDownload: React.PropTypes.func.isRequired,
|
onStyleDownload: React.PropTypes.func.isRequired,
|
||||||
// A dict of source id's and the available source layers
|
// A dict of source id's and the available source layers
|
||||||
sources: React.PropTypes.object.isRequired,
|
sources: React.PropTypes.object.isRequired,
|
||||||
|
onInspectModeToggle: React.PropTypes.func.isRequired
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
|
@ -105,23 +106,6 @@ export default class Toolbar extends React.Component {
|
||||||
</ToolbarAction>
|
</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) {
|
toggleModal(modalName) {
|
||||||
this.setState({
|
this.setState({
|
||||||
isOpen: {
|
isOpen: {
|
||||||
|
@ -194,7 +178,7 @@ export default class Toolbar extends React.Component {
|
||||||
<SettingsIcon />
|
<SettingsIcon />
|
||||||
<IconText>Style Settings</IconText>
|
<IconText>Style Settings</IconText>
|
||||||
</ToolbarAction>
|
</ToolbarAction>
|
||||||
<ToolbarAction onClick={this.toggleInspectionMode.bind(this)}>
|
<ToolbarAction onClick={this.props.onInspectModeToggle}>
|
||||||
<InspectionIcon />
|
<InspectionIcon />
|
||||||
<IconText>Inspect</IconText>
|
<IconText>Inspect</IconText>
|
||||||
</ToolbarAction>
|
</ToolbarAction>
|
||||||
|
|
|
@ -24,7 +24,6 @@ const Panel = (props) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderFeature(feature) {
|
function renderFeature(feature) {
|
||||||
console.log(feature)
|
|
||||||
return <div>
|
return <div>
|
||||||
<Panel>{feature.layer['source-layer']}</Panel>
|
<Panel>{feature.layer['source-layer']}</Panel>
|
||||||
{renderProperties(feature)}
|
{renderProperties(feature)}
|
||||||
|
|
|
@ -1,24 +1,33 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import ReactDOM from 'react-dom'
|
import ReactDOM from 'react-dom'
|
||||||
import MapboxGl from 'mapbox-gl/dist/mapbox-gl.js'
|
import MapboxGl from 'mapbox-gl/dist/mapbox-gl.js'
|
||||||
|
import MapboxInspect from 'mapbox-gl-inspect'
|
||||||
import FeatureLayerTable from './FeatureLayerTable'
|
import FeatureLayerTable from './FeatureLayerTable'
|
||||||
|
import FeaturePropertyPopup from './FeaturePropertyPopup'
|
||||||
import validateColor from 'mapbox-gl-style-spec/lib/validate/validate_color'
|
import validateColor from 'mapbox-gl-style-spec/lib/validate/validate_color'
|
||||||
import style from '../../libs/style.js'
|
import style from '../../libs/style.js'
|
||||||
import 'mapbox-gl/dist/mapbox-gl.css'
|
import 'mapbox-gl/dist/mapbox-gl.css'
|
||||||
import '../../mapboxgl.css'
|
import '../../mapboxgl.css'
|
||||||
|
|
||||||
function renderPopup(features) {
|
function renderLayerPopup(features) {
|
||||||
var mountNode = document.createElement('div');
|
var mountNode = document.createElement('div');
|
||||||
ReactDOM.render(<FeatureLayerTable features={features} />, mountNode)
|
ReactDOM.render(<FeatureLayerTable features={features} />, mountNode)
|
||||||
return mountNode.innerHTML;
|
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 {
|
export default class MapboxGlMap extends React.Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
onDataChange: React.PropTypes.func,
|
onDataChange: React.PropTypes.func,
|
||||||
mapStyle: React.PropTypes.object.isRequired,
|
mapStyle: React.PropTypes.object.isRequired,
|
||||||
accessToken: React.PropTypes.string,
|
accessToken: React.PropTypes.string,
|
||||||
style: React.PropTypes.object,
|
style: React.PropTypes.object,
|
||||||
|
inspectModeEnabled: React.PropTypes.bool.isRequired,
|
||||||
}
|
}
|
||||||
|
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
|
@ -42,9 +51,15 @@ export default class MapboxGlMap extends React.Component {
|
||||||
|
|
||||||
if(!this.state.map) return
|
if(!this.state.map) return
|
||||||
|
|
||||||
//Mapbox GL now does diffing natively so we don't need to calculate
|
if(!this.props.inspectModeEnabled) {
|
||||||
//the necessary operations ourselves!
|
//Mapbox GL now does diffing natively so we don't need to calculate
|
||||||
this.state.map.setStyle(nextProps.mapStyle, { diff: true})
|
//the necessary operations ourselves!
|
||||||
|
this.state.map.setStyle(nextProps.mapStyle, { diff: true})
|
||||||
|
}
|
||||||
|
|
||||||
|
if(this.props.inspectModeEnabled !== nextProps.inspectModeEnabled) {
|
||||||
|
this.inspect.toggleInspector()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
|
@ -57,6 +72,22 @@ export default class MapboxGlMap extends React.Component {
|
||||||
const nav = new MapboxGl.NavigationControl();
|
const nav = new MapboxGl.NavigationControl();
|
||||||
map.addControl(nav, 'top-right');
|
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", () => {
|
map.on("style.load", () => {
|
||||||
this.setState({ map });
|
this.setState({ map });
|
||||||
})
|
})
|
||||||
|
@ -67,24 +98,6 @@ export default class MapboxGlMap extends React.Component {
|
||||||
map: this.state.map
|
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() {
|
render() {
|
||||||
|
@ -93,7 +106,7 @@ export default class MapboxGlMap extends React.Component {
|
||||||
style={{
|
style={{
|
||||||
position: "fixed",
|
position: "fixed",
|
||||||
top: 0,
|
top: 0,
|
||||||
left: 550,
|
right: 0,
|
||||||
bottom: 0,
|
bottom: 0,
|
||||||
height: "100%",
|
height: "100%",
|
||||||
width: "75%",
|
width: "75%",
|
||||||
|
|
|
@ -83,7 +83,6 @@ class SettingsModal extends React.Component {
|
||||||
options={[
|
options={[
|
||||||
['mbgljs', 'MapboxGL JS'],
|
['mbgljs', 'MapboxGL JS'],
|
||||||
['ol3', 'Open Layers 3'],
|
['ol3', 'Open Layers 3'],
|
||||||
['inspection', 'Inspection Mode'],
|
|
||||||
]}
|
]}
|
||||||
value={metadata['maputnik:renderer'] || 'mbgljs'}
|
value={metadata['maputnik:renderer'] || 'mbgljs'}
|
||||||
onChange={this.changeMetadataProperty.bind(this, 'maputnik:renderer')}
|
onChange={this.changeMetadataProperty.bind(this, 'maputnik:renderer')}
|
||||||
|
|
|
@ -49,3 +49,12 @@
|
||||||
.mapboxgl-ctrl-icon.mapboxgl-ctrl-compass > span.arrow {
|
.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")
|
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