This package is forked from the original package to convert to typescript

⚛️ React component for 🍃 Neshan Leaflet map.

For Farsi/Persian document, click here.

Getting started

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

import React, { FC } from 'react';
import NeshanMap from 'neshan-map';

const SimpleMap: FC = () => {
  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 neshan-map

Features

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);
  }}
/>