كيفية إعداد نمط خريطة أساس Mapbox مخصص باستخدام React Leaflet و Leaflet Gatsby Starter

يمكن أن يكون إنشاء الخرائط قويًا جدًا ، ولكن غالبًا ما تكون عالقًا في خيارات مفتوحة المصدر لصور الخريطة التي قد لا تساعد في إمكانية قراءة بياناتك. كيف يمكننا الاستفادة من واجهات برمجة تطبيقات التجانب في Mapbox لإضافة خريطة أساس مخصصة لتطبيق React Leaflet؟

  • ماذا سنبني؟
  • ما هو Mapbox؟
  • الجزء 1: إنشاء نمط Mapbox مخصص
  • الجزء 2: إضافة TileLayer مخصص إلى React Leaflet
  • الجزء 3: إضافة خريطة أساس مخصصة إلى كتيب Gatsby Starter
  • تأمين مفتاح Mapbox الخاص بك
  • هل تريد معرفة المزيد عن الخرائط؟

ماذا سنبني؟

سننتقل إلى إنشاء نمط Mapbox أساسي جديد في حساب Mapbox الخاص بنا. بمجرد الإنشاء ، سنستخدم Map API الخاصة بهم لإضافة خريطة أساس مخصصة إلى تطبيق React Leaflet الخاص بنا.

بالنسبة لخريطتنا ، سنستخدم Leaflet Gatsby Starter الذي قمت بإنشائه والذي سيسمح لك بتدوير تطبيق خرائط جديد بسهولة. قبل أن نقوم بتدوير ذلك ، سوف أطلعك على كيفية إضافته باستخدام مكونات React Leaflet فقط.

تطبيق الخرائط؟

نعم! تُستخدم الخرائط في جميع أنحاء العالم لدراسة مجموعات البيانات الخاصة بالمواقع الجغرافية. إنها أدوات مهمة للعلماء وغيرهم ممن يحاولون مساعدة العالم.

إذا كنت ترغب في معرفة المزيد حول إنشاء خريطة وإضافة بيانات إليها ، فيمكنك الاطلاع على بعض مقالاتي الأخرى أولاً مثل إنشاء خريطة فيروس كورونا (COVID-19) أو خريطة رحلة الطريق الصيفية بالإضافة إلى القليل من مصدر إلهام حول سبب قدرة أي شخص على الخريطة.

ما هو Mapbox؟

Mapbox عبارة عن نظام أساسي لرسم الخرائط يتيح لعملائه إنشاء حلول خرائط مخصصة. كما أنها تستفيد من مجموعة متنوعة من واجهات برمجة التطبيقات التي توفر إمكانات قوية لبناء ميزات الخريطة.

لأغراضنا ، سنستخدم Map API الخاصة بهم ، وتحديداً واجهة برمجة تطبيقات Static Tiles الخاصة بهم ، لتقديم نمط خريطة مخصص نقوم بإنشائه.

الجزء 1: إنشاء نمط Mapbox مخصص

للحصول على الشكل والمظهر اللذين نريدهما لخريطتنا ، من المهم أن يكون لديك خريطة أساس تساعد في تقديم بياناتنا دون تشتيت الانتباه. بالإضافة إلى ذلك ، من الممتع أحيانًا أن يكون لديك خريطة مخصصة.

حساب Mapbox

أول شيء نحتاجه لإعداد نمط Mapbox المخصص لدينا هو أن يكون لديك حساب. لن أقوم بتوجيهك خلال هذه العملية ، ولكن يمكنك التوجه إلى موقع ويب Mapbox حيث يمكنك التسجيل مجانًا: mapbox.com

إنشاء نمط مخصص جديد

إن إنشاء نمط جديد في Mapbox ليس بالأمر الصعب كما يبدو. بينما يمكن أن يصبح الأمر معقدًا حقًا إذا كنت تريد شيئًا فريدًا ، يمكننا نسخ أحد أنماط Mapbox الافتراضية للبدء.

أولاً ، توجه إلى لوحة تحكم Studio في Mapbox من خلال النقر على رابط حسابك في الزاوية اليمنى العليا عند تسجيل الدخول.

بمجرد دخولنا إلى لوحة معلومات الاستوديو الخاصة بنا ، نريد تحديد زر نمط جديد.

