---
title: Chakra UI Map - Horizon UI
description: Map
---

For more info on the MapBox library you can read
[here](https://docs.mapbox.com/mapbox-gl-js/guides/) .

## Import

```tsx
import Map from "react-map-gl"
```

```tsx
import "mapbox-gl/dist/mapbox-gl.css"
```

## Usage

```jsx
function Example() {
  return (
    <Box color="white">
      <iframe
        src="https://codesandbox.io/embed/nice-water-1v4hzb?fontsize=14&hidenavigation=1&initialpath=%2Fmap&module=%2Fsrc%2FApp.js&theme=dark"
        width="100%"
        height="700px"
        ms="-15px"
        overflow="hidden"
      ></iframe>
    </Box>
  )
}
```


Chakra UI Map - Horizon UI

Import#

Usage#