mmap-fardup

یک پکیج کلاینت نقشه مبتنی بر React با قابلیت‌های پویا، طراحی شده برای ساده‌سازی کار با OpenLayers و GeoJSON در اپلیکیشن‌های React.

نصب

پکیج را با استفاده از npm نصب کنید:

``bash
npm install mmap-fardup
`

شروع به کار

در اینجا یک مثال ساده برای شروع ارائه شده است:

`jsx
import React from 'react';
import MapBox from 'mmap-fardup';

const App = () => {
return (
zoom={5}
center={[51, 32]}
userLocation={true}
apiKey={"این مقدار باید از سامانه نقشه گرفته شود"}
mapParams={{
scrollZoom: true,
customAttribution: 'Map data © OpenLayers',
}}
style={{ width: '100%', height: '100vh' }}
/>
);
};

export default App;
`

این کد یک نقشه ساده با قابلیت موقعیت‌یابی کاربر نمایش می‌دهد.

کامپوننت‌ها

$3

#### توضیحات
کامپوننت اصلی برای نمایش نقشه. این کامپوننت تنظیماتی برای زوم، مرکز نقشه، موقعیت‌یابی کاربر، تعاملات، و رویدادها ارائه می‌دهد.

#### Props

| Prop | نوع | مقدار پیش‌فرض | توضیحات |
| --------------- | -------------------------- | ------------- | ---------------------------------------------------------- |
| zoom | number | 5 | سطح زوم اولیه نقشه. |
| center | [number, number] | [51, 32] | مرکز اولیه نقشه به صورت [طول جغرافیایی, عرض جغرافیایی]. |
| fitBounds | [{lng, lat}, {lng, lat}] | null | محدوده‌ای که نقشه باید به آن زوم کند. |
| mapParams | object | {} | تنظیمات نقشه، شامل تعاملات و کنترل‌ها. |
| userLocation | boolean | false | فعال‌سازی ردیابی و تمرکز روی موقعیت کاربر. |
| setUserCoords | function | null | تابعی برای دریافت مختصات کاربر. |
| widthMap | string | "100%" | عرض نقشه (CSS). |
| heightMap | string | "100vh" | ارتفاع نقشه (CSS). |
| style | object | {} | استایل‌های دلخواه برای کانتینر نقشه. |
| onClick | function | null | رویدادی که هنگام کلیک روی نقشه فراخوانی می‌شود. |
| onMoveEnd | function | null | رویدادی که هنگام اتمام حرکت نقشه فراخوانی می‌شود. |
| سایر رویدادها | function | null | لیستی از رویدادهای موجود مانند onZoom, onDrag, و غیره. |

#### mapParams تنظیمات

| کلید | نوع | مقدار پیش‌فرض | توضیحات |
|---------------------|------------|----------------|----------------------------------------------------------------------|
| touchZoomRotate | boolean | true | فعال‌سازی یا غیرفعال‌سازی تعامل چرخش و زوم با لمس. |
| doubleClickZoom | boolean | true | فعال یا غیرفعال کردن زوم با دابل کلیک. |
| keyboard | boolean | true | فعال‌سازی یا غیرفعال‌سازی تعاملات صفحه‌کلید (مانند زوم و جابجایی). |
| multiWorld | boolean | false | فعال‌سازی یا غیرفعال‌سازی چندجهانی بودن نقشه. |
| preserveDrawingBuffer | boolean | false | حفظ بافر رندرینگ نقشه برای اسکرین‌شات‌ها. |
| scrollZoom | boolean | true | فعال یا غیرفعال کردن زوم با اسکرول. |
| customAttribution | string | "" | متن اختصاصی برای Attribution. |
| hash | boolean | false | فعال‌سازی نمایش وضعیت نقشه در URL. |
| maxZoom | number | 20 | حداکثر سطح زوم. |
| minZoom | number | 0 | حداقل سطح زوم. |
| zoomSlider | boolean | true | نمایش یا مخفی کردن کنترل زوم اسلایدر. |
| interactive | boolean | true | فعال‌سازی یا غیرفعال‌سازی تعاملات کاربر با نقشه. |

#### رویدادهای پشتیبانی‌شده

این کامپوننت از رویدادهای زیر پشتیبانی می‌کند:

- onClick: هنگامی که کاربر روی نقشه کلیک می‌کند. بازگشت اطلاعات شامل مختصات کلیک‌شده است.
- onMove: زمانی که کاربر نقشه را جابه‌جا می‌کند. می‌توانید اطلاعات حرکت فعلی نقشه را دریافت کنید.
- onMoveEnd: بعد از اتمام جابه‌جایی. بازگشت اطلاعات شامل مرکز جدید نقشه و سطح زوم است.
- onZoom: هنگام تغییر سطح زوم. اطلاعات زوم فعلی را برمی‌گرداند.
- onDrag: زمانی که کاربر لایه‌ها را درگ می‌کند. اطلاعات مختصات جدید در دسترس است.
- onStyleLoad: هنگامی که سبک نقشه بارگذاری می‌شود.
- onRender: در هر فریم رندر نقشه این رویداد اجرا می‌شود.

برای استفاده از هر رویداد، کافی است به صورت زیر تعریف کنید:

`jsx
onClick={(event, coords) => console.log('نقشه کلیک شد در:', coords)}
onMoveEnd={() => console.log('حرکت نقشه به پایان رسید.')}
onZoom={(zoom) => console.log('زوم تغییر کرد به:', zoom)}
/>
`

#### مثال

`jsx
import React, { useState } from 'react';
import MapBox from 'mmap-fardup';

