Sezonul de Crăciun este o perioadă magică a anului. Îl avem pe Moș Crăciun zburând în jurul valorii de aplauze și al Elfului care călătorește prin New York în timpul revizuirii noastre anuale cu familia și prietenii.

Cum sa ti creezi propriul tracker de Mos Craciun cu Gatsby
Buddy Elf fluturând

Pentru a intra în spirit, vom face o aplicație web care include o hartă care îl urmărește pe Moș Crăciun pe ea!

Editați 12/23: a fost actualizată aplicația pentru a solicita direct la ruta lui Moș Crăciun, doar în cazul în care API-ul original nu funcționează conform așteptărilor inițiale.

Ce vom construi?

Vom lucra prin construirea unei aplicații de cartografiere care să urmărească traseul lui Moș Crăciun și locația sa actuală.

Pentru a realiza acest lucru, vom crea un starter Gatsby premat care ne va oferi o bază de bază pentru o hartă, vom folosi API-ul neoficial al Google pentru a apuca traseul lui Moș Crăciun și îi vom suprapune poziția și traseul deasupra hărții cu Leaflet.

Woah, o aplicație de cartografiere?

1611326651 130 Cum sa ti creezi propriul tracker de Mos Craciun cu Gatsby
Ay Caramba

Da. Dacă nu v-ați mai jucat cu hărțile, nu vă descurajați! Nu este atât de rău pe cât probabil credeți. Dacă preferați să începeți cu noțiunile de bază ale cartografierii, puteți citi mai întâi despre cum funcționează cartarea mai întâi.

De ce avem nevoie înainte de a începe?

Pentru acest exercițiu, voi presupune că ai făcut-o nodul sau fire instalat. Pentru fiecare exemplu, voi folosi fire, dar voi folosi instrumentul la alegere.

De asemenea, veți dori să instalați CLI-ul lui Gatsby la nivel global ceea ce ne va permite să le folosim Instrumente de pornire.

Pentru a configura CLI-ul lui Gatsby, rulați următoarea comandă:

yarn global add gatsby-cli

După aceea, ar trebui să puteți alerga gatsby -h pentru a vedea comenzile disponibile, ceea ce înseamnă că este instalat cu succes.

Cum sa ti creezi propriul tracker de Mos Craciun cu Gatsby
Se execută gatsby -h pentru a verifica instalarea

Pentru mai multe informații despre Gatsby CLI, puteți verificați documentația lor.

Noțiuni de bază cu fundația noastră pentru hartă

Odată ce instrumentele noastre de linie de comandă sunt configurate, primul lucru pe care îl vom dori este să creăm un nou proiect Gatsby folosind un starter de pliant Am pus împreună. Ne oferă o configurare de bază cu Pliant și React Leaflet.

Începând din directorul de proiect, să instalăm proiectul:

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

Asigurați-vă că înlocuiți [directory] cu locația în care doriți să vă configurați proiectul.

După ce executați acea comandă, Gatsby va clona proiectul respectiv fără referințe git și va instala pachetele necesare pentru a porni.

1611326652 106 Cum sa ti creezi propriul tracker de Mos Craciun cu Gatsby
Instalarea Gatsby Starter Leaflet

Pentru a vă asigura că funcționează, puteți naviga acum la acel director, rotiți serverul și testați-l în browser:

cd [directory]
yarn develop

Unde vezi [directory] de mai sus, asigurați-vă că utilizați aceeași cale pe care ați făcut-o înainte la configurarea noului proiect Gatsby.

1611326653 349 Cum sa ti creezi propriul tracker de Mos Craciun cu Gatsby
Rularea Gatsby Starter Leaflet

Dacă totul merge așa cum este planificat, serverul dvs. ar trebui să înceapă și acum ar trebui să puteți vedea aplicația dvs. de cartografiere de bază în browser!

1611326654 131 Cum sa ti creezi propriul tracker de Mos Craciun cu Gatsby
Gatsby Starter Leaflet în browser

Curățarea lucrurilor

Acest starter vine cu un exemplu rapid despre modul în care putem interacționa cu harta. Nu vom avea deloc nevoie de asta pentru scopurile noastre, astfel încât să putem merge mai departe și să curățăm lucrurile.

Pentru început, ne vom deschide index.js , fișierul paginii de pornire și scăpați de tot ce se află în mapEffect funcție, care ne lasă cu:

// In src/pages/index.js

