/react-neshan-map-leaflet

React.JS component for Leaflet 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 leaflet library.

Primary LanguageJavaScript

⚛️ React component for 🍃 Neshan Leaflet map.

Developed by Neshan Maps Platform.

Neshan Maps React Component - Farsi/Persian Document.

Getting started

This version is deprecated. Check out the latest version here.

In the simple case you just need to add options prop to NeshanMap component and import NeshanLeaflet stylesheet.

import React from 'react';
import NeshanMap from 'react-neshan-map-leaflet'

import './SimpleMap.css';

function SimpleMap() {
  return (
    <NeshanMap
      options={{
        key: 'YOUR_API_KEY',
        maptype: 'dreamy',
        poi: true,
        traffic: false,
        center: [35.699739, 51.338097],
        zoom: 13
      }}
    />
  );
}

export default SimpleMap;

Installation

npm:

npm i react-neshan-map-leaflet

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 NeshanMapReactLeaflet component.

Use Laflet Maps API

You can access to Leaflet Maps L , map objects by using onInit.

...
<NeshanMap
  options={{
    key: 'YOUR_API_KEY',
    maptype: 'dreamy',
    poi: true,
    traffic: false,
    center: [35.699739, 51.338097],
    zoom: 13
  }}

  onInit={(L, myMap) => {
    let marker = L.marker([35.699739, 51.338097])
      .addTo(myMap)
      .bindPopup('I am a popup.');

    myMap.on('click', function (e) {
      marker.setLatLng(e.latlng)
    });

    L.circle([35.699739, 51.348097], {
      color: 'red',
      fillColor: '#f03',
      fillOpacity: 0.5,
      radius: 500
    }).addTo(myMap);
  }}
/>

Example here