Commit 6d6b4273 authored by alain's avatar alain 🐙
Browse files

different take on map hover/tooltip (and maybe fix flickering tooltip issue?)

parent 79d7baf5
import React from 'react'
import DeckGL from '@deck.gl/react';
import { connect } from 'react-redux'
import memoize from "memoize-one";
import DeckGL from '@deck.gl/react';
import WebMercatorViewport from 'viewport-mercator-project'
import StationLayer from "./StationLayer"
import StationTooltip from "./StationTooltip"
import StationInfo from "../Modal/StationInfo"
......@@ -28,6 +29,18 @@ class DeckLayers extends React.Component {
}
renderTooltip() {
const { hover, hoverContent } = this.state || {}
if(hover) {
const webMercatorViewport = new WebMercatorViewport(this.props.viewport)
const pixelCoords = webMercatorViewport.project(hover.coordinates)
return <Tooltip position={pixelCoords} content={hoverContent} />
}
}
layers = memoize(
(deckLayers, setModal, zoom, unitStatus, sources) => {
const layers = []
......@@ -77,8 +90,7 @@ class DeckLayers extends React.Component {
extruded: true,
onHover: e => this.setState({
hover: e.object,
hoverContent: <StationTooltip d={e.object} label={layerDefinition.label} unit={unit.label} />,
mousePosition: [e.x, e.y]
hoverContent: <StationTooltip d={e.object} label={layerDefinition.label} unit={unit.label} />
}),
onClick: e => setModal(<StationInfo clickedObject={e.object} activeLayer={layerDefinition} />)
})
......@@ -110,8 +122,7 @@ class DeckLayers extends React.Component {
//getColor: d => layerDefinition.getColor(d[layerDefinition.getColorKey]),
onHover: e => this.setState({
hover: e.object,
hoverContent: <IconTooltip d={e.object} keys={layerDefinition.keysTooltip} />,
mousePosition: [e.x, e.y],
hoverContent: <IconTooltip d={e.object} keys={layerDefinition.keysTooltip} />
}),
onClick: e => setModal(<IconInfo clickedObject={e.object} activeLayer={layerDefinition} keysFilter={layerDefinition.keysModalFilter} />)
})
......@@ -153,7 +164,6 @@ class DeckLayers extends React.Component {
render() {
const { viewport, deckLayers, setModal, unitStatus } = this.props
const { hover, hoverContent, mousePosition } = this.state
// add sources count to memoize function as it doesn't detect changes in deckLayers reliably
var sources = 0
......@@ -166,7 +176,7 @@ class DeckLayers extends React.Component {
return (
<div>
<DeckGL viewState={{...viewport}} controller={false} layers={layers} />
{ hover ? <Tooltip position={mousePosition} content={hoverContent} /> : null }
{ this.renderTooltip() }
</div>
)
}
......
......@@ -8,7 +8,7 @@
background: rgba(0, 0, 0, 0.15);
overflow: auto;
text-align: center;
z-index: 200;
z-index: 1200;
&:before {
content: "";
......
......@@ -85,7 +85,7 @@
.tooltip-map {
position: absolute;
transform: translate(-50%, 16px);
transform: translate(-50%, 8px);
z-index: 1000;
pointer-events: none;
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment