Cum se creează un Coronavirus (COVID-19) Tablou de bord și aplicație Map în React cu Gatsby și Leaflet

Pandemia Coronavirus (COVID-19) a schimbat rapid modul în care toți interacționăm zi de zi. Cum putem folosi API-urile disponibile pentru a crea o aplicație de cartografiere care să arate impactul pe care l-a avut asupra lumii?

Actualizați: Punctul final original NovelCOVID API v1 a fost învechit. Vă rugăm să actualizați și să utilizați în schimb următoarele: https://corona.lmao.ninja/v2/countries

Nota autorului: Aceasta este menită să fie o demonstrație și o dovadă a conceptului pentru a pune împreună o aplicație de cartografiere impactantă folosind date din viața reală. Pentru o analiză completă și precisă, vă rugăm să vă asigurați că utilizați instrumente precum Tabloul de bord al Universității Johns Hopkins. Rămâi acasă și fii în siguranță! ❤️

• Ce vom construi?
• De ce avem nevoie înainte de a începe?
• Pasul 1: Curățarea unui cod inutil
• Pasul 2: Preluarea datelor Coronavirus
• Pasul 3: Transformați datele Coronavirus într-un format de date geografice
• Pasul 4: Adăugarea datelor Coronavirus pe hartă
• Ce altceva putem face?
• Fii în siguranță și rămâi informat
• Doriți să aflați mai multe despre hărți?

Ce vom construi?

Vom pune împreună o aplicație de cartografiere care utilizează un API care conține statistici recente Coronavirus și mapează locațiile și impactul cu care se confruntă fiecare țară.

Pe hartă, vom afișa un marker pentru fiecare țară cu numărul de cazuri confirmate. În plus, vom include o mică descriere pop-up care afișează informații mai detaliate.

Harta pe care o vom construi va arăta în cea mai mare parte a celor de mai sus, dar va arăta puțin mai simplă. Vom utiliza serverul de țiglă public OpenStreetMap în loc să folosim un custom Mapbox

Pentru a începe, vom folosi acest lucru Pliant Gatsby Starter Am creat pentru a face configurarea inițială un pic mai ușoară. Cu aplicația încărcată, vom prelua datele noastre și vom adăuga markere pe hartă cu datele noastre.

Woah, o aplicație de cartografiere?

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?

Dacă ați urmat împreună cu tutorialele mele anterioare pentru construirea unui Santa Tracker sau crearea unei hărți de călătorie de vară, puteți urma aceiași pași pentru a începe. Dacă nu, vom dori să ne asigurăm că avem următoarele setări:

• nodul sau fire – Voi folosi fire, dar puteți înlocui cu npm acolo unde este cazul
• CLI-ul lui Gatsby – yarn global add gatsby-cli

Dacă nu sunteți sigur de una dintre cele de mai sus, puteți încerca să verificați începutul tutorialului meu anterior.

De asemenea, vom dori să înființăm o fundație pentru harta noastră. Putem face acest lucru folosind Leaflet Gatsby Starter pe care l-am pus împreună, care ne oferă o configurare de bază Pliant și React Leaflet.

gatsby new my-coronavirus-map https://github.com/colbyfayock/gatsby-starter-leaflet

După ce ați terminat rularea, puteți naviga la directorul de proiect nou creat și puteți porni serverul de dezvoltare locală:

cd my-coronavirus-map
yarn develop

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!

Urmați împreună cu comiterea!

Pasul 1: Curățarea unui cod inutil

Gatsby Starter pe care îl folosim pentru a crea această aplicație vine cu un cod demonstrativ de care nu avem nevoie aici. Vom dori să facem toate modificările de mai jos în fișier src/pages/index.js, care este pagina principală a aplicației noastre.

În primul rând, să eliminăm totul din mapEffect funcţie. Această funcție este utilizată pentru a rula codul care se declanșează atunci când harta este redată.

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

De asemenea, vom schimba numele variabilei noastre leafletElement pur și simplu pentru a putea înțelege mai ușor codul pe măsură ce îl scriem.

async function mapEffect({ leafletElement: map } = {}) {
}

În continuare, nu vrem un marker de data aceasta, așa că hai să eliminăm <Marker componentă a noastră <Map componentă:

<Map {...mapSettings} />

Acum că avem aceste piese eliminate, putem elimina toate importurile și variabilele următoare din partea de sus a fișierului nostru:

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

După aceea, harta noastră ar trebui să funcționeze, dar să nu facă nimic.

Urmați împreună cu comiterea!

Pasul 2: Preluarea datelor Coronavirus

Pentru aplicația noastră, vom folosi NovelCOVID API. În special, vom folosi obiectiv final al țărilor pentru a prelua lista țărilor noastre și statisticile asociate acestora.

Pentru a face cereri, personal îmi place să folosesc axios deoarece are un API frumos de utilizat. Dacă doriți să utilizați aduc sau propria bibliotecă de solicitare preferată, înlocuiți-o cu acest pas.

Vom începe prin instalarea axios:

yarn add axios

După instalare, nu uitați să reporniți serverul.

Importați pachetul axios în partea de sus a noastră pages/index.js fişier:

import axios from 'axios';

În continuare vom face de fapt cererea noastră. În interiorul nostru mapEffect funcție, să încercăm să facem o cerere către punctul final API:

async function mapEffect({ leafletElement: map } = {}) {
    let response;

    try {
      response = await axios.get('https://corona.lmao.ninja/v2/countries');
    } catch(e) {
      console.log(`Failed to fetch countries: ${e.message}`, e);
      return;
    }

    const { data = [] } = response;
}

În acest fragment, facem următoarele:

• Configurarea unui response variabilă care ne va permite să stocăm răspunsul
• Adăugarea unui try/catch bloc care va prinde orice erori API în cazul în care solicitarea eșuează
• Dacă solicitarea are succes, stocăm răspunsul în response variabil
• Dacă solicitarea eșuează, consolăm deconectarea erorii și revenim din funcție, astfel încât să nu continuăm să rulăm codul cu o solicitare eșuată
• Odată ce avem răspunsul nostru, putem distruge data din răspuns și setați valoarea implicită la o matrice goală, deoarece acesta va fi tipul de date de care avem nevoie

După configurare, putem consola să ne deconectăm data obiect și vom vedea că datele noastre au fost preluate cu succes!

Urmați împreună cu comiterea!

Actualizați: Confirmarea anterioară include un link către punctul final original NovelCOVID v1 API, care a fost acum depreciat. Vă rugăm să utilizați acest lucru în schimb: https://corona.lmao.ninja/v2/countries.

Vedeți commit actualizat.

Pasul 3: Transformați datele Coronavirus într-un format de date geografice

Acum că avem datele noastre, le putem transforma într-un format de date geografice, în special GeoJSON, care ne va permite să interacționăm cu Leaflet.

Să începem prin adăugarea acestui bloc de cod:

const { data = [] } = response;
const hasData = Array.isArray(data) && data.length > 0;

if ( !hasData ) return;

const geoJson = {
  type: 'FeatureCollection',
  features: data.map((country = {}) => {
    const { countryInfo = {} } = country;
    const { lat, long: lng } = countryInfo;
    return {
      type: 'Feature',
      properties: {
       ...country,
      },
      geometry: {
        type: 'Point',
        coordinates: [ lng, lat ]
      }
    }
  })
}

Deci, ce facem aici?

• Creăm o nouă constantă numită hasData care verifică dacă a noastră data variabila este o matrice și are date
• Dacă nu avem date, vrem să revenim din funcție, deoarece nu vrem să încercăm să adăugăm date pe care nu le avem
• Creăm un geoJson obiect care va fi documentul nostru GeoJSON
• Documentul nostru este de tip FeatureCollection și ca al nostru features trecem prin setul nostru de date
• Pentru fiecare țară din datele noastre, obținem lat și lng pentru a crea un punct pentru harta noastră
• În plus, adăugăm datele țării noastre ca proprietăți, astfel încât să le putem accesa în API-urile noastre de cartografiere

daca tu console.log acest obiect este inclus în browserul dvs. și copiați conținutul, îl puteți lipi în geojson.io și puteți vedea datele despre locație afișate corect.

Cu acest document GeoJSON, acum îl vom putea adăuga pe harta noastră.

Urmați împreună cu comiterea!

Pasul 4: Adăugarea datelor Coronavirus pe hartă

Avem documentul GeoJSON cu datele noastre de localizare, așa că hai să îl adăugăm pe hartă.

Să începem cu acest bloc de cod. Este una lungă, dar o vom descompune bucată cu bucată:

const geoJsonLayers = new L.GeoJSON(geoJson, {
  pointToLayer: (feature = {}, latlng) => {
    const { properties = {} } = feature;
    let updatedFormatted;
    let casesString;

    const {
      country,
      updated,
      cases,
      deaths,
      recovered
    } = properties

    casesString = `${cases}`;

    if ( cases > 1000 ) {
      casesString = `${casesString.slice(0, -3)}k+`
    }

    if ( updated ) {
      updatedFormatted = new Date(updated).toLocaleString();
    }

    const html = `
      <span class="icon-marker">
        <span class="icon-marker-tooltip">
          <h2>${country}</h2>
          <ul>
            <li><strong>Confirmed:</strong> ${cases}</li>
            <li><strong>Deaths:</strong> ${deaths}</li>
            <li><strong>Recovered:</strong> ${recovered}</li>
            <li><strong>Last Update:</strong> ${updatedFormatted}</li>
          </ul>
        </span>
        ${ casesString }
      </span>
    `;

    return L.marker( latlng, {
      icon: L.divIcon({
        className: 'icon',
        html
      }),
      riseOnHover: true
    });
  }
});

Deci, ce facem aici?

• Creăm o nouă instanță de L.GeoJSON care va transforma documentul nostru GeoJSON în ceva ce va înțelege Broșura
• În această instanță, definim un obicei pointToLayer funcţie. Acest lucru ne permite să personalizăm stratul de hartă pe care Broșura îl creează pentru harta noastră
• În funcția noastră, atribuim și creăm punctele noastre de date pe care le dorim. Cea mai mare parte este destructurantă, dar formatăm numărul de cazuri pentru a le arăta 1k+ in loc de 1000 și o dată formatată în locul marcajului de timp
• Creăm un bloc de șir HTML care este utilizat pentru a defini marcatorul nostru de hartă care va fi adăugat pe hartă. Aceasta include, de asemenea, codul HTML pentru sfat de instrumente care va apărea atunci când treceți peste un marker
• Ne intoarcem L.marker cu configurația noastră personalizată care include o clasă de icon pentru container și codul nostru HTML personalizat.
• În plus, adăugăm riseOnHover proprietate astfel încât atunci când se deplasează peste un marker, acesta se află deasupra celorlalți markeri de pe hartă

De asemenea, dorim să adăugăm un pic de CSS aici, astfel încât să ne putem asigura că markerii noștri apar pe hartă și sunt utilizabili. Să adăugăm acest fragment la assets/stylesheets/components/_map.scss fişier:

.icon-marker {

  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  color: white;
  width: 3.6em;
  height: 3.6em;
  font-size: .7em;
  font-weight: bold;
  background-color: $red-800;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(black, .9);

  &:hover {

    .icon-marker-tooltip {
      display: block;
    }

  }

}

.icon-marker-tooltip {

  display: none;
  position: absolute;
  bottom: 100%;
  width: 16em;
  font-size: 1.4em;
  padding: 1em;
  background-color: $blue-grey-900;
  border-radius: .4em;
  margin-bottom: 1em;
  box-shadow: 0 3px 5px rgba(black, .9);

  &:before {
    display: block;
    position: absolute;
    bottom: -.6em;
    left: 50%;
    content: '';
    width: 1.4em;
    height: 1.4em;
    background-color: $blue-grey-900;
    transform: rotate(45deg);
    margin-left: -.7em;
  }

  h2 {
    font-size: 1.5em;
    line-height: 1.2;
    margin-bottom: .1em;
    margin-top: 0;
  }

  h3 {
    font-size: 1.2em;
    margin: .1em 0;
    font-weight: normal;
    color: $blue-grey-100;
  }

  ul,
  p {
    font-weight: normal;
  }

  ul {
    list-style: none;
    padding: 0;
    margin: .6em 0 0;
  }

}

Ce facem:

• Ne creăm markerele rotunde folosind .icon-marker clasa și înființează-ne .icon-marker-tooltip clasa să apară atunci când este planat
• Al nostru .icon-marker-tooltip clasa este ascunsă în mod implicit, deoarece este sfatul nostru de instrumente, dar îl poziționăm absolut pentru a apărea deasupra marcatorului nostru și formatat așa cum îl dorim

Și, în sfârșit, odată ce avem geoJsonLayers creat cu stilul nostru adăugat, îl putem adăuga pe hartă!

geoJsonLayers.addTo(map)

Acum s-ar putea să vă întrebați de ce nu pare să se centreze corect. Continuați și schimbați LOCATION variabilă în partea de sus a index.js trimiteți la:

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

Odată setat acest lucru, atunci când pagina se reîncarcă, harta ar trebui să fie centrată în mijlocul lumii!

Urmați împreună cu comiterea!

Da, am făcut-o! ?

Dacă ați urmat, ați creat propriul tablou de bord al hărții Coronavirus, care oferă câteva statistici rapide despre cazurile din întreaga lume.

Luați ceea ce ați învățat și fugiți cu el. Puteți aplica acest lucru oricărui alt tip de date pe care vi-l puteți imagina.

Ce altceva putem face?

Adăugați mai multe stiluri și o hartă de bază personalizată

În demo-ul meu original, am configurat o hartă de bază personalizată folosind Mapbox care îmi permite să am un fundal întunecat, făcând marcajele mai ușor de văzut.

Mapbox este minunat și are un nivel gratuit frumos dacă sunteți interesat să începeți.

Odată ce ai un cont Mapbox, poți chiar copiați stilul Am folosit-o și o fac a ta.

Tema de bază Dark Mapbox

Pentru a afla cum să-l integrezi, poți încerca să verifici codul sursă al demo-ul meu original:

https://github.com/colbyfayock/coronavirus-map-dashboard

Adăugați statistici ale tabloului de bord

Tablouri de bord cu hărți precum Aplicația Universității Johns Hopkins ne permite să vedem mai mult decât o privire pe hartă, dar să aruncăm o privire asupra statisticilor rapide despre cazurile din întreaga lume.

NovelCOVID API are mai multe puncte finale cum ar fi /all care oferă câteva statistici globale.

Fii în siguranță și rămâi informat

Vreau să reiterez faptul că ar trebui să vă asigurați că rămâneți la curent folosind surse oficiale pentru informații, cum ar fi tabloul de bord al Universității Johns Hopkins. Deși datele ar trebui să fie fiabile, ar trebui, de asemenea, să fie considerate o dovadă a conceptului pentru construirea unei hărți și referințe, dar nu ar trebui luate în considerare pentru niciun fel de analiză statistică.

Te rog să ai grijă de tine în aceste vremuri. Suntem în asta împreună! ❤️

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

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

• Oricine poate Harta! Inspirație și o introducere în lumea cartografierii
• Cum să configurați un stil de hartă de bază Mapbox personalizat cu React Leaflet și Leaflet Gatsby Starter
• Cum să creați o aplicație de cartografiere a călătoriei de vară cu Gatsby și Leaflet
• Cum să-ți creezi propriul tracker de Moș Crăciun cu Gatsby și React Leaflet
• Cum să construiești o aplicație de cartografiere în Reacționează ușor cu Leaflet