Java, UX, HTML, CSS, WEB-design

Как создавать карты с помощью React и Leaflet

[ad_1]

  • Шаджиа Абиди

  • 0 Комментарии

Как создавать карты с помощью React и Leaflet

  • 10 минут чтения

  • Реакция, JavaScript, Взаимодействие с пользователем

Краткое резюме ↬

Листовка — очень мощный инструмент, и мы можем создавать множество различных карт. Это руководство поможет вам понять, как создать расширенную карту с помощью React и Vanilla JS.

Извлекать информацию из файла CSV или JSON не только сложно, но и утомительно. Представление тех же данных в виде наглядного пособия проще. В этой статье мы собираемся представить на карте места немедицинских пожаров, на которые отреагировала пожарная служба Сан-Франциско.

Для этого урока мы будем использовать следующие инструменты:

  • Листовка
    Библиотека JavaScript для интерактивных карт.
  • Реагировать
    Библиотека JavaScript для создания пользовательских интерфейсов.
  • React-буклет
    Компоненты React для карт Leaflet

Что такое листовка?

Leaflet.js, набравшая около 27 тысяч звезд, является одной из ведущих библиотек JavaScript с открытым исходным кодом для интерактивных карт, удобных для мобильных устройств. Он использует преимущества HTML5 и CSS3 в современных браузерах, но при этом доступен и в старых. В целом, он поддерживает все основные настольные и мобильные платформы.

Листовка весит около 38 КБ и отлично подходит для базовых вещей. Для дополнительных расширений его можно расширить с помощью огромного количества плагинов.

Многие газеты, в том числе NPR, Washington Post, Boston Globe и другие организации, используют Leaflet для своих проектов по углубленному изучению данных.

The San Francisco Chronicle, например, разработала проект под названием California Fire tracker — интерактивную карту, которая с помощью Leaflet предоставляет информацию о лесных пожарах в Калифорнии. Они не только точно определили происхождение огня, но и показали нам его траекторию.

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

Прежде чем перейти к React, давайте разберемся с основами Leaflet. Для этого мы создадим простой пример, где мы будем настраивать карту Leaflet, работать с маркерами и всплывающими окнами.

Еще после прыжка! Продолжить чтение ниже ↓

Сначала создадим index.html и app.js файлы в нашем /project папку и связать последнюю с нашим index.html файл.

Чтобы начать использовать Leaflet, нам нужно связать Leaflet CSS и Leaflet JS в наших тегах head. Следует иметь в виду, что Leaflet CSS предшествует Leaflet JS. Это все для листовки.

Есть еще одна вещь, которую мы должны добавить к нашему index.html файл — контейнер, в котором будет храниться наша карта.

<div id="mapid"></div>

Прежде чем мы забудем, давайте добавим высоту нашему div.

#mapid { height: 1000px; }

Теперь самое интересное. Независимо от того, решите ли вы создать новый файл JavaScript или продолжить в тегах script, убедитесь, что <div id="mapid"> добавляется в дом перед вызовом L.map('mapid').

Вы, наверное, спросите: «Но почему?» Ну, это потому, что это выдаст вам ошибку, если вы привяжете карту к контейнеру, который еще не существует.

Uncaught Error: Map container not found

Создание карты

Теперь самое интересное. Чтобы инициализировать карту, мы передаем наш div в L.map() с некоторыми вариантами.

const myMap = L.map('mapid', {
 center: [37.7749, -122.4194],
  zoom: 13
})

Давайте шаг за шагом, чтобы понять, что только что произошло. Мы используем класс Map API-интерфейса Leaflet для создания карты на странице. Мы передаем в этот класс два параметра:

  1. Мы передали строковую переменную, представляющую DOM Я БЫ
  2. Необязательный литерал объекта с параметрами карты

Есть много вариантов, которые мы могли бы передать нашему классу, но два основных параметра — это центр и масштабирование. Center определяет начальный географический центр карты, а zoom указывает начальный уровень масштабирования карты. Оба они не определены по умолчанию.

Для центра мы передали координаты Сан-Франциско. Есть много мест, где мы можем выполнять прямое и обратное геокодирование, но для базового поиска, такого как этот, мы можем воспользоваться Google.

Обычно значение масштабирования зависит от того, что вы хотите отобразить. Вы хотите показать город или штат? Страна или континент? Идите вперед и поэкспериментируйте со значением масштабирования, чтобы получить лучшее представление. Для этого примера мы выбрали 13, потому что он показывает весь город.

Другой способ инициализации карты — использование setView(). Он принимает массив координат и целое число для уровня масштабирования.

const myMap = L.map('map').setView([37.7749, -122.4194], 13);

