@neshan-maps-platform/react-openlayers

React Neshan Map Openlayers

An official React wrapper for neshan-map-openlayers library

⚙️ 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.
For more information, visit our doc page.

📦 Install

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

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

🔨 Usage

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.