Рубрики
Без рубрики

Как создать коронавирус (Covid-19) Приборная панель и карта приложение в реакции с GATSBY и листовкой

Пандемия Коронавируса (COVID-19) быстро изменила, как все мы взаимодействуют на день в день. Как мы можем использовать доступные API для создания приложения сопоставления, которое показывает влияние, которое он имел в мире? ОБНОВЛЕНИЕ: Оригинальный романовый API V1 API V1 был устарел. Пожалуйста, обновите и используйте

Автор оригинала: Colby Fayock.

Пандемия Коронавируса (COVID-19) быстро изменила, как все мы взаимодействуют на день в день. Как мы можем использовать доступные API для создания приложения сопоставления, которое показывает влияние, которое он имел в мире?

Обновление: Оригинальный номинальный API V1 API V1 был устарел. Пожалуйста, обновите и используйте следующее вместо: https://corona.lmao.ninja/v2/countries

Примечание автора: Это предназначено для демонстрации и доказательства концепции для привлечения эффектного приложения картирования, используя данные реальной жизни. Для полного и точного анализа, пожалуйста, обязательно используйте инструменты, такие как Джонс Хопкинс университетская панель инструментов . Оставайтесь дома и будьте в безопасности! ❤ ️

  • Что мы собираемся построить?
  • Что нам нужно, прежде чем мы начнем?
  • Шаг 1: Очистка некоторого ненужного кода
  • Шаг 2: Получение данных коронавируса
  • Шаг 3: Преобразование данных коронавируса в формат географического данных
  • Шаг 4: Добавление данных коронавируса на карту
  • Что еще мы можем сделать?
  • Быть в безопасности и оставаться в курсе
  • Хотите узнать больше о картах?

Что мы собираемся построить?

Мы будем объединять приложение сопоставления, которое использует API, содержащий недавнюю статистику Coronavirus, и отображается на местах и влияние на каждую страну.

На карте мы покажем маркер для каждой страны с количеством подтвержденных случаев. Кроме того, мы включаем небольшую всплывающую всплывающую подсказку, которая показывает более подробную информацию о глубине.

Карта, которую мы построим, в основном выглядят выше, но будут выглядеть немного проще. Мы будем использовать публичный Tileterver OpenStreetMap вместо пользовательского Mapbox.

Чтобы начать, мы собираемся использовать это Листовка GATSBY Стартер Я создал, чтобы сделать начальную установку немного более гладкой. С нашей приложением мы будем получать наши данные и добавлять маркеры на карту с нашими данными.

WOAH, картографическое приложение?

Ага. Если вы не играли с картами раньше, не обескуражены! Это не так плохо, как вы, наверное думаете. Если вы предпочитаете начать с отображения оснований, вы можете прочитать больше о том, как сначала работает сопоставление.

Что нам нужно, прежде чем мы начнем?

Если вы использовали вместе с моими предыдущими учебниками для создания санта-трекера или создания карты летней дороги, вы можете выполнить те же шаги, чтобы начать работу. Если нет, мы захотите убедиться, что у нас есть следующее:

  • Узел или пряжа – Я буду использовать пряжу, но вы можете заменить NPM, где это уместно
  • GATSBY’s Cli – пряжа глобальный добавить gatsby-cli

Если вы не уверены в одном из вышеперечисленных, вы можете попробовать проверить начало моего предыдущего учебника.

Мы также захочем настроить основу для нашей карты. Мы можем сделать это, используя листочку GATSBY стартера Я собрал, что предоставляет нам базовую настройку с Листовка и React Reflet Отказ

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

После того, как это закончилось, вы можете перейти к недавно созданному каталогу проекта и начать свой локальный сервер разработки:

cd my-coronavirus-map
yarn develop

Если все идет как запланировано, ваш сервер должен начать, и теперь вы сможете увидеть ваше основное приложение отображения в вашем браузере!

Следуйте вместе с Commit!

Шаг 1: Очистка некоторого ненужного кода

GATSBY STARTER Мы используем для раскрутки этого приложения, поставляется с некоторым демо-кодом, который нам не нужен здесь. Мы захотим сделать все изменения ниже в файле SRC/Pages/index.js , какая домашняя страница нашего приложения.

Во-первых, давайте удалим все от Mapeffect функция. Эта функция используется для запуска кода, которая загорается, когда отображается карта.

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

Мы также изменим имя переменной нашего Листовка Просто для того, чтобы быть в состоянии легче понять код, когда мы пишем.

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

Далее мы не хотим маркера на этот раз, так что давайте удалим <Маркер Компонент из нашего <Карта составная часть:

Теперь, когда у нас есть эти части очищены, мы можем удалить все следующие импорта и переменные из верхней части нашего файла:

  • УСЭРЕФ
  • Маркер
  • Priesetoflyto.
  • getcurrentLocation.
  • Гэтсби Астронавт
  • разумный
  • TimetoopenPopupafafafasterzoom.
  • TimetoupdatePopupafafasterzoom.
  • Zoom.
  • Popuppcontenthello.
  • popupcontentgatsby.
  • Markerref.

После того, как наша карта все еще должна работать, но ничего не делать.

Следуйте вместе с Commit!

Шаг 2: Получение данных коронавируса

Для нашего приложения мы собираемся использовать Novelcovid API Отказ Особенно мы собираемся использовать Страны Конечная точка Чтобы получить список наших стран и статистику, связанные с ними.

Для заправок я лично люблю использовать Axios Как это приятно использовать API. Если вы хотите использовать извлекать Или ваша собственная любимая библиотека запроса, замените ее для этого шага.

Мы начнем с установки Axios:

yarn add axios

После этого устанавливается, не забудьте перезапустить свой сервер.

Импортируйте пакет AXIOS TA TOW нашего Страницы/index.js файл:

import axios from 'axios';

Далее мы на самом деле сделаем нашу просьбу. Внутри нашего Mapeffect Функция, давайте попробуем сделать запрос на конечную точку 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;
}

В этом фрагменте мы делаем следующее:

  • Настройка ответ переменная, которая позволит нам хранить ответ
  • Добавление попробуйте/поймать Блок, который будет ловить любые ошибки API, если запрос не удается
  • Если запрос успешен, мы храним ответ в ответ Переменная
  • Если запрос не удается, мы консоль выхожу из системы ошибки и возврата от функции, поэтому мы не продолжаем запускать код с ошибкой запроса
  • Как только у нас есть наш ответ, мы можем разрушать данные Из ответа и установите значение по умолчанию для пустого массива, так как это будет тип данных нам нужно

После того, как это настроен, мы можем консоль выйти из данные Объект, и мы увидим наши данные успешно

Следуйте вместе с Commit!

Обновление: Предыдущий коммит включает в себя ссылку на оригинальную новинку V1 конечную точку API, которая теперь устарела. Пожалуйста, используйте это вместо этого: https://corona.lmao.ninja/v2/countries. .

Смотрите обновленные фиксации Отказ

Шаг 3: Преобразование данных коронавируса в формат географического данных

Теперь, когда у нас есть наши данные, мы можем преобразовать его в формат географического данных, в частности Геойсон , это позволит нам интерфейс с листовкой.

Давайте начнем с добавления этого блока кода:

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 ]
      }
    }
  })
}

Так что мы здесь делаем?

  • Мы создаем новую константу под названием Хашата это проверяет, если наш данные Переменная – это массив и имеет данные
  • Если у нас нет данных, мы хотим вернуть из функции, так как мы не хотим пытаться добавить данные У нас нет
  • Мы создаем Геойсон объект, который будет нашим документом Geojson
  • Наш документ имеет тип Featurecollection И как наше Особенности Мы петлю через наш набор данных
  • Для каждой страны в наших данных мы получаем лат и СПГ Создать точку для нашей карты
  • Мы дополнительно добавляем данные нашей страны в качестве свойств, чтобы мы могли получить доступ к нему в наших аписах сопоставления

Если вы console.log Этот объект нашего в вашем браузере и скопируйте содержимое, вы можете вставить это в GeoJSON.IO и посмотреть данные о местоположении правильно.

С помощью этого документа Geojson мы теперь сможем добавить его на нашу карту.

Следуйте вместе с Commit!

Шаг 4: Добавление данных коронавируса на карту

У нас есть наш документ Geojson с нашими данными местоположения, поэтому давайте добавим его на карту.

Давайте начнем с этого блока кода. Это длинный, но мы сломаем его штука:

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 = `
      
        
          
${country}

          
    
            
  • Confirmed: ${cases}
    • 
            
  • Deaths: ${deaths}
    • 
            
  • Recovered: ${recovered}
    • 
            
  • Last Update: ${updatedFormatted}
    • 
          

        
        ${ casesString }
      
    `;

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

Так что мы здесь делаем?

  • Мы создаем новый экземпляр Л. Гейойсон который преобразует наш документ Geojson во что-то, что брошенное?
  • Внутри этого экземпляра мы определяем пользовательский PointTolayer функция. Это позволяет нам настроить листочку слоя карты создает для нашей карты
  • В нашей функции мы назначаем и создаем наши данные начисления, которые мы хотим. Большинство из него разрушительно, но мы форматируем количество случаев, чтобы показать 1k + вместо 1000 и отформатированная дата вместо Timestamp
  • Мы создаем HTML String Block, который используется для определения нашего маркера карты, который будет добавлен на карту. Это также включает в себя HTML для всплывающей подсказки, которая появится, когда зависает через маркер
  • Мы возвращаемся L.marker С нашей пользовательской конфигурацией, которая включает в себя класс Значок Для контейнера и нашего пользовательского HTML.
  • Кроме того, мы добавляем Rosonhover недвижимость, так что при вытеснении на маркер, он поверхности сам над другими маркерами на карте

Мы также хотим добавить немного CSS здесь, чтобы мы могли убедиться, что наши маркеры отображаются на карте и полезны. Давайте добавим этот фрагмент нашим Активы/Стильные элементы/Компоненты/_Map.scss файл:

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

}

Что мы делаем:

  • Мы создаем наши круглые маркеры, используя .icon-marker класс и настроить наш .icon-marker-rusetip класс, чтобы показать, когда парил
  • Наше .icon-marker-rusetip Класс по умолчанию скрыт, так как наша всплывающая подсказка, но мы позиционируем это абсолютно, чтобы появиться поверх нашего маркера и отформатировали способ, которым мы хотим Это

И, наконец, как только у нас есть наш Geojsonlayers Создано с нашим стилем добавлена, мы можем добавить его на карту!

geoJsonLayers.addTo(map)

Теперь вам могут быть задаться вопросом, почему он не может быть правильно центрируется. Идите вперед и измените Расположение Переменная в верхней части index.js Файл:

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

Как только это установлено, когда на странице перезагружается, карта должна быть центрирована в середине мира!

Следуйте вместе с Commit!

Yay, мы сделали это! ?

Если вы последуете, вы теперь создали собственную панель инструментов Coronavirus Map, которая дает некоторую быструю статистику о случаях по всему миру.

Возьми то, что вы узнали и бегу с ним. Вы можете применить это к любым другим типам данных, которые вы можете себе представить.

Что еще мы можем сделать?

Добавить больше стилей и таможенного базового

В моем оригинальном демонстрировании я настроил пользовательский базовыйap, используя Mapbox Это позволяет мне упростить темный фон, что облегчает усмотрение маркеров.

MapBox отлично и имеет хороший бесплатный уровень, если вы заинтересованы в начале работы.

Как только у вас есть учетная запись MapBox, вы можете даже скопировать стиль Я использовал и делаю его своим.

Основная темная тема Mapbox

Чтобы узнать, как его интегрировать, вы можете попробовать проверить исходный код мой оригинальный демонстрация :

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

Добавить обзор Статистика приборной панели

Dishboards с картами, как Университет Университета Джона Хопкинса Позволяет нам видеть больше, чем смотреть на карту, но проблеск на быстрой статистике о случаях по всему миру.

Novelcovid API имеет больше конечных точек, как /все которые обеспечивают несколько глобальных статистиков.

Быть в безопасности и оставаться в курсе

Я хочу подтвердить, что вы должны убедиться, что вы остаетесь в курсе, используя официальные источники для получения информации, таких как Dishboard University University Johns Hopkins. Хотя данные должны быть надежными, оно также следует считать доказательством концепции для построения карты и ссылки, но не следует рассматривать для любого рода статистического анализа.

Пожалуйста, позаботься о себе в течение этих времен. Мы все в этом вместе! ❤ ️

Хотите узнать больше о картах?

Вы можете проверить несколько моих других ресурсов, чтобы начать:

Оригинал: “https://www.freecodecamp.org/news/how-to-create-a-coronavirus-covid-19-dashboard-map-app-in-react-with-gatsby-and-leaflet/”

Читайте ещё по теме: