schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-28 17:01:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #59 from maputnik/switch_gl_inspect

Browse source 
Switch to Mapbox GL Inspect
This commit is contained in:
Lukas Martinelli 2017-01-09 12:04:26 +01:00 committed by GitHub
commit 887b23ce1f
11 changed files with 132 additions and 322 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.travis.yml
View file

@ -16,6 +16,6 @@ install:
- npm install
script:
- mkdir public
- npm run build
- node --stack_size=100000 $(which npm) run build
- npm run lint
- npm run test

3
package.json
View file

@ -5,7 +5,7 @@
"main": "''",
"scripts": {
"stats": "webpack --config webpack.production.config.js --profile --json > stats.json",
"build": "node --stack_size=100000 node_modules/webpack/bin/webpack.js --config webpack.production.config.js --progress --profile --colors",
"build": "webpack --config webpack.production.config.js --progress --profile --colors",
"test": "karma start --single-run",
"test-watch": "karma start",
"start": "webpack-dev-server --progress --profile --colors --watch-poll",
@ -28,6 +28,7 @@
"lodash.throttle": "^4.1.1",
"lodash.topairs": "^4.3.0",
"mapbox-gl": "^0.29.0",
"mapbox-gl-inspect": "^1.0.7",
"mapbox-gl-style-spec": "^8.11.0",
"mousetrap": "^1.6.0",
"ol-mapbox-style": "0.0.11",

17
src/components/App.jsx
View file

@ -2,7 +2,6 @@ import React from 'react'
import { saveAs } from 'file-saver'
import Mousetrap from 'mousetrap'
import InspectionMap from './map/InspectionMap'
import MapboxGlMap from './map/MapboxGlMap'
import OpenLayers3Map from './map/OpenLayers3Map'
import LayerList from './layers/LayerList'
@ -52,6 +51,7 @@ export default class App extends React.Component {
selectedLayerIndex: 0,
sources: {},
vectorLayers: {},
inspectModeEnabled: false,
}
this.layerWatcher = new LayerWatcher({
@ -149,6 +149,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 +175,10 @@ 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}
highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]} />
}
}
@ -194,6 +198,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

20
src/components/Toolbar.jsx
View file

@ -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>

1
src/components/map/FeaturePropertyPopup.jsx
View file

@ -24,7 +24,6 @@ const Panel = (props) => {
}
function renderFeature(feature) {
console.log(feature)
return <div>
<Panel>{feature.layer['source-layer']}</Panel>
{renderProperties(feature)}

126
src/components/map/InspectionMap.jsx
View file

@ -1,126 +0,0 @@
import React from 'react'
import ReactDOM from 'react-dom'
import MapboxGl from 'mapbox-gl/dist/mapbox-gl.js'
import validateColor from 'mapbox-gl-style-spec/lib/validate/validate_color'
import colors from '../../config/colors'
import style from '../../libs/style'
import FeaturePropertyPopup from './FeaturePropertyPopup'
import { colorHighlightedLayer, generateColoredLayers } from '../../libs/stylegen'
import 'mapbox-gl/dist/mapbox-gl.css'
import '../../mapboxgl.css'
function convertInspectStyle(mapStyle, sources, highlightedLayer) {
const coloredLayers = generateColoredLayers(sources)
const layer = colorHighlightedLayer(highlightedLayer)
if(layer) {
coloredLayers.push(layer)
}
const newStyle = {
...mapStyle,
layers: [
{
"id": "background",
"type": "background",
"paint": {
"background-color": colors.black,
}
},
...coloredLayers,
]
}
return newStyle
}
function renderPopup(features) {
var mountNode = document.createElement('div');
ReactDOM.render(<FeaturePropertyPopup features={features} />, mountNode)
return mountNode.innerHTML;
}
export default class InspectionMap extends React.Component {
static propTypes = {
onDataChange: React.PropTypes.func,
sources: React.PropTypes.object,
originalStyle: React.PropTypes.object,
highlightedLayer: React.PropTypes.object,
style: React.PropTypes.object,
}
static defaultProps = {
onMapLoaded: () => {},
onTileLoaded: () => {},
}
constructor(props) {
super(props)
this.state = { map: null }
}
componentWillReceiveProps(nextProps) {
if(!this.state.map) return
this.state.map.setStyle(convertInspectStyle(nextProps.mapStyle, this.props.sources, nextProps.highlightedLayer), { diff: true})
}
componentDidMount() {
MapboxGl.accessToken = this.props.accessToken
const map = new MapboxGl.Map({
container: this.container,
style: convertInspectStyle(this.props.mapStyle, this.props.sources, this.props.highlightedLayer),
hash: true,
})
const nav = new MapboxGl.NavigationControl();
map.addControl(nav, 'top-right');
map.on("style.load", () => {
this.setState({ map });
})
map.on("data", e => {
if(e.dataType !== 'tile') return
this.props.onDataChange({
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) {
return
}
// Populate the popup and set its coordinates
// based on the feature found.
const popup = new MapboxGl.Popup()
.setLngLat(e.lngLat)
.setHTML(renderPopup(features))
.addTo(this.state.map)
}
render() {
return <div
ref={x => this.container = x}
style={{
position: "fixed",
top: 0,
bottom: 0,
height: "100%",
width: "100%",
...this.props.style,
}}></div>
}
}

88
src/components/map/MapboxGlMap.jsx
View file

@ -1,24 +1,57 @@
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 colors from '../../config/colors'
import style from '../../libs/style.js'
import { colorHighlightedLayer } from '../../libs/highlight'
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;
}
function buildInspectStyle(originalMapStyle, coloredLayers, highlightedLayer) {
const backgroundLayer = {
"id": "background",
"type": "background",
"paint": {
"background-color": colors.black,
}
}
const layer = colorHighlightedLayer(highlightedLayer)
if(layer) {
coloredLayers.push(layer)
}
const inspectStyle = {
...originalMapStyle,
layers: [backgroundLayer].concat(coloredLayers)
}
return inspectStyle
}
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,
highlightedLayer: React.PropTypes.object,
}
static defaultProps = {
@ -31,6 +64,7 @@ export default class MapboxGlMap extends React.Component {
MapboxGl.accessToken = props.accessToken
this.state = {
map: null,
inspect: null,
isPopupOpen: false,
popupX: 0,
popupY: 0,
@ -39,13 +73,23 @@ export default class MapboxGlMap extends React.Component {
componentWillReceiveProps(nextProps) {
MapboxGl.accessToken = nextProps.accessToken
if(!this.state.map) return
if(!nextProps.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})
}
}
componentDidUpdate(prevProps) {
if(this.props.inspectModeEnabled !== prevProps.inspectModeEnabled) {
this.state.inspect.toggleInspector()
}
if(this.props.inspectModeEnabled) {
this.state.inspect.render()
}
}
componentDidMount() {
const map = new MapboxGl.Map({
@ -57,8 +101,26 @@ export default class MapboxGlMap extends React.Component {
const nav = new MapboxGl.NavigationControl();
map.addControl(nav, 'top-right');
const inspect = new MapboxInspect({
popup: new MapboxGl.Popup({
closeButton: false,
closeOnClick: false
}),
showMapPopup: true,
showInspectButton: false,
buildInspectStyle: (originalMapStyle, coloredLayers) => buildInspectStyle(originalMapStyle, coloredLayers, this.props.highlightedLayer),
renderPopup: features => {
if(this.props.inspectModeEnabled) {
return renderPropertyPopup(features)
} else {
return renderLayerPopup(features)
}
}
})
map.addControl(inspect)
map.on("style.load", () => {
this.setState({ map });
this.setState({ map, inspect });
})
map.on("data", e => {
@ -67,24 +129,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 +137,7 @@ export default class MapboxGlMap extends React.Component {
style={{
position: "fixed",
top: 0,
left: 550,
right: 0,
bottom: 0,
height: "100%",
width: "75%",

1
src/components/modals/SettingsModal.jsx
View file

@ -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')}

36
src/libs/highlight.js Normal file
View file

@ -0,0 +1,36 @@
import randomColor from 'randomcolor'
import Color from 'color'
import stylegen from 'mapbox-gl-inspect/lib/stylegen'
import colors from 'mapbox-gl-inspect/lib/colors'
export function colorHighlightedLayer(layer) {
if(!layer || layer.type === 'background' || layer.type === 'raster') return null
function changeLayer(l) {
if(layer.filter) {
l.filter = layer.filter
} else {
delete l['filter']
}
l.id = l.id + '_highlight'
return l
}
const color = colors.brightColor(layer.id, 1)
const layers = []
if(layer.type === "fill" || layer.type === 'fill-extrusion') {
return changeLayer(stylegen.polygonLayer(color, color, layer.source, layer['source-layer']))
}
if(layer.type === "symbol" || layer.type === 'circle') {
return changeLayer(stylegen.circleLayer(color, layer.source, layer['source-layer']))
}
if(layer.type === 'line') {
return changeLayer(stylegen.lineLayer(color, layer.source, layer['source-layer']))
}
return null
}

141
src/libs/stylegen.js
View file

@ -1,141 +0,0 @@
import randomColor from 'randomcolor'
import Color from 'color'
function assignVectorLayerColor(layerId) {
let hue = null
if(/water|ocean|lake|sea|river/.test(layerId)) {
hue = 'blue'
}
if(/road|highway|transport/.test(layerId)) {
hue = 'orange'
}
if(/building/.test(layerId)) {
hue = 'yellow'
}
if(/wood|forest|park|landcover|landuse/.test(layerId)) {
hue = 'green'
}
return randomColor({
luminosity: 'bright',
hue: hue,
seed: layerId,
})
}
function circleLayer(source, vectorLayer, color) {
const layer = {
id: `${source}_${vectorLayer}_circle`,
source: source,
type: 'circle',
paint: {
'circle-color': color,
'circle-radius': 2,
},
filter: ["==", "$type", "Point"]
}
if(vectorLayer) {
layer['source-layer'] = vectorLayer
}
return layer
}
function polygonLayer(source, vectorLayer, color, fillColor) {
const layer = {
id: `${source}_${vectorLayer}_polygon`,
source: source,
type: 'fill',
paint: {
'fill-color': fillColor,
'fill-antialias': true,
'fill-outline-color': color,
},
filter: ["==", "$type", "Polygon"]
}
if(vectorLayer) {
layer['source-layer'] = vectorLayer
}
return layer
}
function lineLayer(source, vectorLayer, color) {
const layer = {
id: `${source}_${vectorLayer}_line`,
source: source,
layout: {
'line-join': 'round',
'line-cap': 'round'
},
type: 'line',
paint: {
'line-color': color,
},
filter: ["==", "$type", "LineString"]
}
if(vectorLayer) {
layer['source-layer'] = vectorLayer
}
return layer
}
export function colorHighlightedLayer(layer) {
if(!layer || layer.type === 'background' || layer.type === 'raster') return null
function changeLayer(l) {
if(layer.filter) {
l.filter = layer.filter
} else {
delete l['filter']
}
l.id = l.id + '_highlight'
return l
}
const color = assignVectorLayerColor(layer.id)
const layers = []
if(layer.type === "fill" || layer.type === 'fill-extrusion') {
return changeLayer(polygonLayer(layer.source, layer['source-layer'], color, Color(color).alpha(0.2).string()))
}
if(layer.type === "symbol" || layer.type === 'circle') {
return changeLayer(circleLayer(layer.source, layer['source-layer'], color))
}
if(layer.type === 'line') {
return changeLayer(lineLayer(layer.source, layer['source-layer'], color))
}
return null
}
export function generateColoredLayers(sources) {
const polyLayers = []
const circleLayers = []
const lineLayers = []
Object.keys(sources).forEach(sourceId => {
const layers = sources[sourceId]
// Deal with GeoJSON sources that do not have any source layers
if(!layers) {
const color = Color(assignVectorLayerColor(sourceId))
circleLayers.push(circleLayer(sourceId, null, color.alpha(0.3).string()))
lineLayers.push(lineLayer(sourceId, null, color.alpha(0.3).string()))
polyLayers.push(polygonLayer(sourceId, null, color.alpha(0.2).string(), color.alpha(0.05).string()))
return
}
layers.forEach(layerId => {
const color = Color(assignVectorLayerColor(layerId))
circleLayers.push(circleLayer(sourceId, layerId, color.alpha(0.3).string()))
lineLayers.push(lineLayer(sourceId, layerId, color.alpha(0.3).string()))
polyLayers.push(polygonLayer(sourceId, layerId, color.alpha(0.2).string(), color.alpha(0.05).string()))
})
})
return polyLayers.concat(lineLayers).concat(circleLayers)
}

9
src/mapboxgl.css
View file

@ -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');
}