ol-kit | Popup

Constructor

PropTypes:

Name	Type	Required	Description	Default
`actions`	union	No	components passed to PopupDefaultInsert to render as actions
`children`	union	No	Pass components as children of Popup component
`map`	object	Yes	a reference to openlayers map object
`onMapClick`	func	No	callback fired on map clicks with state object: { clickCoordinate: [0, 0], clickPixel: [0, 0], features: [], loading: false, // true after click before layers/features load popupPosition: { arrow: 'none', fits: true, // does the popup have room to render around the feature bbox pixel: [0, 0] }, show: false // suggestion to display or hide popup -- (show prop takes priority) }	() => {}
`show`	bool	No	boolean that is respected over internal state	function()

Since:

0.2.0

View Source Popup/Popup.js, line 16

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

Constructor

# <Popup actions children map onMapClick show />

PropTypes:

Examples