{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,