# MapComponent

A map widget that can show a pannable/zoomable map with markers

## Installation

```tsx
import { MapComponent } from 'uxp/components';
```

## Signature

```tsx
const MapComponent: React.FunctionComponent<IMapComponentProps>
```

## Properties

| Name              | Type                                                                                                    | Mandatory | Default Value | Example Value |
| ----------------- | ------------------------------------------------------------------------------------------------------- | --------- | ------------- | ------------- |
| mapUrl            | string                                                                                                  | Yes       | -             | \* \`\`\`     |
| staticImage       | [IStaticImage](https://help.iviva.com/uxp/v5/additional-resources/types/istaticimage)                   | No        | -             | \* \`\`\`     |
| center            | { position: IMarker, renderMarker?: boolean }                                                           | No        | -             | -             |
| markers           | [IMarker\[\]](https://help.iviva.com/uxp/v5/additional-resources/types/imarker)                         | No        | -             | -             |
| onMarkerClick     | (el: any, data: any) => void                                                                            | No        | -             | -             |
| regions           | [IRegion\[\]](https://help.iviva.com/uxp/v5/additional-resources/types/iregion)                         | No        | -             | -             |
| onRegionClick     | (event: any, data: any) => void                                                                         | No        | -             | -             |
| heatmap           | [IHeatmapConfiguration](https://help.iviva.com/uxp/v5/additional-resources/types/iheatmapconfiguration) | No        | -             | -             |
| zoom              | number                                                                                                  | No        | -             | -             |
| maxZoom           | number                                                                                                  | No        | -             | -             |
| minZoom           | number                                                                                                  | No        | -             | -             |
| zoomOnScroll      | boolean                                                                                                 | No        | -             | -             |
| hideZoomControlls | boolean                                                                                                 | No        | -             | -             |
| onClick           | (event: LeafletMouseEvent) => void                                                                      | No        | -             | -             |
| onZoomEnd         | (event: LeafletEvent) => void                                                                           | No        | -             | -             |
| onDragEnd         | (event: DragEndEvent) => void                                                                           | No        | -             | -             |

## Related Types

* [IMapComponentProps](https://help.iviva.com/uxp/v5/additional-resources/types/imapcomponentprops)
* [IStaticImage](https://help.iviva.com/uxp/v5/additional-resources/types/istaticimage)
* [IMarker](https://help.iviva.com/uxp/v5/additional-resources/types/imarker)
* [IDivIconInterface](https://help.iviva.com/uxp/v5/additional-resources/types/idiviconinterface)
* [IRenderMarkerPopup](https://help.iviva.com/uxp/v5/additional-resources/types/irendermarkerpopup)
* [IRenderMarkerTooltip](https://help.iviva.com/uxp/v5/additional-resources/types/irendermarkertooltip)
* [IRegion](https://help.iviva.com/uxp/v5/additional-resources/types/iregion)
* [IPolygonBound](https://help.iviva.com/uxp/v5/additional-resources/types/ipolygonbound)
* [ICircleBound](https://help.iviva.com/uxp/v5/additional-resources/types/icirclebound)
* [IHeatmapConfiguration](https://help.iviva.com/uxp/v5/additional-resources/types/iheatmapconfiguration)
* [IHeatmapPoint](https://help.iviva.com/uxp/v5/additional-resources/types/iheatmappoint)