Πώς να ρυθμίσετε ένα προσαρμοσμένο στυλ βασικού χάρτη Mapbox με το React Leaflet και το Leaflet Gatsby Starter

Η δημιουργία χαρτών μπορεί να είναι αρκετά ισχυρή, αλλά συχνά έχετε κολλήσει με επιλογές ανοιχτού κώδικα για τις εικόνες χαρτών που ενδέχεται να μην βοηθούν την αναγνωσιμότητα των δεδομένων σας. Πώς μπορούμε να αξιοποιήσουμε τα API πλακιδίων του Mapbox για να προσθέσουμε έναν προσαρμοσμένο βασικό χάρτη στην εφαρμογή React Leaflet;

  • Τι πρόκειται να οικοδομήσουμε;
  • Τι είναι το Mapbox;
  • Μέρος 1: Δημιουργία προσαρμοσμένου στυλ Mapbox
  • Μέρος 2: Προσθήκη προσαρμοσμένου TileLayer στο React Leaflet
  • Μέρος 3: Προσθήκη προσαρμοσμένου βασικού χάρτη στο Gatsby Starter Leaflet
  • Εξασφάλιση του κλειδιού Mapbox σας
  • Θέλετε να μάθετε περισσότερα σχετικά με τους χάρτες;

Τι πρόκειται να οικοδομήσουμε;

Θα δούμε τη δημιουργία ενός νέου βασικού στυλ Mapbox στον λογαριασμό μας στο Mapbox. Μόλις δημιουργηθεί, θα χρησιμοποιήσουμε το Map API τους για να προσθέσουμε έναν προσαρμοσμένο βασικό χάρτη στην εφαρμογή React Leaflet.

Για τον χάρτη μας, θα χρησιμοποιήσουμε αυτό το Leaflet Gatsby Starter που δημιούργησα και θα σας επιτρέψει να ανοίξετε εύκολα μια νέα εφαρμογή χαρτογράφησης. Πριν όμως το περιστρέψουμε, θα σας καθοδηγήσω πώς να το προσθέσετε χρησιμοποιώντας μόνο στοιχεία React Leaflet.

Μια εφαρμογή χαρτογράφησης;

Ναι! Οι χάρτες χρησιμοποιούνται σε όλο τον κόσμο για τη μελέτη συνόλων δεδομένων για γεωγραφικές τοποθεσίες. Είναι σημαντικά εργαλεία για επιστήμονες και άλλους που προσπαθούν να βοηθήσουν τον κόσμο.

Αν θέλετε να μάθετε περισσότερα σχετικά με τη δημιουργία χάρτη και την προσθήκη δεδομένων σε αυτόν, μπορείτε πρώτα να δείτε μερικά από τα άλλα άρθρα μου, όπως τη δημιουργία ενός χάρτη Coronavirus (COVID-19) ή ενός χάρτη Summer Road Trip, καθώς και λίγα έμπνευση για το γιατί μπορεί κανείς να χαρτογραφήσει.

Τι είναι το Mapbox;

Το Mapbox είναι μια πλατφόρμα χαρτογράφησης που επιτρέπει στους πελάτες της να δημιουργούν προσαρμοσμένες λύσεις χαρτογράφησης. Αξιοποιούν επίσης μια ποικιλία API που παρέχουν ισχυρές δυνατότητες για τη δημιουργία λειτουργιών χαρτών.

Για τους σκοπούς μας, θα χρησιμοποιήσουμε το Map API τους, συγκεκριμένα το Static Tiles API, για να εξυπηρετήσουμε ένα προσαρμοσμένο στυλ χάρτη που δημιουργούμε.

Μέρος 1: Δημιουργία προσαρμοσμένου στυλ Mapbox

Για να αποκτήσουμε την εμφάνιση και την αίσθηση που θέλουμε για τον χάρτη μας, είναι σημαντικό να έχουμε ένα βασικό χάρτη που βοηθά να παρουσιάζονται τα δεδομένα μας χωρίς περισπασμούς. Επιπλέον, μερικές φορές είναι διασκεδαστικό να έχετε έναν προσαρμοσμένο χάρτη.

Λογαριασμός Mapbox

Το πρώτο πράγμα που θα χρειαστεί να ρυθμίσουμε το προσαρμοσμένο στυλ Mapbox είναι να έχουμε λογαριασμό. Δεν πρόκειται να σας καθοδηγήσω σε αυτήν τη διαδικασία, αλλά μπορείτε να κατευθυνθείτε στον ιστότοπο του Mapbox όπου μπορείτε να εγγραφείτε δωρεάν: mapbox.com

