CoralMapPopup

CoralMapPopup is meant to provide additional information about a point on the map, usually when clicking on a CoralMapMarker. It is a convenience wrapper around react-map-gl’s Popup component , which is itself a React wrapper around Mapbox GL’s Popup object .

Import


import { CoralMapPopup } from '@krakentech/coral-maps';

Basic usage


const FEATURE: PointFeature = {
    id: '1',
    type: 'Feature',
    geometry: {
        type: 'Point',
        coordinates: [-0.1276, 51.5074],
    },
    properties: {
        name: 'London',
    },
};
 
const [isPopupOpen, setPopupIsOpen] = useState(true);
 
<CoralMap mapboxAccessToken="...">
    <CoralMapMarker
        feature={FEATURE}
        onClick={() => setPopupIsOpen(!isPopupOpen)}
    />
    {isPopupOpen && (
        <CoralMapPopup feature={FEATURE} onClose={() => setIsOpen(false)}>
            <Typography variant="h3">{FEATURE.properties.name}</Typography>
            <Typography variant="body1">
                {FEATURE.properties.description}
            </Typography>
        </CoralMapPopup>
    )}
</CoralMap>;

Full API

Name	Type	Default
`closeButton`	`boolean`
`closeOnClick`	`boolean`
`closeOnMove`	`boolean`
`focusAfterOpen`	`boolean`
`anchor`	`Anchor$1`
`offset`	`Offset`
`className`	`string`
`maxWidth`	`string`
`altitude`	`number`
`style`	`CSSProperties` CSS style override, applied to the control’s container
`onOpen`	`(e: PopupEvent) => void`
`onClose`	`(e: PopupEvent) => void`
`children`	`React.ReactNode`
`feature`	`PointFeature`