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?
Table of Contents
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!

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.

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!

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.
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 nostrufeatures
trecem prin setul nostru de date - Pentru fiecare țară din datele noastre, obținem
lat
șilng
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ă.
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 de1000
ș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ă deicon
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!

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.
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