Mapbox GL JS

نسخه جاری v1.13.0

کتابخانه Mapbox GL JS مبتنی بر JavaScript است که از WebGL (کتابخانه گرافیکی JavaScript) برای ارائه نقشه‌های تعاملی و فناوری vector tile استفاده می‌کند.

دستورالعمل‌های قرار گرفته در اینجا تنها مراحل اولیه راه‌اندازی نقشه است. جهت اطلاع داشتن از نحوه عملکرد نقشه، نمونه‌ها و پیادسازی کامل آن، می‌توانید به مستندات مرجع، مراجعه فرمائید.

شروع سریع

برای شروع نیاز به داشتن توکن پارسی‌مپ و بکارگیری سرویس استایل نقشه است. در ادامه دو روش بکارگیری نقشه بر اساس افزوده شدن اسکریپت و یا ماژول شرح داده می‌شود.

CDN پارسی‌مپ

افزودن فایل‌های کتابخانه

فایل‌های JavaScript و CSS زیر را در تگ head فایل HTML اضافه کنید.

<script src="https://cdn.parsimap.ir/third-party/mapbox-gl-js/v1.13.0/mapbox-gl.js"></script>
<link
  href="https://cdn.parsimap.ir/third-party/mapbox-gl-js/v1.13.0/mapbox-gl.css"
  rel="stylesheet"
/>

افزودن نقشه به وب سایت

کد زیر را در تگ body فایل HTML قرار دهید.

<div id="map" style="width: 400px; height: 300px"></div>
<script>
  mapboxgl.setRTLTextPlugin(
    'https://cdn.parsimap.ir/third-party/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js',
    null,
  )

  const map = new mapboxgl.Map({
    container: 'map',
    style: 'https://api.parsimap.ir/styles/parsimap-streets-v11?key=PMI_MAP_TOKEN',
    center: [51.4, 35.7],
    zoom: 8,
  })
</script>

به طور پیش فرض کتابخانه Mapbox GL JS قادر به پشتیبانی از زبان‌های RTL برای نمونه فارسی نیست، که برای این منظور از پلاگین mapbox-gl-rtl-text استفاده باید نمود. برای استفاده از استایل‌های پارسی‌مپ لازم است بجای عبارت PMI_MAP_TOKEN توکن معتبری قرار یابد.

ماژول Node.js

برای پیاده‌سازی نقشه Mapbox تا نسخه 1.13.0 در جاوا اسکریپت، می‌توانید بدون تهیه توکن Mapbox از سرویس styles استفاده نمایید. با توجه به پروتکل‌های جدید Mapbox برای دریافت نسخه‌های جدیدتر (2.0.0 و بالاتر)، نیاز به تهیه توکن Mapbox است. برای این منظور، می‌توانید به Mapbox Pricing رفته و یا از طریق پارسی‌مپ اقدام نمایید.

دستورالعمل‌های زیر فرض بر این می‌گیرند که پروژه بر اساس یکی از تکنولوژی‌های یکپارچه‌سازی ماژول‎های JavaScript، پیکربندی شده باشد.

بکارگیری نقشه به صورت ماژول، نیازمند پیکربندی پروژه براساس تکنولوژی‌هایی از قبیل Webpack, Browserify به منظور یکپارچه‌سازی ماژول‌های JavaScript است.

نصب پکیج npm

npm install mapbox-gl@1.13.0 --save

افزودن فایل‌های ماژول

فایل‌ CSS زیر را در تگ head فایل HTML قرار دهید.

<link
  href="https://cdn.parsimap.ir/third-party/mapbox-gl-js/v1.13.0/mapbox-gl.css"
  rel="stylesheet"
/>

وارد کردن ماژول نقشه

در کدایجاد نقشه خصوصیت target در سازنده کلاس Map را برابر id المنتی که درون صفحه HTML مدنظر است، قرار دهید.

import mapboxgl from 'mapbox-gl'

mapboxgl.setRTLTextPlugin(
  'https://cdn.parsimap.ir/third-party/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js',
  null,
)

const map = new mapboxgl.Map({
  container: 'map',
  style: 'https://api.parsimap.ir/styles/parsimap-streets-v11?key=PMI_MAP_TOKEN',
  center: [51.4, 35.7],
  zoom: 8,
})