فریم‌ورک ReactJS

در پارسی‌مپ پشتیبانی از توسعه نقشه تعاملی در فریم‌ورک ReactJS با استفاده از پکیج مربوط به react-mapbox-gl فراهم شده است. جهت نمایش نقشه با سبک‌های گوناگون می‌توان از مجموعه سبک‌های پارسی‌مپ استفاده کرد. در مراحل بعدی نحوه بکارگیری سرویس‌های پارسی‌مپ در فریم‌ورک ReactJS با استفاده از SDK مربوط به react-mapbox-gl شرح داده می‌شود.

نصب پکیج npm

npm install react-mapbox-gl mapbox-gl --save

فراخوانی ماژول‌ها

ماژول‌های مربوط به ReactJS و MapBoxGL به منظور افزودن افزونه راست‌چین کردن تایل‌های Vector و افزودن نقشه در پروژه باید فراخوانی شوند.

import React from "react";
import ReactDOM from "react-dom";
import { setRTLTextPlugin } from "mapbox-gl";
import ReactMapboxGl from "react-mapbox-gl";

تنظیمات اولیه

برای راست‌چین کردن تایل‌های Vector از متد setRTLTextPlugin که ماژول آن قبلاً فراخوانی شد، استفاده می‌شود. برای ایجاد نقشه ابتدا لازم است که accessToken با مقدار معتبر parsimap.accessToken که تایل‌های پارسی‌مپ برای نمایش نیاز به آن دارد، مقداردهی شود.

setRTLTextPlugin(
  "https://www.parsimap.ir/scripts/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.0/mapbox-gl-rtl-text.js"
);

const Map = ReactMapboxGl({ accessToken: "parsimap.accessToken" });

بکارگیری نقشه

نقشه با استفاده از سرویس تایل پارسی‌مپ در فریم‌ورک ReactJS توسط قطعه کدزیر ایجاد می‌گردد. سبک استفاده شده Street از نوع Vector است. برای اطلاع بیشتر از بکارگیری سبک‌های نقشه و استفاده از سایر سبک‌ها از جمله Gray، Map و Sat می‌توان به بخش سبک‌های تایل نقشه مراجعه کرد.

function App() {
  return (
    <Map
      style="https://www.parsimap.ir/styles/street.json"
      containerStyle={{ height: "100vh", width: "100vw" }}
      center={[51.41, 35.7575]}
      zoom={[18]}
    />
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

کدنهائی

در این بخش تمامی کدهای شرح داده شده در قبل به طور کامل قرار دارد همچنین با دریافت پروژه نمونه، Source به همراه نمونه اجراء شده قابل استفاده خواهد بود. جهت مشاهده راهنمای کامل بکارگیری پکیج و امکانات نقشه می‌توان به مستندات react-mapbox-gl مراجعه کرد.

import React from "react";
import ReactDOM from "react-dom";
import { setRTLTextPlugin } from "mapbox-gl";
import ReactMapboxGl from "react-mapbox-gl";

setRTLTextPlugin(
  "https://www.parsimap.ir/scripts/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.0/mapbox-gl-rtl-text.js"
);

const Map = ReactMapboxGl({ accessToken: "parsimap.accessToken" });

function App() {
  return (
    <Map
      style="https://www.parsimap.ir/styles/street.json"
      containerStyle={{ height: "100vh", width: "100vw" }}
      center={[51.41, 35.7575]}
      zoom={[18]}
    />
  );
}

ReactDOM.render(<App />, document.getElementById("root"));