Skip to content

React.JS component for OpenLayers JavaScript library, to use Neshan Maps Platform in you web applications. This means you can easily load the map tiles and layers in your React app using OpenLayers library.

Notifications You must be signed in to change notification settings

NeshanMaps/react-neshan-map-openlayers

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

⚛️ A minimal React wrapper for OpenLayers 5+

For Farsi/Persian document, click here.

Getting started

We have two components: NeshanMapLoader, NeshanMap.
Please note that to use NeshanMap component you must first load Openlayers library.

In the simple case you just need to add options prop to NeshanMap component under the NeshanMapLoader component.

import React, { useState } from "react";
import NeshanMap, {NeshanMapLoader} from "react-neshan-map-openlayers";

const SimpleMap = () => {
  const [ol, setOl] = useState();

  return (
    <NeshanMapLoader onLoad={setOl}>
      {ol && (
        <NeshanMap
          options={{
            key: "YOUR_API_KEY",
            view: new ol.View({
              center: ol.proj.fromLonLat([51.338076, 35.699756]),
              zoom: 13,
            }),
          }}
        />
      )}
    </NeshanMapLoader>
  );
};
export default SimpleMap;

Installation

npm:

npm install react-neshan-map-openlayers

Features

Neshan Maps API Loads on Demand

There is no need to place a <script src= tag at top of page. The Neshan Maps API loads upon the first usage of the NeshanMap component.

Use Openlayers Maps API

You can access to map objects by using onInit.

...
<NeshanMapLoader onLoad={setOl}>
  {ol && (
    <NeshanMap
      options={{
        key: 'YOUR_API_KEY',
        maptype: 'dreamy',
        poi: true,
        traffic: false,
        view: new ol.View({
          center: ol.proj.fromLonLat([51.338076, 35.699756]),
          zoom: 14
        })
      }}

      onInit={(myMap) => {
        var layer = new ol.layer.Vector({
          source: new ol.source.Vector({
            features: [
              new ol.Feature({
                geometry: new ol.geom.Point(
                  ol.proj.fromLonLat([51.338076, 35.699756])
                )
              })
            ]
          }),
          style: new ol.style.Style({
            image: new ol.style.Icon({
              color: '#BADA55',
              crossOrigin: 'anonymous',
              src:
                'https://openlayers.org/en/latest/examples/data/square.svg'
            })
          })
        })
        myMap.addLayer(layer)
      }}

    />
  )}
</NeshanMapLoader>

Example here

About

React.JS component for OpenLayers JavaScript library, to use Neshan Maps Platform in you web applications. This means you can easily load the map tiles and layers in your React app using OpenLayers library.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published