Карты в Интернете с использованием React и Mapbox

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

Технический стек

Давайте обсудим технологии. При работе с картами мы обычно используем три слоя:

• Отрисовка пользовательского интерфейса, включающего кнопки и формы. В нашем стеке эту роль выполняет React;

• Рендеринг карты и обеспечение взаимодействия с пользователем. Для этого мы используем Mapbox;

• Получение данных с сервера, например информации о маркерах или полигонах. Для получения данных мы используем встроенную функцию выборки браузера.

  
  

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

Реагировать

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

Поскольку изменение элементов на странице — самая затратная операция для браузера, важно делать ее максимально эффективно. Чтобы решить эту проблему, инженеры Facebook разработали библиотеку React, которая позволяет быстро и просто изменять элементы на странице. Помимо обеспечения быстрого изменения состояния на странице, React позволяет нам делать это декларативно, не работая напрямую с элементами DOM. Вместо этого мы используем абстракцию, обычно JSX , который выглядит как HTML. Давайте рассмотрим пример:

 // It's our state. Is the user our friend or not? // false by default const [isFriend, setIsFriend] = useState(false) // Depending on the state, we show the text on the button const buttonText = isFriend ? 'Your my Friend' : 'Add as Friend' // There is JSX, syntax for UI // In this case, we display a button, when clicked, we change the state return ( <button onClick={() => setIsFriend(true)}>{buttonText}</button> )

Компоненты можно вкладывать в обычные элементы DOM, такие как формы, кнопки и поля ввода, в нижней части иерархии. Собирая эти простые элементы, мы можем создавать более сложные, например, законченную форму:

 const Form = () => ( <form> <input name="Email"/> <input name="Password"/> </form> ) const App = () => ( <main> <h1>My form!</h1> <Form /> </main> )

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

 // Use React to render the map with different event handlers // and render markers return ( <BaseMap onInitMap={() => console.log('I am alive!')} onClickMap={() => console.log('Click!')} onDestroyMap={() => console.log('Oh no!')} > <ClustersMarkers /> <PostsMarkers /> <ListingsMarkers /> </BaseMap> )

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

Картбокс

Теперь давайте обсудим саму карту. Создание и использование карт может быть сложной задачей, и лишь немногие компании-производители могут создавать карты с нуля. Как правило, большинство людей полагаются на готовые библиотеки с удобным и проверенным API.

Доступны многочисленные поставщики динамических карт, включая Google Maps, Leaflet, Bing Maps, Mapbox и другие. Однако мы сосредоточимся на Картбокс благодаря своим обширным возможностям и справедливой ценовой политике. Например, Google Maps взимает плату 700 долларов США за 100 тыс. просмотров карты в месяц, а Mapbox только взимает плату 250 долларов США . Более того, Mapbox предлагает бесплатный доступ до 50 тысяч просмотров карт в месяц.

Предложения Mapbox Мапбокс Студия , инструмент, который часто сравнивают с Photoshop для карт. С помощью этого инструмента дизайнеры могут создавать собственные стили, скрывать ненужные элементы карты и удалять отображение домов. Одним из его преимуществ является возможность улучшить видимость Точки интереса . Еще одним преимуществом является возможность экспериментировать с оформлением карты в корпоративных цветах. Однако важно учитывать пользовательский опыт и сохранять знакомую цветовую палитру, включая зеленую траву и синюю воду. Самое приятное в Mapbox Studio то, что она упрощает процесс проектирования карт, устраняя необходимость разработки и передачи требований, что в конечном итоге снижает стоимость работы с картами.

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

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

Давайте вернемся к картам Mapbox. Что это API мапбокса делать?

• Он инициализирует карту в элементе HTML на странице;

• Он загружает и отображает изображения, составляющие карту;

• Он рисует дополнительные элементы, например маркеры, используя GeoJson в качестве входных данных;

• Он генерирует события, такие как клики или изменения масштаба, которые можно обработать.

  
  

Давайте подробнее рассмотрим каждый из этих предметов.

