Hogyan készítsünk saját Mikuláskövetőt a Gatsby és a React Leaflet segítségével

A karácsonyi szezon varázslatos évszak. Élvezhetjük a Mikulást, és a Manó a New York-i barangolás körül mozog évente a családdal és a barátokkal való újracsatolás során.

A szellem megteremtése érdekében felpörgetünk egy webalkalmazást, amely tartalmaz egy térképet, amely rajta követi a Mikulást!

Szerkesztés 12/23: Frissítve az alkalmazást, hogy közvetlenül a Mikulás útvonalára kérjen, hátha az eredeti API nem az eredetileg várt módon működik.

Mit fogunk építeni?

Dolgozni fogunk egy olyan térképészeti alkalmazás felépítésén, amely nyomon követi a Mikulás útvonalát és jelenlegi helyét.

Ennek elérése érdekében felpörgetünk egy előre elkészített Gatsby indítót, amely megalapozza a térképet, felhasználja a Google nem hivatalos API-ját a Mikulás útvonalának megragadásához, és a Leaflet segítségével lefedi a pozícióját és útvonalát a térkép tetején.

Woah, egy térképészeti alkalmazás?

Aha. Ha még nem játszott térképekkel, ne csüggedjen! Nem is olyan rossz, mint valószínűleg gondolnád. Ha inkább a feltérképezés alapjaival kezdene, akkor először többet tudhat meg arról, hogyan működik a feltérképezés.

Mire van szükségünk, mielőtt nekilátnánk?

Ennél a gyakorlatnál feltételezem, hogy csomópont vagy fonal van telepítve. Minden példához fonalat használok, de a választott eszközt használom.

A Gatsby CLI-t globálisan is telepítenie kell, amely lehetővé teszi számunkra a Starter eszközeinek használatát.

Gatsby CLI beállításához futtassa a következő parancsot:

yarn global add gatsby-cli

Ezután futtatnia gatsby -hkell az elérhető parancsokat, ami azt jelenti, hogy sikeresen telepítve van.

A Gatsby CLI-vel kapcsolatos további információkért tekintse meg a dokumentációjukat.

Első lépések a térképalapunkkal

Miután beállítottuk a parancssori eszközeinket, az első dolog, amit meg akarunk tenni, egy új Gatsby projekt létrehozása az általam összeállított Leaflet starter segítségével. Alapvető beállítást biztosít számunkra a Leaflet és a React Leaflet segítségével.

A projekt könyvtárában kezdve telepítsük a projektet:

gatsby new [directory] //github.com/colbyfayock/gatsby-starter-leaflet 

Ne felejtse el kicserélni [directory]azt a helyet, amelyre a projektet fel kívánja állítani.

Miután futtatta a parancsot, Gatsby klónozza azt a projektet a git hivatkozások nélkül, és telepíti az indításhoz szükséges csomagokat.

Hogy megbizonyosodjon arról, hogy működik, most navigálhat az adott könyvtárba, felpörgetheti a szervert és tesztelheti a böngészőben:

cd [directory] yarn develop 

Ahol [directory]fent látja , győződjön meg arról, hogy ugyanazt az utat használja, mint korábban az új Gatsby projekt felállításakor.

Ha minden a tervek szerint halad, akkor a szerverének el kell indulnia, és mostantól láthatja az alaptérkép-alkalmazást a böngészőben!

Takarítani a dolgokat

Ez az indító egy gyors példát mutat be arra, hogyan tudunk kölcsönhatásba lépni a térképpel. Erre egyáltalán nem lesz szükségünk a céljaink érdekében, hogy folytathassuk a dolgokat.

Először is megnyitjuk a index.jsfájlunkat, a kezdőlap fájlt, és megszabadulunk a mapEffectfüggvényen belül mindentől , ami:

// In src/pages/index.js async function mapEffect({ leafletElement } = {}) { // Get rid of everything in here } 

Most távolítsuk el a Markerbennünk beágyazott komponenst Map, így a végén:

Most, hogy már nem használjuk ezt a funkciót, megszabadulhatunk a fájl tetején található változóktól és hivatkozásoktól, így folytathatja és eltávolíthatja:

  • useRef
  • ígéretFolyó
  • getCurrentLocation
  • Jelző
  • gatsby_astronaut
  • ZOOMOLÁS
  • timeToZoom
  • timeToOpenPopupAfterZoom
  • timeToUpdatePopupAfterZoom
  • popupContentHello
  • popupContentGatsby
  • markerRef

Kövesse az elkötelezettséggel együtt.

Megtalálni a Mikulást

Most, hogy jó helyen járunk, piszkoljuk be a kezünket, és keressük meg a Mikulást. Ehhez a Google nem hivatalos, dokumentáció nélküli API-ját fogjuk használni. Ez azt jelenti, hogy lehetséges, hogy az API nem lesz elérhető a letöltés másnapján, de legyünk optimisták.

Ezenkívül az írás idején még mindig a tavalyi célállomások láthatók, tehát amit itt valóban megjeleníteni fogunk, az a Mikulás előző évi útvonala, bár reméljük, hogy ez 24-én visszaáll, és mindannyian vidámak leszünk!

Mielőtt megkapnánk a Mikulást, először tegyünk egy sort vissza a mapEffectfunkciónkba:

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

Ez megakadályozza, hogy a kódunk többi része fusson, ha a térképünk még nem áll készen. A mapEffectfunkció is, mint látható az Mapalkatrész belsejében fut egy példánya useEffectelhaladó érv egy refa térkép, amely lehetővé teszi számunkra, hogy fuss egy kódot, miután a komponens teszi.

Tehát ha megvan ez a vonal, akkor most töltsük le a Mikulás útvonalát a mapEffectfunkciónkban:

async function mapEffect({ leafletElement } = {}) { if ( !leafletElement ) return; let route, routeJson; try { route = await fetch('//firebasestorage.googleapis.com/v0/b/santa-tracker-firebase.appspot.com/o/route%2Fsanta_en.json?alt=media&2018b'); routeJson = await route.json(); } catch(e) { console.log(`Failed to find Santa!: ${e}`); } console.log(‘routeJson’, routeJson); }

Bontjuk ezt le:

  • Megfogjuk a Mikulás útvonalát az API végponton keresztül
  • Miután megvan az útvonala, JSON formátumban ragadjuk meg a választ, hogy megkönnyítsük a munkát
  • Mindez egy próbálkozásba / befogásba van csomagolva, így biztonságosan kezelhetjük az esetleges válaszhibákat
  • Végül logegyelőre csak válaszunkat adtuk meg

Most megvan a Télapó és az útvonala, ami azt jelenti, hogy az útvonalán található összes célt láthatjuk. Ha egy kicsit belemélyed a válaszba, láthat néhány szórakoztató dolgot, például azt, hogy hány ajándékot szállítottak az egyes helyekre, és az időjárást akkoriban!

Kövesse az elkötelezettséggel együtt.

Tegyen egy csapot a helyére

Megtaláltuk a Mikulást! ? Most tegyük fel a térképre.

Céljainkhoz meg kell találnunk a Mikulás szélességi és hosszúsági fokát. A probléma az, hogy ezt a pontos értéket nem adjuk meg sehol, csak megkapjuk az úti céljait.

Since we don’t have his location specified anywhere, we can utilize his last known location where presents were delivered. Add the following after our last snippet inside the mapEffect function:

const { destinations = [] } = routeJson || {}; const destinationsVisited = destinations.filter(({arrival}) => arrival  presentsDelivered > 0); const lastKnownDestination = destinationsWithPresents[destinationsWithPresents.length - 1]

Below our request code, we:

  • Destructure routeJson to grab destinations into a constant, adding a fallback to an empty object
  • Filter the results to only find the destinations that he's visited, using the arrival time from the route object
  • Filter the results to find only the locations with presents
  • And finally grab the last item from the array, which shows his last known location

At this point in time, 12/23, we don't actually have any destinations, as Santa is still at the North Pole. At any time, we can test this out to simulate a future date by replaceing Date.now() in destinationsVisited with a future date, such as 1577188980000 which would be around 7pm Eastern on 12/24. With that change, we can see what Santa's route actually looks like!

Handle a missing Santa

Now that it's close to Christmas, Santa will still be at the North Pole, so let's handle the case where we don't have a location.

Above the line where we set lastKnownDestination, let's add:

if ( destinationsWithPresents.length === 0 ) { // Create a Leaflet Market instance using Santa's LatLng location const center = new L.LatLng( 0, 0 ); const noSanta = L.marker( center, { icon: L.divIcon({ className: 'icon', html: ` ? `, iconSize: 50 }) }); noSanta.addTo( leafletElement ); noSanta.bindPopup( `Santa's still at the North Pole!` ); noSanta.openPopup(); return; }

Okay so what are we doing here?

  • First, we’re checking if we have any destinations with presents, which here we don't
  • We first create a LatLng of the center of the map
  • We create a Leaflet marker, using that center, with a custom Icon of Santa
  • Next we add that Santa marker to the leafletElement, which is our map
  • To show a message, we first bind a popup with a custom message and open it
  • Finally we return so the rest of the code doesn’t run, as we don’t have Santa at this point

This was a section added after published to handle the API resetting, but you can still follow along with the code I added in context of the rest of the rest of the code.

Follow along in the code.

Pinning Santa

Edit 12/23: This section was originally written with the previous year's API, but this is still a good example of what you'll expect on the response, so you can follow right along.

And as we can see, since we’re looking at last year’s data, Santa is back home at the North Pole.

With his location, we can pull that apart, set up a Leaflet marker instance, and add our old friend to the map. Add the following after our last snippet inside the mapEffect function:

const santaLocation = new L.LatLng( lastKnownDestination.location.lat, lastKnownDestination.location.lng ); const santaMarker = L.marker( santaLocation, { icon: L.divIcon({ className: ‘icon’, html: ` ? `, iconSize: 50 }) }); santaMarker.addTo(leafletElement);

Here we:

  • Create a Leaflet LatLng instance with his location
  • Create a Marker instance with our newly created LatLng instance
  • Add our new Marker to the map

If we refresh our page, you’ll have to zoom out and pan up a little bit, but we'll see Santa on the map!

Before we move on, let’s give Santa a little holiday cheer to make him easier to find. Find your application.scss file and toss these styles in:

// In src/assets/stylesheets/application.scss .icon { & > div { display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 100%; box-shadow: 0 3px 4px rgba(0,0,0,.4); border: none; transition: all .2s; &:hover { box-shadow: 0 4px 8px rgba(0,0,0,.6); } } } .icon-santa { width: 50px; height: 50px; font-size: 3em; background: white; } 

This just adds a white circle around him, a little drop shadow, and increases the size a bit to make him a little easier to find on the map.

Follow along with the commit.

Drawing his route

The last thing we’re going to do here is draw a path on the map showing his route so we can follow along.

To get started, let’s update our code and add this last bit after our last snippet in the mapEffect function:

// Create a set of LatLng coordinates that make up Santa's route const santasRouteLatLngs = destinationsWithPresents.map(destination => { const { location } = destination; const { lat, lng } = location; return new L.LatLng( lat, lng ); }); // Utilize Leaflet's Polyline to add the route to the map const santasRoute = new L.Polyline( santasRouteLatLngs, { weight: 2, color: 'green', opacity: 1, fillColor: 'green', fillOpacity: 0.5 }); // Add Santa to the map! santasRoute.addTo(leafletElement); 

What we’re doing:

  • Creating an array of Leaflet LatLng instances that make up Santa’s route
  • Creating a Leaflet Polyline (a multi-point line) using that routes array
  • Make that Polyline green
  • Add our Polyline to the map

What we get… is a bunch of squiggly lines!

This is expected. This gets technical really fast, but Leaflet by default can only understand 1 “portion” of the map as it wraps around in our browser. What this realistically means, is instead of drawing a line around a globe, the coordinates think it goes from one side of the world to the other as it hits the International Dateline. This is a bit out of scope for this tutorial, but you can check out Leaflet.Antimeridian to learn more and see if you can implement the solution to it.

Follow along with the commit.

A few quick style tweaks

One last thing! And this is completely optional. Let’s make the map a little bit bigger, set the background color to match our oceans, and zoom out a little bit. So let’s make a few changes:

// In src/pages/index.js const DEFAULT_ZOOM = 1; 

We’re setting our default zoom to 1 instead of 2 to allow the map to be zoomed out a bit.

// In src/assets/stylesheets/pages/_home.scss .page-home { .map, .map-base { height: 80vh; } }

We’re setting our map to a height of 80vh instead of 50vh to make it take up a little more of our screen.

// In src/assets/stylesheets/components/_map.scss .map { &, .map-base { background: #acd3de; } }

We’re setting the background color of our map to #acd3de instead of $blue-grey-50 which allows us to match the color of the oceans on our map.

What this achieves is being able to see Santa’s full route and Santa on the first view. Additionally, since the map only covers part of the screen, setting the background color of the map allows us to not have a little bit of a weird cutoff.

Follow along with the commit.

Want a challenge?

To take this 1 step further, follow along with both how we added the routes and Santa to the map and try to see if you can add a marker to each destination location to show where all of the stops are. Bonus, add a popup to each one that says how many presents were delivered to that location!

To see the answer with some code organization and how I added the gift markers, check out the final version of the Santa Tracker demo.

While you’re there, you can also see how I utilized Leaflet.Antimeridian to fix our map's route.

What did we learn?

Building basic apps with a map isn’t nearly as bad as we thought! We learned how to fetch some data from an API, grab the data we need, and draw representations of that data on a map.

Next time you want to add a map widget to your landing page, try Leaflet. Share what you create on Twitter! Would love to see what you come up with.

I hope you and your family have a fantastic holiday season!

Want to learn more about maps?

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

  • Anyone Can Map! Inspiration and an introduction to the world of mapping
  • How to create a Coronavirus (COVID-19) Dashboard & Map App in React with Gatsby and Leaflet
  • How to set up a custom Mapbox basemap style with React Leaflet and Leaflet Gatsby Starter
  • How to Create a Summer Road Trip Mapping App with Gatsby and Leaflet
  • How to build a mapping app in React the easy way with Leaflet

Follow me for more Javascript, UX, and other interesting things!

  • ? Follow Me On Twitter
  • ?️ Subscribe To My Youtube
  • ✉️ Sign Up For My Newsletter

Want to read some of my other articles? Check out my blog: //www.colbyfayock.com/2019/12/create-your-own-santa-tracker-with-gatsby-and-react-leaflet/