async function mapEffect({ leafletElement } = {}) {
  // Get rid of everything in here
}

Acum, să eliminăm Marker componentă cuibărită în interiorul nostru Map, deci ajungem la:

<Map {…mapSettings} />

Acum, că nu mai folosim această funcționalitate, putem scăpa de variabilele și referințele din partea de sus a fișierului, astfel încât să puteți continua și să eliminați:

  • useRef
  • promiseToFlyTo
  • getCurrentLocation
  • Marker
  • gatsby_astronaut
  • ZOOM
  • timeToZoom
  • timeToOpenPopupAfterZoom
  • timeToUpdatePopupAfterZoom
  • popupContentBună ziua
  • popupContentGatsby
  • markerRef

Urmați împreună cu comiterea.

Găsindu-l pe Moș Crăciun

Acum, că suntem într-un loc bun, să ne murdărim mâinile și să-l găsim pe Moș Crăciun. Pentru a face acest lucru, vom folosi API-ul neoficial și nedocumentat al Google. Aceasta înseamnă că este posibil ca acest API să nu fie disponibil în ziua următoare publicării, dar să fim optimiști.

În plus, la momentul scrierii, încă arată destinațiile de anul trecut, așa că ceea ce vom vizualiza cu adevărat aici este ruta anului trecut al lui Moș Crăciun, deși speranța este că aceasta se va reseta pe 24 și vom fi cu toții veseli!

Înainte de a-l primi pe Moș Crăciun, să adăugăm mai întâi o linie înapoi la a noastră mapEffect funcţie:

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

Ceea ce va face este să împiedice rularea codului nostru în cazul în care harta noastră nu este încă pregătită. mapEffect funcționează în sine, așa cum puteți vedea în Map componentă, rulează în interiorul unei instanțe de useEffect trecând un argument al unui ref pe hartă, permițându-ne să rulăm un cod după redarea componentei noastre.

Deci, odată ce avem această linie, să luăm acum traseul lui Moș Crăciun în interiorul nostru mapEffect funcţie:

async function mapEffect({ leafletElement } = {}) {
  if ( !leafletElement ) return;
  let route, routeJson;
  try {
    route = await fetch('https://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);
}

Să descompunem acest lucru:

  • Apucăm traseul lui Moș Crăciun prin punctul final API
  • Odată ce avem traseul său, preluăm răspunsul într-un format JSON pentru a ușura lucrul
  • Toate acestea sunt înfășurate într-o încercare / captură, astfel încât să putem gestiona în siguranță orice erori de răspuns
  • În cele din urmă, noi doar log răspunsul nostru deocamdată
1611326654 515 Cum sa ti creezi propriul tracker de Mos Craciun cu Gatsby
Obiectul traseului lui Moș Crăciun în consola web

Acum îl avem pe Moș Crăciun și traseul său, ceea ce înseamnă că putem vedea toate destinațiile din traseul său. Dacă introduceți puțin răspunsul, puteți vedea câteva lucruri distractive, cum ar fi câte cadouri au fost livrate în fiecare locație și vremea în acel moment!

Urmați împreună cu comiterea.

Puneți un știft în locația sa

L-am găsit pe Moș Crăciun! ? Acum să-l punem pe hartă.

Pentru scopurile noastre, va trebui să găsim latitudinea și longitudinea lui Moș Crăciun. Problema este că nu obținem această valoare exactă definită nicăieri, ci doar obținem destinațiile sale.

Deoarece nu avem locația specificată nicăieri, putem utiliza ultima sa locație cunoscută în care au fost livrate cadouri. Adăugați următoarele după ultimul nostru fragment din mapEffect funcţie:

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

Sub codul nostru de solicitare, noi:

  • Destructură routeJson a apuca destinations într-o constantă, adăugând o rezervă la un obiect gol
  • Filtrați rezultatele pentru a găsi doar destinațiile pe care le-a vizitat, folosind ora de sosire din obiectul rutei
  • Filtrează rezultatele pentru a găsi doar locațiile cu cadouri
  • Și, în cele din urmă, luați ultimul element din matrice, care arată ultima sa locație cunoscută

În acest moment, 12/23, nu avem de fapt nicio destinație, deoarece Moș Crăciun se află încă la Polul Nord. În orice moment, putem testa acest lucru pentru a simula o dată viitoare prin înlocuire Date.now() în destinationsVisited cu o dată viitoare, cum ar fi 1577188980000 care ar fi în jurul orei 19.00 est, pe 24.12. Cu această schimbare, putem vedea cum arată de fapt traseul lui Moș Crăciun!

Manipulați un Moș Crăciun lipsă

Acum că este aproape de Crăciun, Moș Crăciun va fi în continuare la Polul Nord, așa că hai să ne ocupăm de cazul în care nu avem o locație.

Deasupra liniei pe care am stabilit-o lastKnownDestination, să adăugăm:

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: `<div class="icon-santa">?</div>`,
      iconSize: 50
    })
  });
  noSanta.addTo( leafletElement );
  noSanta.bindPopup( `Santa's still at the North Pole!` );
  noSanta.openPopup();
  return;
}

