From 4db5c7cf684ee44475a16e4f998f5d05c6690a85 Mon Sep 17 00:00:00 2001 From: Lukas Martinelli Date: Sat, 24 Dec 2016 17:24:24 +0100 Subject: [PATCH] Better inspection hover --- src/components/inputs/InputBlock.jsx | 2 + src/components/map/FeatureLayerTable.jsx | 52 ++++++++++++++++----- src/components/map/FeaturePropertyTable.jsx | 42 ----------------- src/components/map/InspectionMap.jsx | 43 +++++++---------- src/components/map/MapboxGlMap.jsx | 39 +++++++++------- src/index.css | 28 +++++++++++ 6 files changed, 109 insertions(+), 97 deletions(-) delete mode 100644 src/components/map/FeaturePropertyTable.jsx diff --git a/src/components/inputs/InputBlock.jsx b/src/components/inputs/InputBlock.jsx index fce2384..51775b3 100644 --- a/src/components/inputs/InputBlock.jsx +++ b/src/components/inputs/InputBlock.jsx @@ -7,6 +7,7 @@ class InputBlock extends React.Component { static propTypes = { label: React.PropTypes.string.isRequired, children: React.PropTypes.element.isRequired, + style: React.PropTypes.object, } onChange(e) { @@ -19,6 +20,7 @@ class InputBlock extends React.Component { display: 'block', marginTop: margins[2], marginBottom: margins[2], + ...this.props.style, }}> {this.props.children} diff --git a/src/components/map/FeatureLayerTable.jsx b/src/components/map/FeatureLayerTable.jsx index ecc21a5..7e490b5 100644 --- a/src/components/map/FeatureLayerTable.jsx +++ b/src/components/map/FeatureLayerTable.jsx @@ -1,18 +1,48 @@ import React from 'react' +import InputBlock from '../inputs/InputBlock' +import StringInput from '../inputs/StringInput' + +import colors from '../../config/colors' +import { margins, fontSizes } from '../../config/scales' + +function renderProperties(feature) { + return Object.keys(feature.properties).map(propertyName => { + const property = feature.properties[propertyName] + return + + + }) +} + +const Panel = (props) => { + return
{props.children}
+} + +function renderFeature(feature) { + return
+ Source + + + Layers + + + Properties + {renderProperties(feature)} +
+} class FeatureLayerTable extends React.Component { + render() { - const feature = this.props.feature - const rows = - {feature.layer.id} - - return - {rows} -
;; + const features = this.props.features + return
+ {features.map(renderFeature)} +
} } diff --git a/src/components/map/FeaturePropertyTable.jsx b/src/components/map/FeaturePropertyTable.jsx deleted file mode 100644 index e88184f..0000000 --- a/src/components/map/FeaturePropertyTable.jsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react' - - -function items(object) { - let arr = []; - for (var key in object) { - arr.push({ key, value: object[key] }); - } - return arr; -} - - -function displayValue(value) { - if (typeof value === "undefined" || value === null) return value; - if (value instanceof Date) return value.toLocaleString(); - if (typeof value === "object" || - typeof value === "number" || - typeof value === "string") return value.toString(); - return value; -} - -class FeaturePropertyTable extends React.Component { - render() { - const rows = items(this.props.feature.properties) - .map(i => { - return - {i.key} - {displayValue(i.value)} - ; - }); - return - {rows} -
;; - } -} - - -export default FeaturePropertyTable diff --git a/src/components/map/InspectionMap.jsx b/src/components/map/InspectionMap.jsx index ee836bd..6a5029b 100644 --- a/src/components/map/InspectionMap.jsx +++ b/src/components/map/InspectionMap.jsx @@ -4,7 +4,7 @@ import MapboxGl from 'mapbox-gl' import validateColor from 'mapbox-gl-style-spec/lib/validate/validate_color' import colors from '../../config/colors' import style from '../../libs/style' -import FeaturePropertyTable from './FeaturePropertyTable' +import FeatureLayerTable from './FeatureLayerTable' import { generateColoredLayers } from '../../libs/stylegen' import 'mapbox-gl/dist/mapbox-gl.css' @@ -25,9 +25,9 @@ function convertInspectStyle(mapStyle, sources) { return newStyle } -function renderFeaturePropertyTable(feature) { +function renderPopup(features) { var mountNode = document.createElement('div'); - ReactDOM.render(, mountNode); + ReactDOM.render(, mountNode) return mountNode.innerHTML; } @@ -64,8 +64,8 @@ export default class InspectionMap extends React.Component { hash: true, }) - const nav = new MapboxGl.NavigationControl(); - map.addControl(nav, 'top-right'); + const nav = new MapboxGl.NavigationControl(); + map.addControl(nav, 'top-right'); map.on("style.load", () => { this.setState({ map }); @@ -82,29 +82,20 @@ export default class InspectionMap extends React.Component { } displayPopup(e) { - const features = this.state.map.queryRenderedFeatures(e.point, { - layers: this.layers - }); + const features = this.state.map.queryRenderedFeatures(e.point, { + layers: this.layers + }); - if (!features.length) { - return - } - const feature = features[0] + if (!features.length) { + return + } -/* - const clickEvent = e.originalEvent - const x = clickEvent.pageX - const y = clickEvent.pageY - - console.log(e) - console.log('Show feature', feature) -*/ - // Populate the popup and set its coordinates - // based on the feature found. - const popup = new MapboxGl.Popup() - .setLngLat(e.lngLat) - .setHTML(renderFeaturePropertyTable(feature)) - .addTo(this.state.map) + // 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() { diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx index 42698ef..565f7de 100644 --- a/src/components/map/MapboxGlMap.jsx +++ b/src/components/map/MapboxGlMap.jsx @@ -2,13 +2,14 @@ import React from 'react' import ReactDOM from 'react-dom' import MapboxGl from 'mapbox-gl' import FeatureLayerTable from './FeatureLayerTable' +import Popup from './Popup' import validateColor from 'mapbox-gl-style-spec/lib/validate/validate_color' import style from '../../libs/style.js' import 'mapbox-gl/dist/mapbox-gl.css' -function renderTable(feature) { +function renderPopup(features) { var mountNode = document.createElement('div'); - ReactDOM.render(, mountNode); + ReactDOM.render(, mountNode) return mountNode.innerHTML; } @@ -27,7 +28,12 @@ export default class MapboxGlMap extends React.Component { constructor(props) { super(props) - this.state = { map: null } + this.state = { + map: null, + isPopupOpen: false, + popupX: 0, + popupY: 0, + } } componentWillReceiveProps(nextProps) { @@ -69,27 +75,24 @@ export default class MapboxGlMap extends React.Component { layers: this.layers }); - if (!features.length) { - return - } - const feature = features[0] - console.log('Click on feature', feature) + console.log('Click on features', features) const popup = new MapboxGl.Popup() .setLngLat(e.lngLat) - .setHTML(renderTable(feature)) + .setHTML(renderPopup(features)) .addTo(this.state.map) } render() { return
this.container = x} - style={{ - position: "fixed", - top: 0, - bottom: 0, - height: "100%", - width: "100%", - ...this.props.style, - }}>
+ ref={x => this.container = x} + style={{ + position: "fixed", + top: 0, + bottom: 0, + height: "100%", + width: "100%", + ...this.props.style, + }}> + } } diff --git a/src/index.css b/src/index.css index 435d6ed..f82c04f 100644 --- a/src/index.css +++ b/src/index.css @@ -15,3 +15,31 @@ color: rgb(142, 142, 142) !important; box-shadow: none !important; } + +.mapboxgl-popup-tip { + border-top-color: rgb(28, 31, 36) !important; +} + +.mapboxgl-popup-content { + background-color: rgb(28, 31, 36) !important; + border-radius: 0px !important; + box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 5px 0px; + padding: 0px !important; +} + +.mapboxgl-popup-close-button { + color: white !important; +} + +.mapboxgl-ctrl-group { + background: rgb(28, 31, 36) !important; +} + +.mapboxgl-ctrl-group > button { + background-color: rgb(28, 31, 36) !important; + border-color: rgb(28, 31, 36) !important; + + &:hover { + background-color: rgb(86, 83, 83); + } +}