React Mapbox GL

نسخه جاری v5.2

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

دستورالعمل‌های ارائه یافته به شما این امکان را می‌دهد که نقشه Mapbox GL Js را در فریم‌ورک react پیاده کنید.

شروع سریع

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

ماژول Node.js

نصب پکیج‌های npm

npm install react-mapbox-gl mapbox-gl@1.13.0 --save

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

فایل‌ CSS زیر را می توان در تگ head فایل HTML که در پوشه public تحت عنوان index.html قرار دارد، اضافه کنید.

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

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

کد زیر را در فایلی که می‌خواهید نقشه را نمایش دهید، اضافه کنید.

import React from 'react'
import ReactMapboxGl from 'react-mapbox-gl'
import mapboxgl from 'mapbox-gl'

const Map = ReactMapboxGl({ accessToken: '' })

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 App = () =>
  (<Map
      zoom={[6]}
      center={[51.41, 35.7575]}
      style='https://api.parsimap.ir/styles/parsimap-streets-v11?key=PMI_MAP_TOKEN'
      containerStyle={{ height: '100vh', width: '100vw' }}
    />
  )

export default App

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