Bine, ce facem aici?

  • În primul rând, verificăm dacă avem destinații cu cadouri, ceea ce aici nu avem
  • Mai întâi creăm un LatLng al centrului hărții
  • Creăm un marker Pliant, folosind centrul respectiv, cu o pictogramă personalizată a lui Moș Crăciun
  • Apoi adăugăm acel marcator Moș Crăciun în prospectul Element, care este harta noastră
  • Pentru a afișa un mesaj, mai întâi legăm un popup cu un mesaj personalizat și îl deschidem
  • În cele din urmă ne întoarcem, astfel încât restul codului să nu ruleze, deoarece nu îl avem pe Moș Crăciun în acest moment

Aceasta a fost o secțiune adăugată după publicare pentru a gestiona resetarea API-ului, dar puteți continua în continuare împreună cu codul pe care l-am adăugat în contextul restului restului codului.

Urmăriți codul.

Îl fixează pe Moș Crăciun

Editare 12/23: Această secțiune a fost scrisă inițial cu API-ul anului precedent, dar acesta este în continuare un bun exemplu la ceea ce vă veți aștepta la răspuns, astfel încât să puteți urmări chiar de-a lungul.

Și, după cum putem vedea, din moment ce ne uităm la datele de anul trecut, Moș Crăciun s-a întors acasă la Polul Nord.

1611326655 950 Cum sa ti creezi propriul tracker de Mos Craciun cu Gatsby
Ultima locație cunoscută a lui Moș Crăciun în consola web

Cu locația sa, putem distruge acest lucru, putem configura o instanță de marcaj Leaflet și putem adăuga vechiul nostru prieten pe hartă. Adăugați următoarele după ultimul nostru fragment din mapEffect funcţie:

const santaLocation = new L.LatLng( lastKnownDestination.location.lat, lastKnownDestination.location.lng );

const santaMarker = L.marker( santaLocation, {
  icon: L.divIcon({
    className: ‘icon’,
    html: `<div class=“icon-santa”>?</div>`,
    iconSize: 50
  })
});

santaMarker.addTo(leafletElement);

Aici noi:

  • Creați o instanță Leaflet LatLng cu locația sa
  • Creați o instanță Marker cu noua noastră instanță LatLng
  • Adăugați noul nostru Marker pe hartă

Dacă ne reîmprospătăm pagina, va trebui să micșorați și să vă deplasați puțin, dar îl vom vedea pe Moș Crăciun pe hartă!

1611326655 387 Cum sa ti creezi propriul tracker de Mos Craciun cu Gatsby
Moș Crăciun pe hartă

Înainte de a merge mai departe, să-i dăm lui Moș Crăciun o mică bucurie de sărbători pentru a-l face mai ușor de găsit. Gaseste-ti application.scss înregistrați și aruncați aceste stiluri în:

// 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;
}

Acest lucru adaugă doar un cerc alb în jurul său, o mică umbră și crește puțin dimensiunea pentru a-l face puțin mai ușor de găsit pe hartă.

1611326656 280 Cum sa ti creezi propriul tracker de Mos Craciun cu Gatsby
Moș Crăciun pe hartă

Urmați împreună cu comiterea.

Desenându-i traseul

Ultimul lucru pe care îl vom face aici este să trasăm o cale pe hartă care să arate traseul său, astfel încât să putem urma.

Pentru a începe, să ne actualizăm codul și să adăugăm acest ultim bit după ultimul nostru fragment din mapEffect funcţie:

// 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);

Ce facem:

  • Crearea unei matrice de instanțe LatLng Leaflet care alcătuiesc traseul lui Moș Crăciun
  • Crearea unei pliante polilinie (o linie cu mai multe puncte) folosind acea matrice de rute
  • Faceți ca Polyline să fie verde
  • Adăugați polilinia noastră pe hartă