بعد النقر فوق الزر ، ستظهر نافذة منبثقة تسمح لك باختيار قالب. يمكنك اختيار ما تريد هنا ، لكنني سأختار اللون الأحادي مع اختلاف في اللون الداكن. وبعد تحديد القالب الخاص بك ، انقر فوق الزر "تخصيص".

والآن تم إسقاطنا في واجهة مستخدم التخصيص الخاصة بنا.

من هنا ، يمكنك فعل ما تريد. هناك الكثير من الخيارات لتخصيص خريطتك. من الصعب بعض الشيء محاولة البحث هنا ، لكن Mapbox يوفر بعض الموارد لمحاولة مساعدتك في تحقيق الإنتاجية.

إنشاء رمز Mapbox

بمجرد رضاك ​​عن أسلوبك الجديد ونشر كل شيء ، نريد إنشاء رمز مميز سنستخدمه لتوفير الوصول إلى خريطتنا.

توجه إلى قسم الحساب في لوحة معلومات Mapbox.

يوفر لك Mapbox رمزًا مميزًا "افتراضيًا" يمكنك استخدامه في تطبيقاتك. أنت حر في استخدام هذا ، لكنني أوصي بإنشاء رمز جديد يمكنك تقديم اسم فريد به ، وبهذه الطريقة إذا تجاوزت المستوى المجاني لـ Mapbox ، فستتمكن من تتبع استخدامك.

بالإضافة إلى ذلك ، من الأفضل الاحتفاظ برمز منفصل لكل تطبيق ، وبهذه الطريقة يمكنك بسهولة تدوير مفتاح فردي ، دون الحاجة إلى تحديث كل تطبيق يستخدمه.

بمجرد النقر فوق إنشاء رمز مميز ، يمكنك إعداد المفتاح بالطريقة التي تريدها ، باستخدام النطاقات والأذونات التي تختارها ، ولكن لأغراضنا ، يمكنك ترك جميع النطاقات العامة محددة لخريطتنا ، وهو ما يفعلونه افتراضيًا .

تكوين نقطة النهاية المخصصة لدينا

في هذا البرنامج التعليمي ، سنستخدم خدمة Mapbox's Static Tiles.

ستبدو نقطة النهاية كما يلي:

//api.mapbox.com/styles/v1/{username}/{style_id}/tiles/256/{z}/{x}/{y}@2x?access_token={access_token} 

هناك بعض المعلمات التي نحتاج إلى فهمها هنا:

  • اسم المستخدم: سيكون هذا هو اسم مستخدم حساب Mapbox الخاص بك
  • style_id: سيكون معرّف النمط الذي أنشأته من قبل
  • z ، x ، y: هذه هي المعلمات التي يستبدلها Leaflet برمجيًا ، لذلك نريد تركها كما هي
  • access_token: هذا هو مفتاح Mapbox الذي أنشأته أعلاه

To find your username and style ID, we can use the Style URL for our new Mapbox style to get those values.

In my example, my Style URL looks like:

mapbox://styles/colbyfayock/ck8lryjfq0jdo1ip9ctmuhc6p 

colbyfayock is my username and ck8lryjfq0jdo1ip9ctmuhc6p is my style ID.

And once I update my endpoint parameters, the final tilepoint URL will look like:

//api.mapbox.com/styles/v1/colbyfayock/ck8lryjfq0jdo1ip9ctmuhc6p/tiles/256/{z}/{x}/{y}@2x?access_token=MYACCESSTOKEN 

Part 2: Adding a custom TileLayer to React Leaflet

When building a map with React Leaflet, your main component will be a that wraps the entirety of the app. This is what sets up your Map instance for Leaflet.

For our purposes here, we’re going to use the example on the React Leaflet homepage as our starting point.

React Leaflet TileLayer Component

Inside of your component you include a component, which defines the imagery of the world that you base your map upon.

The example on the React Leaflet homepage uses a public version of OpenStreetMap as their TileLayer, which is an open source map project created and updated by people all around the world.


    

This gives you a basic map, but we want to swap in Mapbox so we can set up a custom look and feel for our map.

Custom Mapbox TileLayer

To add our custom style, we’ll want to update the url and attribution props of the TileLayer component.