Δημιουργία νέου προσαρμοσμένου στυλ

Η δημιουργία ενός νέου στυλ στο Mapbox δεν είναι τόσο δύσκολη όσο ακούγεται. Παρόλο που μπορεί να γίνει πολύ περίπλοκο αν θέλετε κάτι μοναδικό, μπορούμε να αντιγράψουμε ένα από τα προεπιλεγμένα στυλ του Mapbox για να ξεκινήσετε.

Αρχικά, μεταβείτε στον πίνακα ελέγχου του Mapbox's Studio κάνοντας κλικ στο σύνδεσμο του λογαριασμού σας στην επάνω δεξιά γωνία όταν συνδεθείτε.

Μόλις βρεθούμε στον πίνακα ελέγχου του Studio, θέλουμε να επιλέξουμε το κουμπί New Style.

Αφού κάνετε κλικ στο κουμπί, θα εμφανιστεί ένα mod που σας επιτρέπει να επιλέξετε ένα πρότυπο Μπορείτε να επιλέξετε ό, τι θέλετε εδώ, αλλά θα επιλέξω Monochrome με μια παραλλαγή του Dark. Και αφού επιλέξετε το πρότυπό σας, κάντε κλικ στο κουμπί Προσαρμογή.

Και τώρα μπήκαμε στη διεπαφή προσαρμογής.

Από εδώ, μπορείτε πραγματικά να κάνετε ό, τι θέλετε. Υπάρχουν πολλές επιλογές για την προσαρμογή του χάρτη σας. Είναι λίγο περίπλοκο να προσπαθείτε να σκάψετε εδώ, αλλά το Mapbox παρέχει ορισμένους πόρους για να σας βοηθήσει να γίνετε παραγωγικοί.

Δημιουργία διακριτικού Mapbox

Μόλις είστε ικανοποιημένοι με το νέο σας στυλ και όλα δημοσιεύονται, θέλουμε να δημιουργήσουμε ένα διακριτικό που θα χρησιμοποιήσουμε για την παροχή πρόσβασης στον Χάρτη μας.

Μεταβείτε στην ενότητα Λογαριασμός του πίνακα ελέγχου του Mapbox.

Το Mapbox σάς παρέχει ένα "προεπιλεγμένο" διακριτικό που μπορείτε να χρησιμοποιήσετε στις εφαρμογές σας. Είστε ελεύθεροι να το χρησιμοποιήσετε, αλλά σας συνιστούμε να δημιουργήσετε ένα νέο διακριτικό που μπορείτε να δώσετε ένα μοναδικό όνομα, με αυτόν τον τρόπο, αν ξεπεράσετε ποτέ το δωρεάν επίπεδο του Mapbox, θα μπορείτε να παρακολουθείτε τη χρήση σας.

Επιπλέον, είναι καλύτερο να διατηρείτε ένα ξεχωριστό διακριτικό για κάθε εφαρμογή, με αυτόν τον τρόπο μπορείτε εύκολα να περιστρέψετε ένα μεμονωμένο κλειδί, χωρίς να χρειάζεται να ενημερώσετε κάθε εφαρμογή που το χρησιμοποιεί.

Μόλις κάνετε κλικ στο Δημιουργία διακριτικού, μπορείτε να ρυθμίσετε το κλειδί με τον τρόπο που θέλετε, με τα εύρη και τα δικαιώματα που επιλέγετε, αλλά για τους σκοπούς μας, μπορείτε να αφήσετε όλα τα Δημόσια πεδία ελεγμένα για το χάρτη μας, το οποίο κάνουν από προεπιλογή .

Διαμόρφωση προσαρμοσμένου τελικού σημείου

Για αυτό το σεμινάριο, θα χρησιμοποιήσουμε την υπηρεσία Static Tiles του Mapbox.

Το τελικό μας σημείο θα μοιάζει με το ακόλουθο:

//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
  • Πώς να δημιουργήσετε το δικό σας Santa Tracker με το Gatsby και το React Leaflet
  • Πώς να δημιουργήσετε μια εφαρμογή χαρτογράφησης στο React με τον εύκολο τρόπο με το Leaflet

Ακολουθήστε με για περισσότερα Javascript, UX και άλλα ενδιαφέροντα πράγματα!

  • ; Ακολούθησέ με στο τουίτερ
  • ; ️ Εγγραφείτε στο Youtube μου
  • ✉️ Εγγραφείτε στο Newsletter μου