<PopupBase />

Constructor

# <PopupBase arrow children draggable height inline onPopupDrag onPopupDragEnd onPopupDragStart pixel show transparentDuringDrag width />

PropTypes:
Name Type Required Description Default
arrow string No The position of the popup's arrow (`top`, `right`, `bottom`, `left` or `none`) 'none'
children union No The content of the popup
draggable bool No true
height union No The height of the popup 'auto'
inline bool No Render the component inline (without absolute positioning) false
onPopupDrag func No Callback fired during drags when draggable is true () => {}
onPopupDragEnd func No Callback fired after a drag when draggable is true () => {}
onPopupDragStart func No Callback fired at the beginning of a drag when draggable is true () => {}
pixel array No The pixel coordinate where the popup should render [0, 0]
show bool No Show/hide the popup false
transparentDuringDrag bool No Set PopupBase to see-through during a drag when draggable is true true
width number No The width of the popup 280
Since:
  • 0.2.0

View Source Popup/PopupBase.js, line 13


Examples

Popups are great for contextual content, interaction and controls that live relative to the map. The pixel prop determines the pixel location where the popup will be shown. By default the popup will position itself at the top left corner.

return (
  <Popup show={true} pixel={[10, 10]} arrow={'none'} inline={true}>
    <p>This is text within a popup</p>
  </Popup>
)

For a better UX, use the arrow prop to tell the popup where it should show relative to the pixel coordinate you passed it. The default is none (example above) which means it doesn't show a directional arrow and positions on the top left corner. Below are some examples of the four different arrow positions you can choose from:

return (
  <Popup show={true} pixel={[50, 80]} height={150} arrow={'left'} inline={true}>
    <p>This is <code>arrow="left"</code></p>
  </Popup>
)

return (
  <Popup show={true} pixel={[350, 10]} height={150} width={500} arrow={'top'} inline={true}>
    <p>This is <code>arrow="top"</code></p>
  </Popup>
)

return (
  <Popup show={true} pixel={[350, 310]} arrow={'bottom'} inline={true}>
    <p>This is <code>arrow="bottom"</code></p>
  </Popup>
)

return (
  <Popup show={true} pixel={[550, 150]} width={500} arrow={'right'} inline={true}>
    <p>This is <code>arrow="right"</code></p>
  </Popup>
)