JSPM – mmap-fardup@1.0.0

Package Exports

mmap-fardup
mmap-fardup/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (mmap-fardup) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

README.md برای پکیج شما

# MapBox Component

`MapBox` یک کامپوننت قدرتمند مبتنی بر **React** و **OpenLayers** است که قابلیت‌های پیشرفته‌ای برای نمایش و تعامل با نقشه‌ها ارائه می‌دهد. این کامپوننت از ویژگی‌های متنوعی مانند مکان‌یابی، تعاملات کاربری، و مدیریت لایه‌ها پشتیبانی می‌کند.

---

## **نصب**

ابتدا پکیج را نصب کنید:
```bash
npm install your-package-name

استفاده

مثال ساده

import React from 'react';
import MapBox from 'your-package-name';

const App = () => {
  return (
    <MapBox
      zoom={5}
      center={[51, 32]}
      userLocation={true}
    />
  );
};

export default App;

مثال پیشرفته با پراپس‌های اضافی

import React, { useState } from 'react';
import MapBox from 'your-package-name';

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

  return (
    <MapBox
      zoom={6}
      center={[51, 32]}
      mapParams={{
        scrollZoom: true,
        customAttribution: "© My Custom Map",
        interactive: true,
      }}
      userLocation={true}
      setUserCoords={setUserCoords}
      fitBounds={[{ lng: 50, lat: 30 }, { lng: 52, lat: 34 }]}
      widthMap="100%"
      heightMap="500px"
      onClick={(e, coords) => {
        console.log("Clicked at:", coords);
      }}
    >
      <div>اضافه کردن کامپوننت‌های سفارشی در نقشه</div>
    </MapBox>
  );
};

export default App;

پراپس‌ها

نام پراپس	نوع	پیش‌فرض	توضیحات
`zoom`	`number`	`5`	سطح بزرگ‌نمایی نقشه.
`center`	`[number, number]`	`[51, 32]`	مختصات مرکز نقشه به فرمت `[طول جغرافیایی، عرض جغرافیایی]`.
`mapParams`	`object`	`{}`	تنظیمات نقشه شامل `scrollZoom`, `interactive`, و موارد دیگر.
`userLocation`	`boolean`	`false`	فعال‌سازی مکان‌یابی کاربر.
`setUserCoords`	`function`	`null`	تابعی برای ذخیره مختصات کاربر هنگام استفاده از مکان‌یاب.
`fitBounds`	`[object, object]`	`null`	محدوده نقشه به فرمت `[حداقل مختصات, حداکثر مختصات]` برای تطبیق با آن.
`widthMap`	`string`	`"100%"`	عرض نقشه.
`heightMap`	`string`	`"100vh"`	ارتفاع نقشه.
`onClick`	`function`	`null`	رویداد کلیک روی نقشه که مختصات نقطه کلیک را به عنوان آرگومان دریافت می‌کند.
`onMoveEnd`	`function`	`null`	رویداد پایان حرکت روی نقشه.

ویژگی‌ها

پشتیبانی از OpenLayers.
قابلیت نمایش مکان کاربر با آیکون.
مدیریت لایه‌ها با استفاده از LayerManager.
پشتیبانی از انواع تعاملات مانند Drag, Zoom, و Rotate.
رویدادهای متنوع نقشه مانند onClick, onMoveEnd, و موارد دیگر.

پشتیبانی از رویدادها

رویدادهای مختلفی توسط این کامپوننت پشتیبانی می‌شوند. برای استفاده از آن‌ها، می‌توانید نام رویداد را به‌عنوان پراپس ارسال کنید. مثال:

<MapBox
  onClick={(e, coords) => console.log("Clicked at:", coords)}
  onMoveEnd={(e) => console.log("Move ended:", e)}
/>

لیست کامل رویدادها:

onClick: کلیک روی نقشه.
onMoveStart: شروع حرکت روی نقشه.
onMoveEnd: پایان حرکت روی نقشه.
onZoomStart: شروع زوم.
onZoomEnd: پایان زوم.
و موارد دیگر.

نکات مهم

پیش‌نیازها:
- پروژه باید از React 18 یا بالاتر پشتیبانی کند.
- اگر از Next.js استفاده می‌کنید، پکیج به‌صورت کامل با آن سازگار است.
محدوده استفاده:
- این کامپوننت برای سیستم‌های اطلاعات جغرافیایی (GIS) و پروژه‌هایی که نیاز به تعامل با نقشه دارند، طراحی شده است.