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

سلام امیدوارم حالتون خوب باشه . گوگل مدتهاست که سرویس نقشه خودش (google map) رو پولی کرده . هر چند که هزینش زیاد نیست ولی برای ما سخت و نشدنیه . به همین خاطر تصمیم بر اینه که بدنبال سرویس های مشابه و صد البته رایگان باشیم . خب mapbox میتونه سرویس مورد نظر ما باشه . صد البته که سرویس های دیگه مثل leaflet و mapwize هم هستن اما mapbox یه چیز دیگست !

خب ما برای مقایسه سرویس ها اینجا نیستیم ، هدف ما استفاده ازشونه پس زیاد فرقی نداره که کدوم یکی رو انتخاب میکنیم . فقط این مهمه که قشنگ استفاده کنیم ازشون . خب بریم سراغ اصل مطلب . هدف ما راه اندازی یه سیستم سرچ ساده روی مپ هست که با استفاده از Reactjs روی پلتفرم وب قراره اجرا بشه ، هست . قدم اول رو برمیداریم . من الان دارم روی ویندوز و با استفاده از Visual Studio code این کار رو انجام میدم و بهتون پیشنهاد میکنم از همین ادیتور استفاده کنید . برای نصب ری اکت به صفحه ی گیت هابش میریم و خیلی راحت با نوشتن یک کامند در ترمینال ویژال استودیو ، ری اکت رو نصب میکنیم .

npx create-react-app mapbox-search
cd mapbox-search
npm start

حرکت اول ادیت کردن فایل app.js هست که میخوایم پروژمون رو در قالبش انجام بدیم .

import React, { Component } from 'react';
import './App.css';
class App extendeds Components {
    render() {
    return (
        <div className="App">
            <h1>جست و جوی نقشه </h1>
        </div>
        );
    }
}
export default App;

خب فایل ما این شکلی میشه .

کار بعدی که باید انجام بدیم ثبت نام و دریافت access token از سایت مپ باکس هست که روال روتینی داره و به راحتی نصب میشه .

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

npm install mapbox-gl --save 

بعد از پایان نصب اول آدرس فایل css رو توی فایل App.js قرار میدیم .

<link href='https://api.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css' rel='stylesheet' />

خب خط پایین رو قبل از render اضافه کنیم :

import mapboxgl from 'mapbox-gl'
...

componentDidMount() {
mapboxgl.accessToken = '<توکن رو اینجا قرار بدید>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11'
});
}
...
<div id="map"></div>

خب تبریک میگم ما یه نقشه داریم .

یه مشکلی که ما داریم اینه که نقشه خوب ست نمیشه روی صفحه پس یه استایل اضافه میکنیم .

#map {
    text-align : left;
    }

خب بریم سراغ اضافه کردن قابلیت سرچ .

برای اینکه بخوایم سرچ رو اضافه کنیم برای پکیج mapbox-gl-geocoder رو توی اپلیکیشنون نصب کنیم . برای این کار کامند زیر رو وارد میکنیم :

 npm i @mapbox/mapbox-gl-geocoder 
 
 import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder'

و تکه کد کنترل رو اضافه میکنیم .

 map.addControl(new MapboxGeocoder({       accessToken: mapboxgl.accessToken   })); 

باز هم مشکل استایل داریم و تکه کد رو توی فایل استایل خودمون ذخیره میکنیم .

mapboxgl-control-container {
    position: relative;
    top:0
    }

خب حالا نقشه داریم با قابلیت سرچ . البته باید استایلش رو بر اساس سلیقه ی خودتون درست کنین .

امیدوارم مورد استفاده قرار بگیره . لطفا نظراتتون رو برام بنویسید و همچنین میتونید پروژه رو از روی گیت هابم بردارید . موفق و پیروز باشید .