Ceea ce primim … este o grămadă de linii zgârcite!

1611326656 993 Cum sa ti creezi propriul tracker de Mos Craciun cu Gatsby
Traseul lui Moș Crăciun pe hartă

Acest lucru este de așteptat. Acest lucru devine foarte rapid tehnic, dar Broșura în mod implicit poate înțelege doar 1 „porțiune” de hartă pe măsură ce se înfășoară în browserul nostru. Ceea ce înseamnă acest lucru în mod realist este, în loc să traseze o linie în jurul unui glob, coordonatele cred că merge de la o parte a lumii la alta, pe măsură ce atinge Linia de date internațională. Acest lucru este puțin în afara scopului acestui tutorial, dar puteți verifica Pliant.Antimeridian pentru a afla mai multe și a vedea dacă puteți implementa soluția la aceasta.

Urmați împreună cu comiterea.

Câteva modificări rapide ale stilului

Inca un lucru! Și acest lucru este complet opțional. Să facem harta puțin mai mare, să setăm culoarea de fundal pentru a se potrivi oceanelor noastre și să micșorăm puțin. Deci, să facem câteva modificări:

// In src/pages/index.js

const DEFAULT_ZOOM = 1;

Ne setăm zoomul implicit la 1 in loc de 2 pentru a permite micșorarea hărții un pic.

// In src/assets/stylesheets/pages/_home.scss

.page-home {

  .map,
  .map-base {
    height: 80vh;
  }

}

Ne setăm harta la o înălțime de 80vh in loc de 50vh pentru a-l face să ocupe un pic mai mult din ecranul nostru.

// In src/assets/stylesheets/components/_map.scss
.map {

  &,
  .map-base {
    background: #acd3de;
  }

}

Setăm culoarea de fundal a hărții noastre la #acd3de in loc de $blue-grey-50 ceea ce ne permite să potrivim culoarea oceanelor de pe harta noastră.

Ceea ce realizează este să poți vedea traseul complet al lui Moș Crăciun și pe Moș Crăciun în prima vedere. În plus, din moment ce harta acoperă doar o parte a ecranului, setarea culorii de fundal a hărții ne permite să nu avem un pic de tăiere ciudat.

1611326657 473 Cum sa ti creezi propriul tracker de Mos Craciun cu Gatsby
Traseul Moșului a micșorat

Urmați împreună cu comiterea.

Vrei o provocare?

Pentru a face acest pas 1 mai departe, urmați împreună modul în care am adăugat rutele și Moș Crăciun pe hartă și încercați să vedeți dacă puteți adăuga un marker la fiecare locație de destinație pentru a arăta unde sunt toate stațiile. Bonus, adăugați un pop-up la fiecare care spune câte cadouri au fost livrate în locația respectivă!

Pentru a vedea răspunsul cu o anumită organizare a codului și modul în care am adăugat markere cadou, consultați versiunea finală a Demo pentru Santa Tracker.

1611326658 542 Cum sa ti creezi propriul tracker de Mos Craciun cu Gatsby
Demo finală pentru Santa Tracker

În timp ce sunteți acolo, puteți vedea și modul în care am folosit Leaflet.Antimeridian pentru a repara traseul hărții noastre.

Ce am învățat?

Construirea de aplicații de bază cu o hartă nu este aproape atât de rea pe cât am crezut! Am învățat cum să preluăm unele date dintr-un API, să preluăm datele de care avem nevoie și să desenăm reprezentări ale acestor date pe o hartă.

Data viitoare când doriți să adăugați un widget de hartă la pagina dvs. de destinație, încercați Leaflet. Distribuiți ceea ce creați Stare de nervozitate! Mi-ar plăcea să văd cu ce veniți.

Sper că tu și familia ta aveți un sezon de vacanță fantastic!

1611326659 399 Cum sa ti creezi propriul tracker de Mos Craciun cu Gatsby
Sărbători fericite de la Dunder Mifflin

Doriți să aflați mai multe despre hărți?

Puteți consulta câteva dintre celelalte resurse ale mele pentru a începe:

Doriți să citiți câteva dintre celelalte articole ale mele? Vezi blogul meu: https://www.colbyfayock.com/2019/12/create-your-own-santa-tracker-with-gatsby-and-react-leaflet/