نقشه حرفه ای با کتابخانه React Leaflet ! ( رایگان، ساده و بهینه )

18 بهمن 1403
ارسال شده توسط
ری اکت
کتابخانه React-Leaflet - آموزش react-leaflet - کتابخانه react-leaflet چیست ؟ - نقشه در ری اکت - مپ در ری اکت - نقشه در React - مپ در React - نقشه در ریکت - map در ریکت

اگر تا حالا تو پروژه‌ های React نیاز به نمایش نقشه‌ های تعاملی داشته باشی، حتماً اسم Leaflet به گوشت خورده. Leaflet یه کتابخانه‌ ی محبوب برای کار با نقشه‌های GIS (سیستم‌های اطلاعات جغرافیایی) هست که به خاطر سبک بودن و سادگی استفاده، کلی طرفدار داره.
اما مشکل اینجاست که Leaflet مستقیماً برای React طراحی نشده و یه مقدار دست و پاگیر میشه. اینجاست که react-leaflet به کمکمون میاد!

نمونه نقشه پیاده سازی شده با React-Leaflet در ری اکت :

تو این مقاله، قراره به شکل کامل و حرفه‌ ای یاد بگیریم:

  • react-leaflet چیه و چرا باید ازش استفاده کنیم؟
  • چطور یه نقشه حرفه ای رو توی پروژه React بسازیم؟
  • چطوری مارکر (Marker)، پاپ‌آپ (Popup)، لایه‌ های مختلف و رویداد ها رو مدیریت کنیم؟
  • چطور نقشه رو شخصی‌ سازی کنیم و کنترل‌ های پیشرفته بهش اضافه کنیم؟

پس اگه می‌خوای یه نقشه‌ی حرفه‌ای و تعاملی توی پروژه React خودت داشته باشی، تا آخر این مقاله همراه من باش! 😉

react-leaflet چیست و چرا باید از آن استفاده کنیم؟

Leaflet یکی از معروف‌ ترین کتابخانه‌های جاوااسکریپت برای کار با نقشه‌های وب هست و ویژگی‌ های جذابی مثل موارد زیر رو بهمون میده:

✅ حجم کم (نسبت به Google Maps API یا OpenLayers)
✅ امکانات قوی برای اضافه کردن مارکر، چندضلعی و داده‌ های جغرافیایی
✅ پشتیبانی از نقشه‌ های Tile Layers و سرویس‌ هایی مثل OpenStreetMap

اما مشکل اصلی Leaflet اینه که به صورت مستقیم از React پشتیبانی نمیکنه و توی محیط ری‌ اکت که بر پایه‌ ی کامپوننت‌ های stateful کار میکنه، به مشکل برمیخوریم.

react-leaflet این مشکل رو حل میکنه و یه wrapper برای Leaflet فراهم میکنه که کاملاً با React سازگاره. با استفاده از این کتابخونه میتونیم خیلی راحت کامپوننت‌ هایی مثل <MapContainer>، <TileLayer>، <Marker> و … رو به پروژمون اضافه کنیم و بدون مشکل از قابلیت‌ های React مثل State و Props استفاده کنیم.

شروع کار با react-leaflet

قبل از هر چیزی، باید کتابخونه‌ های react-leaflet و leaflet رو نصب کنیم:

				
					npm install react-leaflet leaflet

یا اگه از yarn استفاده میکنی:

				
					yarn add react-leaflet leaflet

بعد از نصب، باید CSS مربوط به Leaflet رو توی پروژمون اضافه کنیم. برای این کار، داخل فایل index.css یا App.css این خط رو اضافه کن:

				
					@import 'leaflet/dist/leaflet.css';

یا اگه از Next.js استفاده می‌کنی، می‌تونی توی _app.js این کار رو انجام بدی:

				
					import 'leaflet/dist/leaflet.css';

ساخت یک نقشه ساده 🙂

حالا بیاید یه نقشه‌ی ساده رو توی React نمایش بدیم:

				
					import React from "react";
import { MapContainer, TileLayer } from "react-leaflet";

const MyMap = () => {
  return (
    <MapContainer center={[35.6892, 51.3890]} zoom={12} style={{ height: "500px", width: "100%" }}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="https://frontendi.com" data-wpel-link="internal">اسم سایت خودتون</a> contributors'
      />
    </MapContainer>
  );
};

export default MyMap;

🔹 MapContainer: یه کامپوننت Wrapper برای نقشه هست که بقیه اِلِمان هارو داخلش میذاریم.
🔹 center: موقعیت پیشفرض نقشه که همون ابتدا نمایش داده میشه (مثلاً تهران با عرض 35.6892 و طول 51.3890)
🔹 zoom: مقدار بزرگنمایی اولیه/پیشفرض
🔹 TileLayer: لایه‌ی نقشه که اطلاعات بصری رو نمایش میده (اینجا از OpenStreetMap استفاده کردیم)

اضافه کردن مارکر (Marker)

حالا که نقشمون آمادست، بیایید یه مارکر بهش اضافه کنیم:

				
					import React from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";

const MyMap = () => {
  return (
    <MapContainer center={[35.6892, 51.3890]} zoom={12} style={{ height: "500px", width: "100%" }}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="https://frontendi.com" data-wpel-link="internal">سایت سایتموووون</a> contributors'
      />
      <Marker position={[35.6892, 51.3890]}>
        <Popup>اینجا یه مارکر داریم که تهران رو نشون میده!</Popup>
      </Marker>
    </MapContainer>
  );
};

