neshan-map/README.md

### Developed by [Neshan Maps Platform team](https://platform.neshan.org). ### For Farsi/Persian document, [click here](https://developers.neshan.org/react-component/).

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

# ⚛️ React component for 🍃 Neshan Leaflet map.

### For Farsi/Persian document, [click here](https://developers.neshan.org/react-component/).

## Getting started

In the simple case you just need to add `options` prop to `NeshanMap` component and import [`NeshanLeaflet`](https://static.neshan.org/sdk/leaflet/1.4.0/leaflet.css) stylesheet.

```javascript
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`.

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

```