CoralMapMarker

CoralMapMarker allows overlaying multiple points over a CoralMap basemap. This is a wrapper around react-map-gl Marker component . You must use CoralMapMarker’s as children of CoralMap.

Import


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

Basic usage


const FEATURES: PointFeature[] = [
    {
        id: '1',
        type: 'Feature',
        geometry: {
            type: 'Point',
            coordinates: [-0.1276, 51.5074],
        },
        properties: {
            name: 'London',
        },
    },
    {
        id: '2',
        type: 'Feature',
        geometry: {
            type: 'Point',
            coordinates: [-2.2426, 53.4808],
        },
        properties: {
            name: 'Manchester',
        },
    },
    {
        id: '3',
        type: 'Feature',
        geometry: {
            type: 'Point',
            coordinates: [-4.2518, 55.8642],
        },
        properties: {
            name: 'Glasgow',
        },
    },
];
 
<CoralMap mapboxAccessToken="...">
    <CoralMapMarker feature={FEATURES[0]} />
    <CoralMapMarker feature={FEATURES[1]} />
    <CoralMapMarker feature={FEATURES[2]} />
</CoralMap>;

Properties

Color


<CoralMap mapboxAccessToken="...">
    <CoralMapMarker feature={FEATURES[0]} />
    <CoralMapMarker feature={FEATURES[1]} color="secondary" />
    <CoralMapMarker feature={FEATURES[2]} color="primary" />
</CoralMap>

Size


<CoralMap mapboxAccessToken="...">
    <CoralMapMarker feature={FEATURES[0]} size="small" />
    <CoralMapMarker feature={FEATURES[1]} />
    <CoralMapMarker feature={FEATURES[2]} color="large" />
</CoralMap>

Icon


<CoralMap mapboxAccessToken="...">
    <CoralMapMarker feature={FEATURES[0]} icon={<IconBolt color='duotone' size={16} />} />
    <CoralMapMarker feature={FEATURES[1]} icon={<IconSolarPanel color='duotone' size={16} />} />
    <CoralMapMarker feature={FEATURES[2]} icon={<IconBolt color='duotone' size={16} />} />
</CoralMap>

Full API

Name	Type	Default
`element`	`HTMLElement`
`offset`	`PointLike`
`anchor`	`Anchor$1`
`color`	`"primary" \| "secondary" \| "tertiary"` The colour of the marker	`primary`
`scale`	`number`
`draggable`	`boolean`
`clickTolerance`	`number`
`rotation`	`number`
`rotationAlignment`	`string`
`pitchAlignment`	`string`
`occludedOpacity`	`number`
`className`	`string`
`altitude`	`number`
`popup`	`Popup`
`style`	`CSSProperties` CSS style override, applied to the control’s container
`onDragStart`	`(e: MarkerDragEvent) => void`
`onDrag`	`(e: MarkerDragEvent) => void`
`onDragEnd`	`(e: MarkerDragEvent) => void`
`children`	`React.ReactNode`
`feature`	`PointFeature` A GeoJSON point feature
`icon`	`ReactNode` Displays a Coral Icon inside the marker
`size`	`CoralMapMarkerSize` The size of the marker	`medium`
`onClick`	`(event: CoralMapMarkerEvent) => void` A callback function to be triggered upon clicking/tapping the marker