Skip to main content

Popup

React component that wraps the base library's Popup class.

import * as React from 'react';
import {useState} from 'react';
import {Map, Popup} from '@vis.gl/react-maplibre';
import 'maplibre-gl/dist/maplibre-gl.css';

function App() {
  const [showPopup, setShowPopup] = useState<boolean>(true);

  return <Map
    initialViewState={{
      longitude: -100,
      latitude: 40,
      zoom: 3.5
    }}
    mapStyle="https://demotiles.maplibre.org/style.json"
  >
    {showPopup && (
      <Popup longitude={-100} latitude={40}
        anchor="bottom"
        onClose={() => setShowPopup(false)}>
        You are here
      </Popup>)}
  </Map>;
}

Properties​

Reactive Properties​

anchor: 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | undefined​

A string indicating the part of the popup that should be positioned closest to the coordinate, set via longitude and latitude. If unset, the anchor will be dynamically set to ensure the popup falls within the map container with a preference for 'bottom'.

className: string​

Space-separated CSS class names to add to popup container.

offset: number | PointLike | Record<string, PointLike>​

Default: null

A pixel offset applied to the popup's location specified as:

  • a single number specifying a distance from the popup's location
  • a PointLike specifying a constant offset
  • an object of Points specifing an offset for each anchor position.

Negative offsets indicate left and up.

maxWidth: string​

Default: 240px

A string that sets the CSS property of the popup's maximum width.

style: CSSProperties​

CSS style override that applies to the popup's container.

Callbacks​

onOpen: (evt: PopupEvent) => void​

Called when the popup is opened.

onClose: (evt: PopupEvent) => void​

Called when the popup is closed by the user clicking on the close button or outside (if closeOnClick: true).

Other Properties​

The properties in this section are not reactive. They are only used when the component first mounts.

Any options supported by the Popup class, such as

  • closeButton
  • closeOnClick
  • closeOnMove
  • focusAfterOpen

Methods​

The underlying native Popup instance is accessible via a React ref hook. You may use it to call any imperative methods:

import * as React from 'react';
import {useRef, useEffect} from 'react';
import {Map, Popup} from '@vis.gl/react-maplibre';
import maplibregl from 'maplibre-gl';

function App() {
  const popupRef = useRef<maplibregl.Popup>();

  useEffect(() => {
    popupRef.current?.trackPointer();
  }, [popupRef.current])

  return <Map>
    <Popup longitude={-122.4} latitude={37.8} ref={popupRef} >
      Tooltip
    </Popup>
  </Map>;
}

Source​

popup.ts