const App = () => {
const [userCoords, setUserCoords] = useState(null);

const handleMapClick = (event, coords) => {
console.log('نقشه کلیک شد در:', coords);
};

return (
zoom={5}
center={[51, 32]}
userLocation={true}
setUserCoords={setUserCoords}
mapParams={{
scrollZoom: true,
doubleClickZoom: false,
}}
onClick={handleMapClick}
/>
);
};

export default App;
`

---

$3

#### توضیحات

ابزاری برای رسم و ویرایش اشکال (نقاط، خطوط، چندضلعی‌ها) روی نقشه.

#### Props

| Prop | نوع | مقدار پیش‌فرض | توضیحات |
| -------------- | ---------- | ------------- | -------------------------------------------- |
| enabledTools | string[] | ['Polygon'] | ابزارهای فعال (مانند Point, LineString). |
| onDrawEnd | function | null | تابعی که پس از اتمام رسم فراخوانی می‌شود. |

#### مثال

`jsx
import React from 'react';
import MapBox from 'mmap-fardup';
import {DrawingManager} from 'mmap-fardup';

const App = () => {
const handleDrawEnd = (data) => {
console.log('هندسه رسم‌شده:', data);
};

return (



);
};

export default App;
`

---

$3

#### توضیحات

داده‌های GeoJSON را به نقشه بارگذاری کرده و برای نمایش و ویرایش استفاده می‌کند.

#### Props

| Prop | نوع | مقدار پیش‌فرض | توضیحات |
| ------------- | -------- | ------------- | --------------------------------------------- |
| geojsonData | object | null | داده‌های GeoJSON که به نقشه بارگذاری می‌شوند. |

#### مثال

`jsx
import React from 'react';
import MapBox from 'mmap-fardup';
import {DrawingManager,GeoJSONLoader} from 'mmap-fardup';


const geojsonData = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [51, 32],
},
properties: {
name: 'نمونه نقطه',
},
},
],
};

const App = () => {
const handleDrawEnd = (data) => {
console.log('هندسه رسم‌شده:', data);
};

return (




);
};

