@neshan-maps-platform/react-openlayers/README.md

A react map component wrapping neshan openlayers map.

<p align="center">
  <a href="https://platform.neshan.org">
    <img width="150" src="https://static.neshanmap.ir/content/places/assets/images/21.png">
  </a>
</p>

<h1 align="center">React Neshan Map Openlayers</h1>
<div align="center">
  An official React wrapper for neshan-map-openlayers library
</div>

## ⚙️ Before Install
You need a map key to use our map on your react web application.
You can signup and get a key from [Our Platfrom](https://platform.neshan.org/panel/api-key).
<br/>
For more information, visit our [doc page](https://platform.neshan.org/sdk/react-component#).


## 📦 Install

```bash
npm install @neshan-maps-platform/react-openlayers
npm install @neshan-maps-platform/ol
```

```bash
yarn add @neshan-maps-platform/react-openlayers
yarn add @neshan-maps-platform/ol
```


## 🔨 Usage

```jsx
import {useEffect, useRef} from "react"
import {Map} from "@neshan-maps-platform/ol"
import NeshanMap, {NeshanMapRef} from "@neshan-maps-platform/react-openlayers"

function App() {
    const mapRef = useRef<NeshanMapRef | null>(null)

    const onInit = (map: Map) => {
        map.setMapType("osm-bright")
        map.switchTrafficLayer(true)
    }

    useEffect(() => {
        if (mapRef.current?.map) {
            mapRef.current?.map.switchTrafficLayer(true)
            mapRef.current?.map.setMapType("standard-night")
        }
    }, [])


    return (
        <div style={{ width: "100vh"}}>
            <NeshanMap
                mapKey="Your_Map_Key"
                defaultType="neshan"
                center={{latitude: 35.7665394, longitude: 51.4749824}}
                style={{height: "48vh", width: "100%"}}
                onInit={onInit}
                zoom={13}
                traffic={false}
                poi={false}
            ></NeshanMap>
            <hr/>
            <NeshanMap
                ref={mapRef}
                mapKey="Your_Map_Key"
                defaultType="dreamy"
                style={{height: "48vh", width: "100%"}}
                traffic={false}
                poi={false}
            ></NeshanMap>
        </div>
    )
}

export default App
```

### TypeScript

`@neshan-maps-platform/react-openlayers` is written in TypeScript with complete definitions.