export default MyMap;

🔹 Marker: مشخص‌کننده‌ ی یک نقطه‌ ی خاص روی نقشه. ( مثلا آدرس شرکت یا .. )
🔹 Popup: یه باکس اطلاعاتی که وقتی روی مارکر کلیک می‌کنیم، نمایش داده میشه و میتونه اطلاعاتی درمورد اون لوکیشن باشه.

کنترل کردن رویداد ها (Events)

مثلاً بخوایم وقتی روی نقشه کلیک میکنیم، مختصات اون نقطه رو بگیریم:

				
					import React from "react";
import { MapContainer, TileLayer, useMapEvents } from "react-leaflet";

const ClickHandler = () => {
  useMapEvents({
    click: (e) => {
      alert(`مختصات: ${e.latlng.lat}, ${e.latlng.lng}`);
    },
  });
  return null;
};

const MyMap = () => {
  return (
    <MapContainer center={[35.6892, 51.3890]} zoom={12} style={{ height: "500px", width: "100%" }}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="https://frontendi.com" data-wpel-link="internal">فرانت اندی</a> contributors'
      />
      <ClickHandler />
    </MapContainer>
  );
};

export default MyMap;

اینجا از useMapEvents برای گرفتن رویداد کلیک استفاده کردیم و با alert مختصات کلیک‌ شده رو نشون دادیم.

 

کد یه نقشه کامل و داینامیک!

تیکه کد زیر، یه کامپوننت داینامیک برای نمایش یک موقعیت مکانی با marker و popup روی اون لوکیشن هست. شخصا خودم از این کد توی پروژه ها استفاده میکنم :

 

 

				
					'use client';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';

interface MapProps {
  latitude: number;
  longitude: number;
  zoom?: number;
  className?: string;
}

const ReactLeafletMap: React.FC<MapProps> = ({
  latitude,
  longitude,
  zoom = 11,
  className,
}) => {
  return (
    <MapContainer
      center={[latitude, longitude]}
      zoom={zoom}
      className={`${className} z-[1]`}
    >
      <TileLayer url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' />
      <Marker position={[latitude, longitude]}>
        <Popup>فِرانت اِندی</Popup>
      </Marker>
    </MapContainer>
  );
};

export default ReactLeafletMap;

درمورد تیکه کد بالا، کافیه کامپوننت ReactLeafletMap رو داخل پروژتون قرار بدید و درهرجایی که نیاز به نمایش نقشه داشتید، فراخوانیش کنید.

باید موقعیت مکانی لوکیشنی که میخواید رو بصورت props بهش پاس بدید ( موقعیت مکانی لوکیشن مدنظرتون رو میتونید از Google Map بگیرید )

همچنین میتونید مقدار پیشفرض زوم، className و .. رو بهش بدید. دقت کنید که این یک map ساده هست و شما میتونید بر اساس نیاز خودتون توسعش بدید 🙂

جمع‌بندی

توی این مقاله یاد گرفتیم:
✅ react-leaflet چیه و چرا استفاده میشه؟
✅ چطور یه نقشه‌ ی ساده توی React بسازیم؟
✅ چطور مارکر و Popup اضافه کنیم؟
✅ چطور رویدادهای نقشه رو کنترل کنیم؟

البته react-leaflet کلی قابلیت دیگه مثل رسم چندضلعی، مسیر‌یابی، لایه‌های پیشرفته، فیلترهای مکانی و … داره که اگه نیاز داشتید میتونید توی پروژتون ازشون استفاده کنید.

 یه wrapper برای کتابخونه Leaflet که استفاده از اون رو توی پروژه‌ های React راحت‌ تر و بهینه‌ تر میکنه.

معمولاً به یکی از این دلایل هست:

  • فراموش کردی leaflet.css رو ایمپورت کنی.
  • استایل height و width به نقشه ندادی.

از کامپوننت <Marker> همراه با position استفاده کن ( کدش رو داخل مقاله گذاشتم )

با استفاده از zoom و center در <MapContainer>

با useMapEventsمیتونی.

 بله! فقط باید TileLayer رو تغییر بدی. مثلاً برای Google Maps:

<TileLayer url=”https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}” />

اگه تو نت سرچ کنی یه عالمه TileLayer رایگان وجود داره که هرکدوم استایل یا حتی زبان خاص خودشونو دارن که میتونی ازشون استفاده کنی.

مثلا TileLayer فارسی با استایل آب و هوا!

 از <Polygon> استفاده کن:

<Polygon positions={[[lat1, lng1], [lat2, lng2], [lat3, lng3]]} />

 با State و onDragend برای مارکر:

<Marker draggable onDragend={(e) => console.log(e.target.getLatLng())} />

 نه مستقیماً! باید داینامیک ایمپورت کنی تا توی client-side اجرا بشه:

const Map = dynamic(() => import(‘./MyMap’), { ssr: false });

اگه این کار رو نکنید موقع بیلد ارور میگیرید :/

سوالات متداول فِرانت اِندی
درباره احمد احمدنژاد

من یه برنامه نویس و توسعه دهنده وب هستم که عاشق دنیای صفر و یکم❤️

4 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

دیدگاهتان را بنویسید