Mapbox специализируется на рендеринге карт с использованием тайлов. Плитки — это маленькие квадратные изображения, составляющие большую карту. Размер плитки по умолчанию составляет 512x512 пикселей. Он может быть векторный или растровый . Вектор плитки используются для отображения дорог, зданий, достопримечательностей (POI) и многого другого. Они могут иметь динамический стиль, легкие и обеспечивают плавное взаимодействие с картой. Растр плитки же используются для отображения спутниковых изображений.

К вашему сведению: Mapbox Studio позволяет нам выбирать конкретные данные, которые мы хотим включить в фрагменты карты. Эти плитки затем помещаются на холст , специальный элемент DOM в браузере, который отображает изображения и другие графические элементы в Интернете. Чтобы дать вам представление: это похоже на то, как документы отображаются на холсте в Документах Google.

 <canvas width="100" height="100" />

Mapbox обрабатывает загрузку, вставку и обновление плиток. Все, что нам нужно сделать, это указать, где мы хотим отображать карту, и начальные условия, такие как уровень масштабирования или координаты карты. Чтобы использовать Mapbox, вам понадобится токен доступа , который представляет собой уникальный ключ, который можно найти в вашей учетной записи Mapbox. Чтобы настроить базовую карту, приведем краткий пример, но для получения дополнительной информации посетите связь предоставил:

 mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; const map = new mapboxgl.Map({ container: 'map', // we can use an Id or an element style: 'mapbox://styles/mapbox/streets-v11', // URL for styles center: [-74.5, 40], // initial coordinates [lng, lat] zoom: 9, // initial zoom });

После этого мы получим карту на странице в элементе с идентификатором «map».

Чтобы предоставить пользователям больше информации на карте, мы часто отображаем расположение определенного заведения или границы определенной территории. Для этого мы используем особый формат данных, называемый GeoJSON и проинструктируйте Mapbox, как отображать эти данные.

GeoJSON — это стандартный формат хранения географических структур на картах. Он может хранить различные примитивные типы, описывающие географические объекты, такие как адреса, местоположения, улицы, шоссе, границы, страны, штаты и их комбинации, известные как multipart. GeoJSON был представлен в 2008 году и представлен следующим образом:

 { "type": "Feature", // also can be FeatureCollection, it's collection of Feature "geometry": { "type": "Point", // also can be LineString, Polygon, MultiPolygon "coordinates": [125.6, 10.1] // for other types you can use Array with coordinates }, "properties": { // it's metadata, we can you that to show something on the map "name": "Dinagat Islands" } }

Давайте поговорим о системе координат, используемой в Mapbox. По умолчанию Mapbox использует ЭПСГ 3857 , который представляет собой способ проецирования Земли на плоскую поверхность для работы с плитками. Это известно как Web Mercator и является стандартом для онлайн-карт. Однако при работе с данными о маркерах и полигонах используется другая система координат, называемая ЭПСГ 4326 . Эта система использует широту и долготу для описания координат на земном эллипсоиде. Mapbox и другие поставщики карт автоматически конвертируют координаты из EPSG 4326 в EPSG 3857. Если нам нужно работать с разными прогнозы мы можем использовать метод map.setProjection .

Теперь мы обсудим, как отображать GeoJSON на карте. Mapbox предлагает две сущности, которые могут оказаться полезными:

• Источник — Это начальное значение данных. Мы можем создать новый источник с данными GeoJSON и настроить его, например, для генерации идентификатора для каждого объекта в коллекции объектов.

• Слой — Это представление данных. Мы можем отображать данные из источника разными способами, например, показывая границы.

  
  

Чтобы отобразить полигоны или маркеры на карте, мы должны получить данные в формате GeoJson с сервера. Затем создаем источник, вводим в него данные и подключаем к нужному слою.

 const geoJsonFeature = { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [ [-67.13734, 45.13745], [-66.96466, 44.8097], [-68.03252, 44.3252], [-67.13734, 45.13745] ] } } // Create source with our data map.addSource('ourSource', { 'type': 'geojson', 'data': geoJsonFeature }); // Add layer for background map.addLayer({ 'id': 'background', 'type': 'fill', 'source': 'ourSource', // название нашего source 'layout': {}, 'paint': { 'fill-color': '#0080ff', 'fill-opacity': 0.5 } }); // Add layer for border map.addLayer({ 'id': 'border', 'type': 'line', 'source': 'ourSource', 'layout': {}, 'paint': { 'line-color': '#000', 'line-width': 3 } });

После запуска этого кода мы получаем результат:

Чтобы узнать больше по этой теме, вы можете обратиться к документация предоставлено Mapbox. В этом уроке мы рассмотрели процесс инициализации карты и представления наших данных. Далее мы рассмотрим, как обрабатывать такие события, как нажатие, перетаскивание и масштабирование. Например, мы можем использовать Mapbox для отслеживания событий и отображения координат в консоли, когда пользователь перемещает курсор на карте. Для этого мы просто вызываем метод on с нужным нам типом события, аналогично тому, как мы работаем с элементами DOM.

 map.on('mousemove', (e) => { console.log(JSON.stringify(e.point)); }); // Result: {"x":330,"y":49}

Подводя итог, что нам нужно помнить? Mapbox позволяет нам отображать карту, рисовать поверх нее данные и обрабатывать события карты. При этом Mapbox заботится о загрузке и отображении изображений (тайлов).

Принести

Несколько слов о принести . Мы уже видели, как отображать данные на карте, но сначала нам необходимо получить их с сервера. Когда мы динамически запрашиваем данные с сервера в фоновом режиме без перезагрузки страницы, мы называем этот подход АЯКС (« Синхронный JavaScript и X ML»). Существует множество инструментов для асинхронной загрузки данных с сервера, например Axios или XMLHttpRequest (родной).

Что помнить? Мы получаем данные с сервера, и для этого существует множество библиотек, но мы будем использовать fetch. Далее мы рассмотрим, как мы это делаем конкретно при работе с картами, так как есть нюансы.

Реагировать + Mapbox

Теперь посмотрим, как описанные выше технологии работают вместе. Сначала мы получим данные для отображения многоугольника с помощью выборки. Затем мы объявим инициализацию карты и после ее загрузки добавим полигон на карту.

Вы также можете найти рабочий пример на сайте связь предоставил.

 const useFetch = () => { /* Our data { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [ [ [-67.13734, 45.13745], [-68.03252, 44.3252], [-68.90478, 47.18479], [-67.13734, 45.13745], ] ] } } */ const [data, setData] = useState(null) useEffect(() => { fetch('https://our-api.com/polygon') .then(response => response.json()) .then(setData) .catch(e => { console.error(e) }) }, [setData]) return { data } } const BaseMap = () => { // Use the hook to fetch data const { data } = useFetch(GET_REGION); // Map instance const map = useRef(null); // DOM element const mapContainer = useRef(null); // Main logic - init the map and add the event useEffect(() => { if (map.current) { return; // initialize map only once } mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; map.current = new mapboxgl.Map({ container: mapContainer.current, style: 'mapbox://styles/mapbox/light-v10', // style URL (it's Mapbox's core style) center: [-68.137343, 45.137451], // starting position zoom: 5 // starting zoom }); // Handle event map.on('load', () => { const sourceId = 'source-region' // Add a data source containing GeoJSON data map.addSource(sourceId, { 'type': 'geojson', 'data': data.region // our data from Apollo }); // Add a new layer to visualize the polygon map.addLayer({ 'id': 'background', 'type': 'fill', 'source': sourceId, // reference the data source 'paint': { 'fill-color': '#0080ff', // blue color fill 'fill-opacity': 0.5 } }); // Add a black outline around the polygon map.addLayer({ 'id': 'outline', 'type': 'line', 'source': sourceId, 'paint': { 'line-color': '#000', 'line-width': 3 } }); }); }); return <div ref={mapContainer} />; } 

Заключение

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

Большое спасибо за ваше внимание! Хорошего дня.