react-map-gl/assets/js/80cf65dc.16810f61.js

"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[9660],{9274:(e,o,n)=>{n.r(o),n.d(o,{assets:()=>c,contentTitle:()=>i,default:()=>d,frontMatter:()=>p,metadata:()=>t,toc:()=>a});const t=JSON.parse('{"id":"api-reference/mapbox/popup","title":"Popup","description":"React component that wraps mapbox-gl\'s Popup class.","source":"@site/../docs/api-reference/mapbox/popup.md","sourceDirName":"api-reference/mapbox","slug":"/api-reference/mapbox/popup","permalink":"/react-map-gl/docs/api-reference/mapbox/popup","draft":false,"unlisted":false,"editUrl":"https://github.com/visgl/react-map-gl/tree/master/docs/../docs/api-reference/mapbox/popup.md","tags":[],"version":"current","frontMatter":{},"sidebar":"defaultSidebar","previous":{"title":"NavigationControl","permalink":"/react-map-gl/docs/api-reference/mapbox/navigation-control"},"next":{"title":"ScaleControl","permalink":"/react-map-gl/docs/api-reference/mapbox/scale-control"}}');var r=n(4848),s=n(8453);const p={},i="Popup",c={},a=[{value:"Properties",id:"properties",level:2},{value:"Reactive Properties",id:"reactive-properties",level:3},{value:"<code>anchor</code>: &#39;center&#39; | &#39;left&#39; | &#39;right&#39; | &#39;top&#39; | &#39;bottom&#39; | &#39;top-left&#39; | &#39;top-right&#39; | &#39;bottom-left&#39; | &#39;bottom-right&#39; | undefined",id:"anchor",level:4},{value:"<code>className</code>: string",id:"classname",level:4},{value:"<code>offset</code>: number | PointLike | Record&lt;string, PointLike&gt;",id:"offset",level:4},{value:"<code>maxWidth</code>: string",id:"maxwidth",level:4},{value:"<code>style</code>: CSSProperties",id:"style",level:4},{value:"Callbacks",id:"callbacks",level:3},{value:"<code>onOpen</code>: (evt: PopupEvent) =&gt; void",id:"onopen",level:4},{value:"<code>onClose</code>: (evt: PopupEvent) =&gt; void",id:"onclose",level:4},{value:"Other Properties",id:"other-properties",level:3},{value:"Methods",id:"methods",level:2},{value:"Source",id:"source",level:2}];function l(e){const o={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(o.header,{children:(0,r.jsx)(o.h1,{id:"popup",children:"Popup"})}),"\n",(0,r.jsxs)(o.p,{children:["React component that wraps mapbox-gl's ",(0,r.jsx)(o.a,{href:"https://docs.mapbox.com/mapbox-gl-js/api/markers/#popup",children:"Popup"})," class."]}),"\n",(0,r.jsx)(o.pre,{children:(0,r.jsx)(o.code,{className:"language-tsx",children:"import * as React from 'react';\r\nimport {useState} from 'react';\r\nimport Map, {Popup} from 'react-map-gl/mapbox';\r\nimport 'mapbox-gl/dist/mapbox-gl.css';\r\n\r\nfunction App() {\r\n  const [showPopup, setShowPopup] = useState<boolean>(true);\r\n\r\n  return <Map\r\n    mapboxAccessToken=\"<Mapbox access token>\"\r\n    initialViewState={{\r\n      longitude: -100,\r\n      latitude: 40,\r\n      zoom: 3.5\r\n    }}\r\n    mapStyle=\"mapbox://styles/mapbox/streets-v9\"\r\n  >\r\n    {showPopup && (\r\n      <Popup longitude={-100} latitude={40}\r\n        anchor=\"bottom\"\r\n        onClose={() => setShowPopup(false)}>\r\n        You are here\r\n      </Popup>)}\r\n  </Map>;\r\n}\n"})}),"\n",(0,r.jsx)(o.h2,{id:"properties",children:"Properties"}),"\n",(0,r.jsx)(o.h3,{id:"reactive-properties",children:"Reactive Properties"}),"\n",(0,r.jsxs)(o.h4,{id:"anchor",children:[(0,r.jsx)(o.code,{children:"anchor"}),": 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | undefined"]}),"\n",(0,r.jsxs)(o.p,{children:["A string indicating the part of the popup that should be positioned closest to the coordinate, set via ",(0,r.jsx)(o.code,{children:"longitude"})," and ",(0,r.jsx)(o.code,{children:"latitude"}),".\r\nIf unset, the anchor will be dynamically set to ensure the popup falls within the map container with a preference for ",(0,r.jsx)(o.code,{children:"'bottom'"}),"."]}),"\n",(0,r.jsxs)(o.h4,{id:"classname",children:[(0,r.jsx)(o.code,{children:"className"}),": string"]}),"\n",(0,r.jsx)(o.p,{children:"Space-separated CSS class names to add to popup container."}),"\n",(0,r.jsxs)(o.h4,{id:"offset",children:[(0,r.jsx)(o.code,{children:"offset"}),": number | ",(0,r.jsx)(o.a,{href:"/react-map-gl/docs/api-reference/mapbox/types#pointlike",children:"PointLike"})," | Record<string, ",(0,r.jsx)(o.a,{href:"/react-map-gl/docs/api-reference/mapbox/types#pointlike",children:"PointLike"}),">"]}),"\n",(0,r.jsxs)(o.p,{children:["Default: ",(0,r.jsx)(o.code,{children:"null"})]}),"\n",(0,r.jsx)(o.p,{children:"A pixel offset applied to the popup's location specified as:"}),"\n",(0,r.jsxs)(o.ul,{children:["\n",(0,r.jsx)(o.li,{children:"a single number specifying a distance from the popup's location"}),"\n",(0,r.jsx)(o.li,{children:"a PointLike specifying a constant offset"}),"\n",(0,r.jsx)(o.li,{children:"an object of Points specifing an offset for each anchor position."}),"\n"]}),"\n",(0,r.jsx)(o.p,{children:"Negative offsets indicate left and up."}),"\n",(0,r.jsxs)(o.h4,{id:"maxwidth",children:[(0,r.jsx)(o.code,{children:"maxWidth"}),": string"]}),"\n",(0,r.jsxs)(o.p,{children:["Default: ",(0,r.jsx)(o.code,{children:"240px"})]}),"\n",(0,r.jsx)(o.p,{children:"A string that sets the CSS property of the popup's maximum width."}),"\n",(0,r.jsxs)(o.h4,{id:"style",children:[(0,r.jsx)(o.code,{children:"style"}),": CSSProperties"]}),"\n",(0,r.jsx)(o.p,{children:"CSS style override that applies to the popup's container."}),"\n",(0,r.jsx)(o.h3,{id:"callbacks",children:"Callbacks"}),"\n",(0,r.jsxs)(o.h4,{id:"onopen",children:[(0,r.jsx)(o.code,{children:"onOpen"}),": (evt: ",(0,r.jsx)(o.a,{href:"/react-map-gl/docs/api-reference/mapbox/types#popupevent",children:"PopupEvent"}),") => void"]}),"\n",(0,r.jsx)(o.p,{children:"Called when the popup is opened."}),"\n",(0,r.jsxs)(o.h4,{id:"onclose",children:[(0,r.jsx)(o.code,{children:"onClose"}),": (evt: ",(0,r.jsx)(o.a,{href:"/react-map-gl/docs/api-reference/mapbox/types#popupevent",children:"PopupEvent"}),") => void"]}),"\n",(0,r.jsxs)(o.p,{children:["Called when the popup is closed by the user clicking on the close button or outside (if ",(0,r.jsx)(o.code,{children:"closeOnClick: true"}),")."]}),"\n",(0,r.jsx)(o.h3,{id:"other-properties",children:"Other Properties"}),"\n",(0,r.jsx)(o.p,{children:"The properties in this section are not reactive. They are only used when the component first mounts."}),"\n",(0,r.jsxs)(o.p,{children:["Any options supported by the ",(0,r.jsx)(o.code,{children:"Popup"})," class (",(0,r.jsx)(o.a,{href:"https://docs.mapbox.com/mapbox-gl-js/api/markers/#popup",children:"Mapbox"})," | ",(0,r.jsx)(o.a,{href:"https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/PopupOptions/",children:"Maplibre"}),"), such as"]}),"\n",(0,r.jsxs)(o.ul,{children:["\n",(0,r.jsx)(o.li,{children:(0,r.jsx)(o.code,{children:"closeButton"})}),"\n",(0,r.jsx)(o.li,{children:(0,r.jsx)(o.code,{children:"closeOnClick"})}),"\n",(0,r.jsx)(o.li,{children:(0,r.jsx)(o.code,{children:"closeOnMove"})}),"\n",(0,r.jsx)(o.li,{children:(0,r.jsx)(o.code,{children:"focusAfterOpen"})}),"\n"]}),"\n",(0,r.jsx)(o.h2,{id:"methods",children:"Methods"}),"\n",(0,r.jsxs)(o.p,{children:["The underlying native ",(0,r.jsx)(o.code,{children:"Popup"})," instance is accessible via a ",(0,r.jsx)(o.a,{href:"https://reactjs.org/docs/refs-and-the-dom.html#creating-refs",children:"React ref"})," hook.\r\nYou may use it to call any imperative methods:"]}),"\n",(0,r.jsx)(o.pre,{children:(0,r.jsx)(o.code,{className:"language-tsx",children:"import * as React from 'react';\r\nimport {useRef, useEffect} from 'react';\r\nimport Map, {Popup} from 'react-map-gl/mapbox';\r\nimport mapboxgl from 'mapbox-gl';\r\n\r\nfunction App() {\r\n  const popupRef = useRef<mapboxgl.Popup>();\r\n\r\n  useEffect(() => {\r\n    popupRef.current?.trackPointer();\r\n  }, [popupRef.current])\r\n\r\n  return <Map>\r\n    <Popup longitude={-122.4} latitude={37.8} ref={popupRef} >\r\n      Tooltip\r\n    </Popup>\r\n  </Map>;\r\n}\n"})}),"\n",(0,r.jsx)(o.h2,{id:"source",children:"Source"}),"\n",(0,r.jsx)(o.p,{children:(0,r.jsx)(o.a,{href:"https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/popup.ts",children:"popup.ts"})})]})}function d(e={}){const{wrapper:o}={...(0,s.R)(),...e.components};return o?(0,r.jsx)(o,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},8453:(e,o,n)=>{n.d(o,{R:()=>p,x:()=>i});var t=n(6540);const r={},s=t.createContext(r);function p(e){const o=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(o):{...o,...e}}),[o,e])}function i(e){let o;return o=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:p(e.components),t.createElement(s.Provider,{value:o},e.children)}}}]);