export default App;
`

---

$3

#### توضیحات

کامپوننت GeoJSONLayer به شما امکان می‌دهد داده‌های GeoJSON را به‌عنوان یک لایه به نقشه اضافه کنید و با استفاده از امکاناتی مانند استایل‌دهی سفارشی و مدیریت رویدادها، آن را نمایش دهید. این کامپوننت از انواع هندسه‌های Point, LineString, و Polygon پشتیبانی می‌کند.

#### Props

| Prop | نوع | مقدار پیش‌فرض | توضیحات |
| ------------- | -------- | ------------- | ------------------------------------------------ |
| geojsonData | object | null | داده‌های GeoJSON که روی نقشه نمایش داده می‌شوند. |
| layerOptions | object | {} | تنظیمات سفارشی برای لایه نقشه. |
| sourceOptions| object | {} | تنظیمات مربوط به منبع داده‌های لایه. |
| linePaint | object | {} | استایل‌های سفارشی برای خطوط. |
| fillPaint | object | {} | استایل‌های سفارشی برای چندضلعی‌ها. |
| onMouseDown | function | null | رویداد فشار دادن ماوس روی ویژگی‌ها. |
| onMouseUp | function | null | رویداد رها کردن ماوس روی ویژگی‌ها. |
| onMouseMove | function | null | رویداد حرکت ماوس روی ویژگی‌ها. |
| onMouseEnter| function | null | رویداد ورود ماوس به یک ویژگی. |
| onMouseLeave| function | null | رویداد خروج ماوس از یک ویژگی. |
| onClick | function | null | رویداد کلیک روی ویژگی‌های GeoJSON. |
| onFeatureSelect| function | null | رویدادی که هنگام انتخاب ویژگی توسط کاربر فراخوانی می‌شود. |
| enableSelect| boolean | false | امکان انتخاب ویژگی‌ها با کلیک یا تعامل. |
| before | number | 1 | مشخص‌کننده ترتیب لایه در نقشه. |


#### مثال

`jsx
import React from 'react';
import MapBox from 'mmap-fardup';
import {GeoJSONLayer} from 'mmap-fardup';

const geojsonData = {

type: 'Polygon',
coordinates: [
[
[50, 31],
[52, 31],
[52, 33],
[50, 33],
[50, 31],
],
],

};

const App = () => {
return (



);
};

export default App;
`


---

$3

#### توضیحات

کامپوننت Marker برای افزودن نقاط (Marker) به نقشه استفاده می‌شود. شما می‌توانید مختصات، تصویر و استایل‌های دلخواه را برای Markerها تنظیم کنید و به تعاملاتی مانند کلیک روی نقاط گوش دهید.

#### Props

| Prop | نوع | مقدار پیش‌فرض | توضیحات |
| ------------- | ----------- | ------------------------ | -------------------------------------------------------------------- |
| points | array | [] | آرایه‌ای از نقاط به همراه مختصات و اطلاعات مربوطه. |
| anchor | string | "center" | موقعیت لنگر تصویر Marker (مانند "top", "center", "bottom"). |
| offset | array | [0, 0] | جابه‌جایی افقی و عمودی Marker به صورت [x, y]. |
| image | string | "./images/location2.svg" | آدرس تصویر Marker. |
| onClick | function | null | رویدادی که هنگام کلیک روی Marker فراخوانی می‌شود. |
| style | object | {} | تنظیمات استایل Markerها. |
| className | string | null | کلاس CSS سفارشی برای Markerها. |

#### مثال

`jsx
import React from 'react';
import MapBox from 'mmap-fardup';
import {Marker} from 'mmap-fardup';

const App = () => {
const points = [
{ coordinates: [51, 32], properties: { name: 'Point 1' } },
{ coordinates: [52, 33], properties: { name: 'Point 2' } },
];

const handleMarkerClick = (event, feature) => {
console.log('Clicked Marker:', feature.getProperties());
};

return (



);
};

export default App;
``

---

لایسنس

این پروژه تحت مجوز MIT منتشر شده است. برای جزئیات بیشتر به فایل LICENSE مراجعه کنید.