Πώς να δημιουργήσετε έναν χάρτη λίστας ταξιδιωτικών κάδων με το Gatsby, το React Leaflet και το GraphCMS

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

  • Τι πρόκειται να οικοδομήσουμε;
  • Βήμα 1: Δημιουργία νέας εφαρμογής με το Gatsby Starter Leaflet
  • Βήμα 2: Δημιουργία και διαχείριση μιας λίστας τοποθεσιών ταξιδιού με το GraphCMS
  • Βήμα 3: Ερώτημα των δεδομένων τοποθεσίας GraphCMS με το Gatsby και το GraphQL
  • Βήμα 4: Δημιουργία λίστας προορισμών για κάδους και προσθήκη τους στο χάρτη
  • Ποιες άλλες δυνατότητες μπορούμε να προσθέσουμε στην εφαρμογή μας;
  • Θέλετε να μάθετε περισσότερα σχετικά με τους χάρτες;

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

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

Θα ανοίξουμε την εφαρμογή με ένα Gatsby Starter for Leaflet και μετά θα χρησιμοποιήσουμε το GraphCMS για να δημιουργήσουμε και να διαχειριστούμε τη λίστα τοποθεσιών για το χάρτη μας!

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

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

Βήμα 1: Δημιουργία νέας εφαρμογής με το Gatsby Starter Leaflet

Θα ξεκινήσουμε με το Gatsby Starter Leaflet. Αυτό θα μας δώσει μια βασική εφαρμογή React με τα ήδη ενσωματωμένα εργαλεία χαρτογράφησης.

Δημιουργία νέας εφαρμογής Gatsby με το Gatsby Starter Leaflet

Για να ξεκινήσετε, μεταβείτε στο σημείο όπου θέλετε να δημιουργήσετε τη νέα σας εφαρμογή και εκτελέστε:

gatsby new my-travel-bucket-list //github.com/colbyfayock/gatsby-starter-leaflet 

Σημείωση: μπορείτε να αντικαταστήσετε my-travel-bucket-listμε ό, τι θέλετε. Αυτό θα χρησιμοποιηθεί για τη δημιουργία του νέου φακέλου για την εφαρμογή.

Μόλις το εκτελέσετε, το Gatsby θα κατεβάσει το Starter και θα εγκαταστήσει τις εξαρτήσεις. Αφού ολοκληρωθεί, μεταβείτε σε αυτόν τον κατάλογο και εκτελέστε την εντολή ανάπτυξης:

cd my-travel-bucket-list yarn develop # or npm run develop 

Μόλις ολοκληρωθεί η τοποθεσία, η εφαρμογή σας θα είναι έτοιμη!

Καθαρισμός κάποιου κώδικα επίδειξης

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

Ανοίξτε το src/pages/index.jsαρχείο.

Κατ 'αρχάς, αφαίρεση ό, τι στο εσωτερικό της mapEffect, εκτός από την πρώτη γραμμή και να δημιουργήσει ένα ψευδώνυμο για leafletElementνα map:

async function mapEffect({ leafletElement: map } = {}) { if ( !map ) return; } 

Με αυτόν τον τρόπο, μπορούμε να καταργήσουμε τον markerRefορισμό στην κορυφή του IndexPageστοιχείου, να αφαιρέσουμε το ref={markerRef}στήριγμα από το στοιχείο μας και την useRefεισαγωγή δίπλα στο React.

Τώρα, μπορούμε να καταργήσουμε όλες τις μεταβλητές που ξεκινούν popupκαι timeπεριλαμβάνουν:

  • timeToZoom
  • timeToOpenPopupAfterZoom
  • timeToUpdatePopupAfterZoom
  • popupContentΓεια σας
  • popupContentGatsby

Τέλος, μπορείτε να καταργήσετε όλες τις ακόλουθες γραμμές:

import L from 'leaflet'; ... import { promiseToFlyTo, getCurrentLocation } from 'lib/map'; ... import gatsby_astronaut from 'assets/images/gatsby-astronaut.jpg'; ... const ZOOM = 10; 

Μόλις τελειώσουμε, θα πρέπει να είμαστε έτοιμοι να ξεκινήσουμε με μια βασική εφαρμογή με χάρτη!

Ακολουθήστε μαζί με τη δέσμευση!

Βήμα 2: Δημιουργία και διαχείριση μιας λίστας τοποθεσιών ταξιδιού με το GraphCMS

Δημιουργία λογαριασμού GraphCMS

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

Εγγραφείτε στο GraphCMS

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

