Traveling is fun and we all have a lot of places we want to visit, but rarely do we have time to do it all at once. That’s what bucket lists are for! How can we create a custom mapping app that we can show all of our the destinations on our bucket list?
- What are we going to build?
- Step 1: Creating a new app with Gatsby Starter Leaflet
- Step 2: Creating and managing a list of travel locations with GraphCMS
- Step 3: Querying our GraphCMS location data with Gatsby and GraphQL
- Step 4: Creating a bucket list of destinations and adding them to the map
- What else other features can we add to our app?
- Want to learn more about maps?
What are we going to build?
We’re going to build a mapping app with Gatsby managed by a CMS that will both display markers on a map and show our locations in a simple text-based list for our bucket list locations.
Demo of a Travel Bucket List mapping app
We’ll spin up the app with a Gatsby Starter for Leaflet and then we’ll use GraphCMS to create and manage the list of locations for our map!
Woah, a mapping app?
Yup. If you haven’t played with maps before, don’t be discouraged! It’s not as bad as you probably think. If you’d rather start with mapping basics, you can read more about how mapping works first.
Step 1: Creating a new app with Gatsby Starter Leaflet
We’ll start off with Gatsby Starter Leaflet. This is going to give us a basic React application with our mapping tools already built in.
Creating a new Gatsby app with Gatsby Starter Leaflet
To get started, navigate to where you want to create your new app and run:
gatsby new my-travel-bucket-list https://github.com/colbyfayock/gatsby-starter-leaflet
Note: you can replace _my-travel-bucket-list_ with whatever you want. This will be used to create the new folder for the app.
Once you run that, Gatsby will pull down the Starter and install the dependencies. After it’s complete, navigate to that directory and run the development command:
cd my-travel-bucket-list
yarn develop
# or
npm run develop
Once it’s finished location, your app should be ready to go!
Cleaning our some demo code
Because we’re using a Starter, it has a little bit of demo code. Let’s clean that out to avoid any confusion.
Open up the src/pages/index.js file.
First, remove everything inside of mapEffect except the first line and set up an alias for leafletElement to map:
async function mapEffect({ leafletElement: map } = {}) {
if ( !map ) return;
}
With that gone, we can remove the markerRef definition at the top of the IndexPage component, remove the ref={markerRef} prop from our <Marker> component, and the useRef import next to React.
Now, we can remove all of the variables that start with popup and time, including:
- timeToZoom
- timeToOpenPopupAfterZoom
- timeToUpdatePopupAfterZoom
- popupContentHello
- popupContentGatsby
Lastly, you can remove all of the following lines:
import L from 'leaflet';
...
import { promiseToFlyTo, getCurrentLocation } from 'lib/map';
...
import gatsby_astronaut from 'assets/images/gatsby-astronaut.jpg';
...
const ZOOM = 10;
Once done, we should be ready to go with a basic app with a map!
New app with Gatsby Starter Leaflet
#react #programming
