عکس NeshanMaps
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.JavaScript
موضوع‌ها
۵
فورک‌ها
۸
ستاره‌ها
۱۰
تاریخ ایجاد
۳۰ شهریور ۱۳۹۹
آخرین بروزرسانی
۱۹ روز قبل

⚛️ React component for 🍃 Neshan Leaflet map.

Developed by Neshan Maps Platform team.

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 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