@neshan-maps-platform/react-openlayers
v3.0.1
Published
A react map component wrapping neshan openlayers map.
Downloads
860
Readme
⚙️ 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.