Δημιουργία νέου έργου GraphCMS

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

Εδώ, μπορείτε να εισαγάγετε ό, τι θέλετε για το όνομα και την περιγραφή , όπως:

  • Όνομα: Λίστα Ταξιδιωτικών Κάδων μου
  • Περιγραφή: Οι τοποθεσίες στις οποίες θέλω να ταξιδέψω κάποια μέρα!

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

After you select your options, go ahead and click Create Project.

Next, you’ll be presented with billing options. Since we’re just creating a demo, under Personal select Continue at which point we’ll be dropped into our new GraphCMS project dashboard.

Creating a new Content Model Schema with GraphCMS

In GraphCMS, a Content Model refers to a specific type of data that has specific properties associated with it. In our case, our Model will be a Destination, which will be defined by a Name and a Location.

First, navigate to the Schema section of GraphCMS in the left sidebar and select Create Model.

Once selected, you’ll see a popup that asks for a bit more information. Here, you can type in “Destination” as the Display Name, which will also fill in most of the other fields. We’ll leave those as is.

Feel free to add a description if you’d like, but it’s not required. Then select Create model.

Now that we have our Model, we need our properties.

First, select Single line text in the right list of fields and add a Display Name of “Name”. This will also fill out App Id which you can leave as is. Then click Create.

Next, scroll down in the field options on the right and under Location select Map. Add “Location” as the Display Name, which will set the App Id as “location” which you can leave as is. Then same as before, click Create.

Now we have a Content Model which we’ll use to create our locations!

Creating our locations

Finally, let’s create our locations. Navigate over to Content in the GraphCMS dashboard, make sure you’ve selected Destination under System (should be the only one), and select Create New.

Now we can start adding all of our locations! First, add the name of your location in the Name field, then you can use the Search box under Location to find that location on the map.

Once you’re good, hit Save and publish. This will create your first location!

Follow those same steps and create as many locations as you want.

We’ll use these for our map and bucket list.

Step 3: Querying our GraphCMS location data with Gatsby and GraphQL

Now that we have our locations, let’s use them!

Adding a plugin to Gatsby to query our GraphQL data

First, we need to add a new plugin to our Gatsby project to query our GraphQL data. In your terminal make sure your development server isn’t running and run:

yarn add gatsby-source-graphql # or npm install gatsby-source-graphql 

Next, open up your gatsby-config.js file in the root of your project and add the following to your plugins:

{ resolve: 'gatsby-source-graphql', options: { typeName: 'GCMS', fieldName: 'gcms', url: '[API ENDPOINT]', } } 

This will be what sources our data from GraphCMS, but we need an endpoint.

Finding our API endpoint for GraphCMS

Open back up your browser and head over to your GraphCMS project. After selecting Settings in the left navigation, select API Access.

Before we copy our API Endpoint, first we need to update our permissions so we can query our API. Under Public API Permissions, check the box next to Content from stage Published and click Save.

Next, copy the URL under Endpoints:

And paste that in to your gatsby-config.js file that we modified above:

{ resolve: 'gatsby-source-graphql', options: { typeName: 'GCMS', fieldName: 'gcms', url: '//[region-id].graphcms.com/v2/[project-id]/master', }, }, 

Note: your URL will have actual values inside of [region-id] and [project-id].

Save your gatsby-config.js file and start your development server backup (yarn develop) and we’re ready to go!

Querying our locations via GraphQL

Finally, let’s actually query our data so that we’ll be able to use it in our app.

We’re going to create a new React Hook that we’ll be able to use to grab our locations anywhere within our app.

Under src/hooks/index.js, add the following line to the existing list:

export { default as useDestinations } from './useDestinations'; 

This will allow us to more conveniently import our hook which we’ll create next.

Under src/hooks, create a new file useDestinations.js and paste in this code:

import { graphql, useStaticQuery } from 'gatsby'; export default function useDestinations() { const { gcms = {} } = useStaticQuery( graphql` query { gcms { destinations { id name location { latitude longitude } } } } ` ); let { destinations } = gcms; return { destinations, }; } 

Here, we’re:

  • Importing the graphql and useStaticQuery utilities from Gatsby
  • We’re creating a new function (or hook) that is exported by default
  • In that function, we’re using useStaticQuery to create a new GraphQL query which asks GraphCMS to return the data structure we defined.
  • That query returns a value which we destructure immediately to grab the gmcs object
  • We destructure destinations from gmcs and return it as part of a new object from our hook

With this, we can now use our hook anywhere in our app!

Head over to your src/pages/index.js file, first import our new hook:

import { useDestinations } from 'hooks'; 

And at the top of the IndexPage component, query our data:

const { destinations } = useDestinations(); 

This puts all of our locations into the destinations variable. We can test that this works by console logging it out:

console.log('destinations', destinations); 

And once we open up our browser and look in our web developer tools console, we can see our location data!

Step 4: Creating a bucket list of destinations and adding them to the map

We’re going to start with creating a simple text list of our destinations. This will let us see all of our destinations in an easy to read format.

Creating a text list of our destinations

Inside of our IndexPage and above “Still Getting Started?”, let’s add the following code:

My Destinations

    { destinations.map(destination => { const { id, name } = destination; return
  • { name }
  • })}

This code:

  • Adds a new header for our list
  • Creates a new unordered list
  • Loops through our destinations and creates a new list item for each destination that include’s the location’s name

Once we hit save and reload, we should see our list under our map!

The list looks a little odd though right? We probably want to format it a little better to fit into the page.

Open up src/assets/stylesheets/pages/_home.scss and inside of the .home-start class, add:

.home-start { ... ul { list-style: none; padding: 0; margin: 1.2em 0; } 

Let’s also modify the h2 to space things out a little better:

.home-start { ... h2 { margin-top: 2em; &:first-child { margin-top: 0; } } 

Once you hit save and reload, it should look a little better.

Feel free to make additional changes, but we’ll leave it there for now.

Adding our destinations to the map

Now we can finally add our destinations to the map!

Inside of our component, we already have a . This allows us to easily add a marker to the map given a position. We’ll take this concept and combine it with our text list to add our locations to the map.

Let’s update our code to match the following:

 { destinations.map(destination => { const { id, name, location } = destination; const position = [location.latitude, location.longitude]; return  })}  

Here we:

  • Loop through our destinations to dynamically create a new list of components inside our
  • Inside each loop instance, we destructure our date from destination
  • We create a new position array with the latitude and longitude
  • Create a new Marker where we use our position to add it to the map

This gives us our markers on the map!

But we want to know what each of those locations are, so let’s also add a popup to each marker that will show the name.

First, we need to import Popup from react-leaflet:

import { Marker, Popup } from 'react-leaflet'; 

Then, let’s update our component to return:

return (  { name }  ); 

And once we save and open back up our map, you can now click on each marker and see our destinations name!

Before we’re done, center the map

Previously, our demo map centered on Washington, DC. Let’s update that to the center of the world since our map doesn’t focus on the United States.

Update the LOCATION variable to:

const LOCATION = { lat: 0, lng: 0, }; 

And with that, we have our map!

Follow along with the commit!

What else other features can we add to our app?

Add a way to check off each location

Inside GraphCMS, you can add a new field to your Destination content model that allows you to select whether you visited each location or not.

With this value, we can add it to our query and update our map with some kind of indicator like a checkmark to show that we’ve checked it off our bucket list!

Customize your map background styles

We’re using a public version of OpenStreetMap which is open source, but Mapbox offers some cool maps we can use to make it look a little more impressive.

If you want to get started changing your map styles, you can check out this other walkthrough of mine to learn how to use Mapbox.

Check out the blog post or watch the video!

Style the map markers with a custom image

You can check out my video walk through on how to change the markers to a custom image.

Take that a step further and use the feature above to dynamically show a different marker image when you’ve checked off a location.

Check out the video on Egghead.io!

Want to learn more about maps?

Check out some of my other tutorials and videos:

  • Mapping with React Leaflet (egghead.io)
  • Mapping Apps with React, Gatsby, & Leaflet (youtube.com)
  • How to create a Coronavirus (COVID-19) Dashboard & Map App with Gatsby and Leaflet (colbyfayock.com)
  • How to Create a Summer Road Trip Mapping App with Gatsby and Leaflet (colbyfayock.com)
  • How to build a mapping app in React the easy way with Leaflet (colbyfayock.com)
  • Anyone Can Map! Inspiration and an introduction to the world of mapping (colbyfayock.com)

What’s on your travel bucket list?

Let me know on Twitter!

Want to learn how to create a Travel Bucket List with all your dream destinations? ??

Σας καθοδηγώ στρίβοντας μια νέα εφαρμογή #mapping με @GatsbyJS και @LeafletJS που δείχνει όλους τους προορισμούς σας με τη διαχείριση @GraphCMS;

; #webdev # 100DaysOfCode // t.co / 1hhWiQOfYw

- Colby Fayock (@colbyfayock) 23 Ιουνίου 2020

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

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