کتابخانه 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" />
<script src="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
yarn
pnpm

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

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

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