For URL, it will simply be the custom style endpoint we created earlier, so in my example, it looks like:

//api.mapbox.com/styles/v1/colbyfayock/ck8lryjfq0jdo1ip9ctmuhc6p/tiles/256/{z}/{x}/{y}@2x?access_token=MYACCESSTOKEN 

For attribution, we want to credit Mapbox as the service, so we want to set our attribution as:

Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox 

When plugged in to our TileLayer, our code should now look like this:


    

And once we open up our map, we should see our new basemap!

See the code!

If you want to see how I did it, check out the diff commit by commit.

The only caveat there is I created an .env.development.local file in the root of my project in which I stored a new environment variable called REACT_APP_MAPBOX_KEY  to store my Mapbox key.

Part 3: Adding a custom basemap to Gatsby Starter Leaflet

I’ve written a few other articles on how to get started with my Leaflet Gatsby Starter, but for this part, we’ll want to have a basic app spun up that we can use to change our TileLayer endpoint.

Setting up our React Leaflet Gatsby app

To get started, check out the instructions on the Starter github:

//github.com/colbyfayock/gatsby-starter-leaflet

Once you’re ready, you should have a basic mapping app ready to go!

Configuring our Mapbox service

The first thing we’ll want to do is add Mapbox as a service in our src/data/map-services.js file.

Taking our custom endpoint URL that we created in Part 1, let’s set up a new object with a name of Mapbox, and with a url and attribution similar to what we did in Part 2.

export const mapServices = [ { name: ‘OpenStreetMap’, attribution: '© OpenStreetMap contributors’, url: ‘//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png’ }, { name: ‘Mapbox’, attribution: ‘Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox’, url: `//api.mapbox.com/styles/v1/colbyfayock/ck8c2foj72lqk1jnug0g2haw0/tiles/256/{z}/{x}/{y}@2x?access_token=MY_ACCESS_TOKEN` } ]; 

Using our Mapbox map service

Once you have your Mapbox service set up, all that’s left is to open up the src/pages/index.js file, find the mapSettings object definition, and update the defaultBaseMap property to Mapbox.

const mapSettings = { center: CENTER, defaultBaseMap: ‘Mapbox’, zoom: DEFAULT_ZOOM, mapEffect }; 

Save that change, refresh the map in your browser, and you should now see your custom basemap style!

See the code!

If you want to see how I did it, check out the diff with the commit.

The only caveat there is I created an .env.development file in the root of my project in which I stored a new environment variable called GATSBY_MAPBOX_KEY  to store my Mapbox key.

Securing your Mapbox key

Environment variables

Part of most development processes that use individual keys will generally set the keys up as environment variables. Environment variables are configured settings that don’t live in the code itself.

This is important because it prevents your key from being checked in to your code, which is bad from a security perspective, but it also allows you to provide a different key for different environments.

When generating your keys, try to keep this in mind, as it can save you in the long run.

Locking down your Mapbox key

In your settings when creating a token or when editing a token, Mapbox allows you to specify only the URLs you want your key to be accessible from.

Though Mapbox has a generous free tier, you probably want to keep it locked down only to the URLs that you’re using it on. You can create multiple keys, where one could be for public use on your website and one would be for your local development.

This is helpful for instance, where you have a key that will never be used publicly for development purposes, but then you have a key that you deploy with, which can be locked down only to that URL.

If someone grabs your key, they could plug it into their own website and use up all of your free tier, potentially running up your bill!

Want to learn more about maps?

You can check out a few of my other resources to get started:

  • How to create a Coronavirus (COVID-19) Dashboard & Map App in React with Gatsby and Leaflet
  • Anyone Can Map! Inspiration and an introduction to the world of mapping
  • كيفية إنشاء تطبيق خرائط رحلة صيفية باستخدام Gatsby و Leaflet
  • كيفية إنشاء سانتا تعقب الخاص بك مع Gatsby و React Leaflet
  • كيفية إنشاء تطبيق خرائط في React بالطريقة السهلة باستخدام Leaflet

تابعني لمزيد من Javascript و UX وأشياء أخرى مثيرة للاهتمام!

  • ؟ تابعني على تويتر
  • ؟ ️ اشترك في My Youtube
  • ✉️ اشترك في رسالتي الإخبارية