in src/components/map-container.js [257:339]
_renderMapPopover(layersToRender) {
// TODO: move this into reducer so it can be tested
const {
mapState,
hoverInfo,
clicked,
datasets,
interactionConfig,
layers,
mousePos: {mousePosition, coordinate, pinned}
} = this.props;
if (!mousePosition) {
return null;
}
// if clicked something, ignore hover behavior
let layerHoverProp = null;
let layerPinnedProp = null;
const position = {x: mousePosition[0], y: mousePosition[1]};
let pinnedPosition = {};
layerHoverProp = getLayerHoverProp({
interactionConfig,
hoverInfo,
layers,
layersToRender,
datasets
});
const compareMode = interactionConfig.tooltip.config
? interactionConfig.tooltip.config.compareMode
: false;
const hasTooltip = pinned || clicked;
const hasComparisonTooltip = compareMode || (!clicked && !pinned);
if (hasTooltip) {
// project lnglat to screen so that tooltip follows the object on zoom
const viewport = new WebMercatorViewport(mapState);
const lngLat = clicked ? clicked.lngLat : pinned.coordinate;
pinnedPosition = this._getHoverXY(viewport, lngLat);
layerPinnedProp = getLayerHoverProp({
interactionConfig,
hoverInfo: clicked,
layers,
layersToRender,
datasets
});
if (layerHoverProp) {
layerHoverProp.primaryData = layerPinnedProp.data;
layerHoverProp.compareType = interactionConfig.tooltip.config.compareType;
}
}
const commonProp = {
onClose: this._onCloseMapPopover,
mapW: mapState.width,
mapH: mapState.height,
zoom: mapState.zoom
};
return (
<div>
{hasTooltip && (
<MapPopover
{...pinnedPosition}
{...commonProp}
layerHoverProp={layerPinnedProp}
coordinate={interactionConfig.coordinate.enabled && (pinned || {}).coordinate}
frozen={Boolean(hasTooltip)}
isBase={compareMode}
/>
)}
{hasComparisonTooltip && (
<MapPopover
{...position}
{...commonProp}
layerHoverProp={layerHoverProp}
coordinate={interactionConfig.coordinate.enabled && coordinate}
/>
)}
</div>
);
}