Add MapPopup and associated components

[PaulioRandall]

What does this change?

Adds the <MapPopup> and supporting components. This component uses the MapCursor functionality to create tooltips and markers on the map as users hover and click features. It also adds:

• MapPopup component for creating map tooltips and markers.
• MapPopupContainer container component as the standard container for creating tooltips and markers.
• MapPopupStyledContainer container component provides standard styling for tooltips and markers.
• MapPopupFlyToFeature container component flys to a tooltip or marker and centers it on screen.
• MapPopupPlacement container component provides various ways to layout and position a tooltip or marker.
• PlacementCenterAboveFeature container component places a tooltip or marker such that the tip is in the center of the feature.
• PlacementFollowMouse container component places a tooltip or marker such that it follows the users mouse movement.

Why?

Because creating tooltips and markers is verbose and painful. It becomes much more difficult for apps with many overlapping layers and tooltips.

How is it tested?

Storybook + live applications

How is it documented?

Storybook

Are light and dark themes considered?

No.

Is it complete?

• [x] Have you included changeset file?
• [x] If this adds a new component, is it exported via index.js?

[jamesscottbrown]

I'm finding the naming here confusing.

As I understand it:

• A marker is something drawn on the map to represent something at a particular location.
• A tooltip displays contextual information whilst a user hovers over a marker; it closes as soon as the cursor moves away from the marker.
• A popup displays contextual information when a user clicks on a marker; it remains open until dismissed (by clicking the close icon, pressing the Escape key, or clicking elsewhere on the page.

This doesn't quite match the naming in the current implementation, which has a MapPopup component with tooltip and marker props.

I think it would be better to:

• rename the MapPopup component to Marker (it isn't just a popup, and might have a tooltip but no popup)
• keep the tooltip prop, as the component used to render a tooltip on hover
• rename the marker prop to popup, as this is the component used to render the popop on click

[PaulioRandall]

I'm finding the naming here confusing.

As I understand it:

• A marker is something drawn on the map to represent something at a particular location.
• A tooltip displays contextual information whilst a user hovers over a marker; it closes as soon as the cursor moves away from the marker.
• A popup displays contextual information when a user clicks on a marker; it remains open until dismissed (by clicking the close icon, pressing the Escape key, or clicking elsewhere on the page.

This doesn't quite match the naming in the current implementation, which has a MapPopup component with tooltip and marker props.

I think it would be better to:

• rename the MapPopup component to Marker (it isn't just a popup, and might have a tooltip but no popup)
• keep the tooltip prop, as the component used to render a tooltip on hover
• rename the marker prop to popup, as this is the component used to render the popop on click

@jamesscottbrown I've applied this change. I've also renamed context labels to be more precise about what MapLibre type they contain.

[jamesscottbrown]

Currently, there is:

• a maplibre_gl.Popup object called tooltipMaplibrePopup (passed into a context as mapMarkerMaplibrePopup)
• a maplibre_gl.Marker object called popupMaplibreMarker (passed into a context as mapMarkerMaplibreMarker)

I see why there are two objects: there may be bother a tooltip and popup with different contents; and a mousout/leaveTopFeature needs to close a tooltip (if open), but not a popup.

However, I don't see why they aren't both maplibre_gl.Popup objects. Changing renderPopup to match renderTooltip (by creating a maplibre_gl.Popup object and setting container to be a newly created div) seems to work fine.

I'd suggest having 2 maplibre_gl.Popup objects, called tooltipMaplibrePopup and popupMaplibrePopup, and passed into the context with names that indicate whether they correspond to a tooltip or popup.

[PaulioRandall]

Currently, there is:

• a maplibre_gl.Popup object called tooltipMaplibrePopup (passed into a context as mapMarkerMaplibrePopup)
• a maplibre_gl.Marker object called popupMaplibreMarker (passed into a context as mapMarkerMaplibreMarker)

I see why there are two objects: there may be bother a tooltip and popup with different contents; and a mousout/leaveTopFeature needs to close a tooltip (if open), but not a popup.

However, I don't see why they aren't both maplibre_gl.Popup objects. Changing renderPopup to match renderTooltip (by creating a maplibre_gl.Popup object and setting container to be a newly created div) seems to work fine.

I'd suggest having 2 maplibre_gl.Popup objects, called tooltipMaplibrePopup and popupMaplibrePopup, and passed into the context with names that indicate whether they correspond to a tooltip or popup.

Currently, there is:

• a maplibre_gl.Popup object called tooltipMaplibrePopup (passed into a context as mapMarkerMaplibrePopup)
• a maplibre_gl.Marker object called popupMaplibreMarker (passed into a context as mapMarkerMaplibreMarker)

I see why there are two objects: there may be bother a tooltip and popup with different contents; and a mousout/leaveTopFeature needs to close a tooltip (if open), but not a popup.

However, I don't see why they aren't both maplibre_gl.Popup objects. Changing renderPopup to match renderTooltip (by creating a maplibre_gl.Popup object and setting container to be a newly created div) seems to work fine.

I'd suggest having 2 maplibre_gl.Popup objects, called tooltipMaplibrePopup and popupMaplibrePopup, and passed into the context with names that indicate whether they correspond to a tooltip or popup.

@jamesscottbrown I've updated the code with this change.