نحوه کار با مپ باکس و فلاتر مپ (ویرایش 12 آبان 1402)

یکی از بهترین جایگزین های Google Map استفاده از نقشه های Mapbox هستش. چالش های جدید Google Map تحریم ایران و همچنین دریافت هزینه از ابتدای کار شما با این سرویس هست که برای ما کار رو سخت تر میکنه.

با سرویس های Mapbox تا مدتی مشخصی میشه استفاده رایگان داشت. پس برای شروع کار میتونه گزینه مناسبی باشه. من بصورت مرحله به مرحله به شما یاد میدم که چطور میشه با استفاده از ویجت FlutterMap و نقشه های Mapbox بصورت همزمان کار کرد.

اما قبل از شروع به شما لینک یوتوبی رو میخوام معرفی کنم که توسط تیم فلاتر فارسی برنامه ریزی و تهیه شده که خیلی دید خوبی نسبت به کار با مپ به همه میده و توصیه میکنم اگر الان فرصت نکردین و این ویدیو رو چک نکردین، حتما در لیست کارهای خودتون بذاریدش و حتما کامل ببینیدش.

قدم اول نصب پکیج flutter_map داخل فایل pubspec.yaml هستش که اگر نسخه 0.13.1 این پکیج رو نصب کنید نیاز هتش که به آدرس فایل manifest مراجعه کنید و اجازه استفاده مربوطه رو داخلش اضافه کنید.

manifest file direction:
<project root>/android/app/src/main/AndroidManiFest.xml

<uses-permission android:name=”android.permission.INTERNET”/>

حالا شما میتونید از ویجت FlutterMap استفاده کنید اما قبل از این کار باید داخل سایت Mapbox بشید و ثبت نام خودتون رو انجام بدید. توجه داشته باشید که موقع ثبت نام از شما مشخصات پرداخت آنلاین رو میخواد که باید توسط سایت های fake credit card generator از این مرحله عبور کنید. در مورد اطلاعات آدرس و... هم میتونید از این تکنیک استفاده کنید.

در صفحه اول پنل کاربری به شما یک توکن با نام "Default public token" اختصاص داده میشه که نیاز هست اون رو کپی کنید.

داخل صفحه پنل کاربری به شما امکانات و اطلاعات مورد نیاز داده میشه. بر روی “Design in Mapbox Studio” از قسمت “Tools & resources” کلیک کنید و در صفحه جدیدی که برای شما باز میشه روی “New style” کلیک کنید.

ابزار لازم برای طراحی نقشه دلخواه شما اینجا در اختیار شما قرار داره که من مراحل ایجاد نقشه ساده رو در قالب یک عکس نمایش میدم.

بعد از ایجاد نقشه مورد نظر روی آیکون “Share your style” کلیک کنید و در صفحه باز شده تب “Third party” رو انتخاب کنید. سپس گزینه “CARTO” رو انتخاب کنید و “Integration URL” رو برای خودتون کپی کنید.

در مرحله آخر باید به صفحه “Tilesets” مراجعه کنید و آی دی تایلست مورد نظر خودتون رو کپی کنید.

حالا وقت استفاده از ویجت FlutterMap هستش...

FlutterMap(
   options: 
      MapOptions(
      center: LatLng(51.5, -0.09), 
      zoom: 13.0,
      ),
   layers: [
      TileLayerOptions(
          urlTemplate: ‘use Integration URL here’, 
          additionalOptions: {
              ‘accessToken’: ‘use Default public token here’, 
              ‘id’: ‘use the ID of Tilesets here’,
              },
      ),
    ],
 ),