_renderMapPopover()

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