کتابخانه Mapbox-gl-js نقشه پلتفرم نشان

اطلاع

برای استفاده از کیت‌های توسعه‌ی نشان، ابتدا بایستی از طریق ثبت نام رایگان در پنل توسعه‌دهندگان نشان، اقدام به دریافت کلید دسترسی (API Key) برای وب‌سایت یا اپلیکیشن تحت وب خود نمایید.

• ثبت نام و دریافت کلید دسترسی
• قوانین و شرایط استفاده

این کتابخانه برای راحتی بیشتر توسعه‌دهندگان وب ایجاد شده و قابلیت‌های زیر را دارا می‌باشد:

• تغییر استایل نقشه
• نمایش لایه شبکه راه‌ها (Network)، بروز و همگام با مسیریاب نشان
• نمایش لایه مکان‌ها (POIs)، بروز و همگام با مسیریاب نشان
• نمایش لایه رنگ‌بندی ترافیک مسیرها، بروز و همگام با مسیریاب نشان

علاوه بر این، شما می‌توانید از کلیه امکاناتی که کتابخانه Mapbox در اختیار شما قرار می‌دهد نیز استفاده بفرمایید. بر خلاف اینکه این کامپوننت بر پایه‌ی کتابخانه Mapbox-gl-js بنا شده، برای استفاده با تنظیمات پیش‌فرض نیازی به داشتن دانش عمیق از این کتابخانه ندارید. ولی برای شخصی‌سازی‌های بیشتر، می‌توانید از امکانات کامل این کتابخانه استفاده نمایید.

برای دسترسی به توابع کتابخانه Mapbox GL، کافیست به جای استفاده از کلاس mapboxgl از کلاس نشان (nmp_mapboxgl) استفاده کنید. به طور مثال، برای ایجاد یک نشانگر (Marker) بر روی نقشه:

کد Mapbox استاندارد:

new mapboxgl.Marker().setLngLat([51.3890, 35.6892]).addTo(map);

کد معادل با کتابخانه نشان:

new nmp_mapboxgl.Marker().setLngLat([51.3890, 35.6892]).addTo(map);

دمو و کامپوننت‌های مرتبط

• کامپوننت React: مستندات کامپوننت React نقشه نشان
• کامپوننت Vue: مستندات کامپوننت Vue.js نقشه نشان

راه‌اندازی نقشه

این کتابخانه به دو روش CDN و NPM قابل راه‌اندازی است.

روش اول: استفاده از CDN

کافیست فایل‌های CSS و JavaScript زیر را به صفحه HTML خود اضافه کنید:

<link rel="stylesheet" href="[https://static.neshan.org/sdk/mapboxgl/v1.13.2/neshan-sdk/v1.1.5/index.css](https://static.neshan.org/sdk/mapboxgl/v1.13.2/neshan-sdk/v1.1.5/index.css)" />
<script src="[https://static.neshan.org/sdk/mapboxgl/v1.13.2/neshan-sdk/v1.1.5/index.js](https://static.neshan.org/sdk/mapboxgl/v1.13.2/neshan-sdk/v1.1.5/index.js)"></script>

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

const map = new nmp_mapboxgl.Map({
    mapType: nmp_mapboxgl.Map.mapTypes.neshanVector,
    container: "map", // ID تگ HTML که نقشه در آن نمایش داده می‌شود
    zoom: 11,
    pitch: 0,
    center: [51.389, 35.6892],
    minZoom: 2,
    maxZoom: 21,
    trackResize: true,
    mapKey: "YOUR-MAP-API-KEY",
    poi: true,
    traffic: true,
    mapTypeControllerOptions: {
        show: true,
        position: 'bottom-left'
    }
});

روش دوم: نصب از طریق NPM

ابتدا پکیج را با استفاده از مدیر بسته دلخواه خود نصب کنید:

npm

npm install @neshan-maps-platform/mapbox-gl --save

yarn

yarn add @neshan-maps-platform/mapbox-gl

pnpm

pnpm add @neshan-maps-platform/mapbox-gl

سپس فایل CSS و ماژول را در پروژه خود import کرده و نقشه را راه‌اندازی کنید:

import '@neshan-maps-platform/mapbox-gl/dist/NeshanMapboxGl.css';
import nmp_mapboxgl from '@neshan-maps-platform/mapbox-gl';

const map = new nmp_mapboxgl.Map({
    mapType: nmp_mapboxgl.Map.mapTypes.neshanVector,
    container: "map",
    zoom: 11,
    pitch: 0,
    center: [51.389, 35.6892],
    minZoom: 2,
    maxZoom: 21,
    trackResize: true,
    mapKey: "YOUR-MAP-API-KEY",
    poi: true,
    traffic: true,
    isTouchPlatform: false,
    mapTypeControllerOptions: {
        show: true,
        position: 'bottom-left'
    }
});

پارامترهای ورودی (Props)

پارامتر	توضیحات	نوع	الزامی
mapKey	کلید نقشه که از پنل کاربری نشان دریافت کرده‌اید.	String	بله
container	id تگ HTML که نقشه در آن نمایش داده می‌شود.	String	بله
center	مختصات مرکز اولیه نقشه به صورت [lng, lat].	Array	بله
zoom	سطح بزرگنمایی اولیه نقشه.	Number	بله
pitch	زاویه دوربین نسبت به سطح زمین (بین 0 تا 85).	Number	خیر
poi	نمایش یا عدم نمایش لایه مکان‌ها (POIs) روی نقشه.	Boolean	بله
traffic	نمایش یا عدم نمایش لایه خطوط ترافیک.	Boolean	بله
mapType	استایل نقشه. مقادیر مجاز: neshanVector, neshanVectorNight, neshanRaster, neshanRasterNight. (پیش‌فرض: neshanVector)	Object	بله
mapTypeControllerOptions	تنظیمات کنترلر تغییر استایل نقشه. show برای فعال‌سازی و position برای تعیین محل قرارگیری (top-left, top-right, bottom-left, bottom-right).	Object	خیر
isTouchPlatform	اگر می‌خواهید کنترلرهای نقشه فقط به حالت موبایل یا دسکتاپ نمایش داده شوند.	Boolean	خیر
trackResize	امکان تغییر اندازه نقشه در صورت تغییر اندازه پنجره مرورگر.	Boolean	خیر

دریافت پروژه نمونه Mapboxgl نشان

نکته

کتابخانه نشان از نسخه ۱ کتابخانه Mapbox GL استفاده می‌کند. شما می‌توانید از تمامی امکانات این نسخه در پروژه‌های خود استفاده کنید. برای مطالعه مستندات رسمی به لینک زیر مراجعه کنید: مستندات Mapbox GL JS v1

مثال‌ها

افزودن نشانگر (Marker) به نقشه

افزودن آیکون شخصی‌سازی‌شده به نقشه

رسم مسیر بر روی نقشه