По умолчанию все взаимодействия с мышью и касания на карте включены, и на ней есть элементы управления масштабированием и атрибуцией.

Создание слоя

Далее мы добавим слой тайлов на нашу карту; в нашем случае это мозаичный слой Mapbox Streets. Мы можем добавлять различные типы слоев тайлов, создавая экземпляр класса TileLayer.

Чтобы создать слой плитки, нам нужно установить шаблон URL для изображения плитки, текст атрибуции и максимальный уровень масштабирования слоя. Шаблон URL-адреса — это то, что дает нам доступ к нужному слою плитки от поставщика услуг. Поскольку мы используем API статических плиток Mapbox, нам потребуется запросить токен доступа.

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', { 
attribution: 'Map data © <a href="https://www.openstreetmap/">OpenStreetMap</a> contributors, <a href="https://creativecommons/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery (c) <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18, 
id: 'mapbox/streets-v11', 
accessToken: 'your.mapbox.access.token' }).addTo(mymap);

На этом этапе, если мы откроем наш index.html в браузере, мы сможем увидеть карту Сан-Франциско. Ставим булавку на карту.

Маркеры и круги

У нас есть карта и слой, но он не указывает нам ни на что конкретное. Чтобы указать на определенное место на карте, Leaflet предоставляет нам маркеры.

Чтобы закрепить местоположение, мы создаем экземпляр маркера с помощью класса Marker, передаем координаты и добавляем его на карту. Здесь мы используем координаты Твин Пикс в городе.

const marker = L.marker([37.7544, -122.4477]).addTo(mymap);

Точно так же мы можем привязать круг к карте, используя Circle класс. Мы передаем несколько дополнительных параметров, таких как радиус, цвет и так далее. Для circle маркер, мы передаем координаты маяка Пойнт Бонита.

const circle = L.circle([37.8157, -122.5295], {
 color: 'gold',
 fillColor: '#f03',
 fillOpacity: 0.5,
 radius: 200
}).addTo(mymap);

Всплывающие окна

Это все здорово, но что, если мы хотим передать дополнительную информацию о местоположении. Мы делаем это с помощью всплывающего окна.

circle.bindPopup("I am pointing to Point Bonita Lighthouse");

marker.bindPopup("I am pointing to Twin Peaks");

Метод bindPopup принимает указанное содержимое HTML и добавляет его к маркеру, поэтому всплывающее окно появляется при нажатии на маркер.

React-буклет

Теперь мы знаем, как создать карту и добавить маркеры с помощью Leaflet и ванильного JavaScript. Давайте посмотрим, как мы можем добиться таких же результатов с помощью React. Мы не собираемся делать такое же приложение, а вместо этого сделаем расширенное приложение.

Первая задача для нас — получить токен доступа с портала открытых данных Сан-Франциско. Это онлайн-портал, где мы можем найти сотни наборов данных из города и округа Сан-Франциско. Я решил использовать этот ресурс, но есть много других ресурсов, которые мы можем использовать вместо этого.

API-ключ доступа

  1. Создайте учетную запись и войдите на портал.
  2. Нажмите на ссылку управления в правом нижнем углу.
  3. Нажмите «Создать новый ключ API» и дайте ему имя.
  4. Скопируйте идентификатор ключа и секретный ключ. Вам понадобится это для доступа к данным.

Для этого мы будем использовать React-Leaflet — компоненты реакции для карт Leaflet. Давайте создадим реагирующее приложение.

npx create-react-app react-fire-incidents
cd react-fire-incidents

Тогда давайте установим react-leafletи Leaflet, выполнив следующую команду в нашем терминале:

npm install react-leaflet leaflet

App.js

Давайте создадим папку /components внутри src. Внутри компонентов создадим файл с именем Map.js. Здесь будет жить наша Карта. Теперь давайте отредактируем App.js удаляя ненужный код и импортируя модули из react-leaflet axios и вновь созданный Map.js.

import React, { Component, Fragment } from 'react';
import axios from 'axios';
import Map from './components/Map'

В нашем классе App мы собираемся определить массив в нашем состоянии, называемом инцидентами — когда страница загружается, мы будем помещать наши данные в этот массив.

class App extends Component {
 state = {
   incidents: [],
 }
 render() {
   return (
     <div> </div>
   );
 }
}
export default App;

Далее мы сделаем запрос GET при монтировании компонента. У нас есть токен приложения, но нам все еще нужна конечная точка. Где мы находим конечную точку?

Перейдем к порталу и нажмем «Обзор данных». В строке поиска давайте искать инциденты с пожарами. Первый результат, который появляется, это то, что мы ищем. После того, как мы нажмем на ссылку, мы сможем получить URL-адрес, нажав кнопку API в правом верхнем углу.

Мы передадим конечную точку в наш запрос GET, а в качестве параметров передадим лимит и наш токен приложения. Исходные данные содержат тысячи записей, но для простоты мы ограничили их до 500. Мы обновляем массив инцидентов нашими результатами.

Как только мы получим данные, мы обновим наше состояние.

async componentDidMount() {
   const res = await axios.get('https://data.sfgov/resource/wr8u-xric.json', {
     params: {
       "$limit": 500,
       "$$app_token": YOUR_APP_TOKEN
     }
   })
   const incidents = res.data;
   this.setState({incidents: incidents });
 };

Вот как должен выглядеть наш App.js.

class App extends Component {
state = {
  incidents: [],
}

async componentDidMount() {
 const res = await axios.get('https://data.sfgov/resource/wr8u-xric.json', {
   params: {
     "$limit": 500,
     "$$app_token": YOUR_APP_TOKEN
   }
 })
 const incidents = res.data;
 this.setState({incidents: incidents });
};
render() {
 return (
<Map incidents={this.state.incidents}/>
 );
}
}
export default App;

Map.js

Поскольку мы уже знаем, как создать карту Leaflet, эта часть будет относительно простой. Мы будем импортировать Map, TileLayer, Marker, Popup компоненты из react-leaflet.

import React, { Component } from 'react'
import { Map, TileLayer, Marker, Popup } from 'react-leaflet'

Если мы помним из предыдущего примера, нам нужны координаты и уровень масштабирования для инициализации карты. В нашем Map class, мы определяем их в нашем состоянии, используя lat, lng и zoom переменные.

export default class Map extends Component {
   state = {
       lat: 37.7749,
       lng: -122.4194,
       zoom: 13,
   }
   render() {
       return (
     <div></div>
        )
    }
}

Затем мы проверим, пуст ли наш массив инцидентов. Если он пуст, мы вернем сообщение о том, что «Данные загружаются»; в противном случае мы вернем карту.

В нашем react-leafletх Map компонент, мы передадим координаты центра и уровень масштабирования вместе с некоторыми стилями. В нашем TileLayer компонент, мы будем передавать атрибуцию и URL-адрес, как в нашем предыдущем примере.

render() {
       return (
          this.props.incidents ?
              <Map 
                 center={[this.state.lat, this.state.lng]} 
                 zoom={this.state.zoom} 
                 style={{ width: '100%', height: '900px'}}
              >
              <TileLayer
                attribution='&copy <a href="https://osm/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap/{z}/{x}/{y}.png"
               />
             </Map>
               :
               'Data is loading...'
       )
   }
}

Далее мы зацикливаем наш props.incident и передать координаты каждого инцидента компоненту Marker. Поскольку React предупреждает нас о необходимости передачи ключа каждому элементу массива, мы также передадим ключ маркеру.

Внутри Marker компонент, мы передаем в Popup компонент. Я добавил некоторую информацию об инциденте во всплывающем окне.

<Map 
    center={[this.state.lat, this.state.lng]} 
    zoom={this.state.zoom} 
    style={{ width: '100%', height: '900px'}}>
       <TileLayer
          attribution='&copy <a href="https://osm/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap/{z}/{x}/{y}.png"
        />
        {
          this.props.incidents.map(incident => {
               const point = [incident['point']['coordinates'][1],                 incident['point']['coordinates'][0]]
         

return (
    <Marker position={point} key={incident['incident_number']} >
         <Popup>
            <span>ADDRESS: {incident['address']}, {incident['city']} - {incident['zip_code']}</span>
          <br/>
            <span>BATTALION: {incident['battalion']}</span><br/>
         </Popup>
     </Marker>
  )
 })
}
</Map>

И это все. Если мы запустим наше приложение, и если все пройдет нормально, мы сможем увидеть карту Сан-Франциско с 500 маркерами, указывающими нам места пожаров. Если мы нажмем на один из этих маркеров, появится всплывающее окно с дополнительной информацией об инциденте.

Подведение итогов

Несмотря на то, что мы рассмотрели многое, это были только основы. Листовка — очень мощный инструмент, и мы можем создавать множество различных карт. Если вы хотите поиграть, попробуйте добавить еще один слой или собственный значок. Или, может быть, вы хотите создать интерактивную картографическую карту.

Сокрушительная редакция
(дм, ил)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Как создавать карты с помощью React и Leaflet

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Краткое описание по статье Как создавать карты с помощью React и Leaflet

Название: Как создавать карты с помощью React и Leaflet . Краткое описание: [ad_1] ⭐ Шаджиа . Дата публикации: 21.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»