Автор оригинала: Colby Fayock.
Строительные карты могут быть довольно мощными, но часто вы застряли от открытых исходных вариантов для изображений карты, которые могут не помочь читабельности ваших данных. Как мы можем использовать API для плитки MapBox, чтобы добавить пользовательский базовыйap в наше приложение React Reaflet?
- Что мы собираемся построить?
- Что такое mapbox?
- Часть 1: Создание пользовательского стиля Mapbox
- Часть 2: Добавление пользовательского тилелайер для реагирования
- Часть 3: Добавление пользовательского базового презентации на листочку стартера GATSBY
- Защита вашего ключа MapBox
- Хотите узнать больше о картах?
Что мы собираемся построить?
Мы собираемся пройтись по созданию нового базового Стиль MapBox в нашем Mapbox. учетная запись. После создания мы собираемся использовать их Карта API Чтобы добавить пользовательский базовыйap для нашего React Reflte приложение.
Для нашей карты мы собираемся использовать это Листовка GATSBY Стартер Я создал, что позволит вам легко раскрутить новое приложение отображения. Прежде чем мы вращаемся, хотя я пойду за тобой, как добавить его, используя только компоненты React Refllet.
Приложение сопоставления?
Ага! Карты используются по всему миру для изучения наборов данных для географических мест. Они важны инструменты для ученых и других, которые пытаются помочь в мире.
Если вы хотите узнать больше о создании карты и добавления данных к нему, вы можете проверить некоторые из моих других статей, в первую очередь, такие как создание карты Coronavirus (Covid-19) или на летнюю карту поездки на дороге, а также немного Вдохновение о том, почему кто-нибудь может карта.
Что такое mapbox?
Mapbox – это сопоставление платформы, которая позволяет своим клиентам создавать пользовательские растворы сопоставления. Они также используют различные API, которые обеспечивают мощные возможности для функций строительной карты.
Для наших целей мы собираемся использовать свою карту API, в частности, их статическую плиточный API, чтобы служить пользовательской стиле карты, который мы создаем.
Часть 1: Создание пользовательского стиля Mapbox
Чтобы посмотреть, как мы хотим для нашей карты, важно иметь базовыйap, который помогает сделать наши данные о себе без отвлечения. Кроме того, иногда весело иметь пользовательскую карту.
Аккаунт Mapbox
Первое, что нам нужно будет настроить наш пользовательский стиль MapBox – иметь учетную запись. Я не собираюсь прогуляться по этому процессу, но вы можете отправиться в Сайт mapbox’s Где можно бесплатно подписаться: mapbox.com
Создание нового пользовательского стиля
Создание нового стиля в MapBox не так сильно, как звучит. Хотя он может получить действительно сложный, если вы хотите что-то уникальное, мы можем скопировать один из стилей по умолчанию MapBox, чтобы начать работу.
Во-первых, отправляйтесь на Mapbox’s Студия Dashboard Нажав на ссылку на свою учетную запись в правом верхнем углу при вошении в систему.
Как только мы находимся на нашей приборной панели студии, мы хотим выбрать кнопку «Новый стиль».
После нажатия на кнопку появится модал, позволяющий выбрать шаблон. Вы можете выбрать все, что вы хотите здесь, но я собираюсь выбрать монохромный вариант темноты. И после того, как вы выбрали свой шаблон, нажмите кнопку «Настройка».
И теперь мы упали в нашу настройку UI.
Отсюда вы можете действительно сделать то, что вы хотели бы. Есть тонна вариантов настроить вашу карту. Это немного сложно, чтобы попытаться копать здесь, но MapBox предоставляет некоторые ресурсы попытаться помочь вам получить продуктивность.
Генерация токена Mapbox
Как только вы довольны своим новым стилем, и все опубликовано, мы хотим создать токен, который мы будем использовать для обеспечения доступа к нашей карте.
Голова включитесь к раздел учетной записи панели инструментов Mapbox.
MapBox предоставляет вам токен «по умолчанию», который вы можете использовать в ваших приложениях. Вы можете использовать это, но рекомендую создать новый токен, который вы можете предоставить уникальное имя, таким образом, если вы когда-нибудь пробили мимо свободный уровень из Mapbox вы сможете отслеживать свое использование.
Кроме того, лучше всего поддерживать отдельный токен для каждого приложения, то, как вы можете легко повернуть отдельный ключ, не обновляя каждое приложение, используя его.
После того, как вы нажмете создание токена, вы можете настроить ключ, как вы хотите, со спецификациями и разрешениями вы выбираете, но для наших целей вы можете оставить все общедоступные области, проверенные для нашей карты, что они делают по умолчанию Отказ
Настройка нашей пользовательской конечной точки
Для этого учебника мы собираемся использовать Сервис статической плитки MapBox Отказ
Наша конечная точка будет выглядеть следующее:
https://api.mapbox.com/styles/v1/{username}/{style_id}/tiles/256/{z}/{x}/{y}@2x?access_token={access_token}
Здесь есть несколько параметров, которые нам нужно понять:
- Имя пользователя: Это будет имена пользователя вашей учетной записи MapBox
- style_id: Это будет идентификатор стиля, который вы создали раньше
- Z, X, Y: это параметры, которые буклет программно развернутся, поэтому мы хотим оставить их как является
- Access_Token: Это ключ MapBox, который вы создали выше
Чтобы найти свое имя пользователя и идентификатор стиля, мы можем использовать URL стиль для нашего нового стиля MapBox, чтобы получить эти значения.
В моем примере мой стиль URL выглядит как:
mapbox://styles/colbyfayock/ck8lryjfq0jdo1ip9ctmuhc6p
Colbyfayock мое имя пользователя и ck8lryjfq0jdo1ip9ctmuhc6p мой стиль удостоверения личности.
И как только я обновляю свои параметры конечной точки, окончательный URL-адрес TilePoint будет выглядеть так:
https://api.mapbox.com/styles/v1/colbyfayock/ck8lryjfq0jdo1ip9ctmuhc6p/tiles/256/{z}/{x}/{y}@2x?access_token=MYACCESSTOKEN
Часть 2: Добавление пользовательского тилелайер для реагирования
При строительстве карты с React Reaflet ваш основной компонент будет <Карта> который обернутся полное приложение. Это то, что устанавливает ваш Экземпляр карты для Листовка Отказ
Для наших целей здесь мы собираемся использовать пример на Домашняя страница React Reaflet как наша отправная точка.
React Reflet Tilelayer компонент
Внутри вашего <Карта> составная часть Вы включаете
Пример на домашней странице React Reflet использует публичную версию OpenStreetMap В качестве их Tilelayer, который является проектом карты с открытым исходным кодом, созданным и обновляемым людьми по всему миру.
Это дает вам базовую карту, но мы хотим поменяться в Mapbox, чтобы мы могли создать пользовательский вид и почувствовать нашу карту.
Пользовательские Mapbox Tilelayer
Чтобы добавить наш настольный стиль, мы захочем обновить урл и Атрибуция реквизит Тилелайер составная часть.
Для URL это просто будет настраиваемая конечная точка стиля, которую мы создали ранее, поэтому в моем примере похоже:
https://api.mapbox.com/styles/v1/colbyfayock/ck8lryjfq0jdo1ip9ctmuhc6p/tiles/256/{z}/{x}/{y}@2x?access_token=MYACCESSTOKEN
Для атрибуции мы хотим кредитовать Mapbox в качестве услуги, поэтому мы хотим установить нашу атрибуцию как:
Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox
При подключении к нашему Тилелайер Наш код теперь должен выглядеть так:
И как только мы открываем нашу карту, мы должны увидеть наш новый базовыйap!
Смотрите код!
Если вы хотите увидеть, как я это сделал, Проверьте Commit Commit, совершив Отказ
Единственное предостережение, я создал .env.development.local Файл в корне моего проекта, в котором я сохранил новую переменную среды под названием Rage_app_mapbox_key . хранить мой ключ MapBox.
Часть 3: Добавление пользовательского базового презентации на листочку стартера GATSBY
Я написал Несколько Другое Статьи на Как начать С моим Листовка GATSBY Стартер , но для этой части мы захотим, чтобы осквернуть базовое приложение, которое мы можем использовать для изменения нашего Тилелайер конечная точка.
Настройка нашего приложения React Reaflet GATSBY
Чтобы начать, ознакомьтесь с инструкциями по стартору GitHub:
https://github.com/colbyfayock/gatsby-starter-leaflet
Как только вы будете готовы, у вас должно быть приложение базового отображения, готовое к работе!
Настройка нашей службы MapBox
Первое, что мы захочем сделать, это добавить mapbox в качестве услуги в нашем SRC/Data/map-services.js файл.
Принимая наш URL Custom Andpoint URL, который мы создали в части 1, давайте настроим новый объект с именем MapBox, а с URL и атрибуцией, похожим на то, что мы сделали в части 2.
export const mapServices = [
{
name: 'OpenStreetMap',
attribution: '© OpenStreetMap contributors',
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
},
{
name: 'Mapbox',
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
url: `https://api.mapbox.com/styles/v1/colbyfayock/ck8c2foj72lqk1jnug0g2haw0/tiles/256/{z}/{x}/{y}@2x?access_token=MY_ACCESS_TOKEN`
}
];
Использование нашей карты карты MapBox
Как только у вас есть настройка сервиса MapBox, все, что осталось, это открыть SRC/Pages/index.js Файл, найди Mapsettings Определение объекта и обновить defaultbasemap недвижимость на Mapbox Отказ
const mapSettings = {
center: CENTER,
defaultBaseMap: 'Mapbox',
zoom: DEFAULT_ZOOM,
mapEffect
};
Сохраните это изменение, обновите карту в вашем браузере, и теперь вы должны увидеть свой таможенный стиль базового сна!
Смотрите код!
Если вы хотите увидеть, как я это сделал, Проверьте различие с фиксацией Отказ
Единственное предостережение, я создал .env.wevelopment Файл в корне моего проекта, в котором я сохранил новую переменную среды под названием Gatsby_mapbox_key хранить мой ключ MapBox.
Защита вашего ключа MapBox
Переменные среды
Часть большинства процессов разработки, которые используют отдельные ключи, обычно устанавливают ключи в качестве переменных среды. Переменные среды настроены настройки, которые не живут в самом коде.
Это важно, потому что он предотвращает проверку вашего ключа в свой код, который плохой с точки зрения безопасности, но он также позволяет предоставить другой ключ для различных сред.
При создании ваших клавиш, попробуйте помнить об этом, так как он может сэкономить в конечном итоге.
Блокировка ключа Mapbox
В ваших настройках при создании токена или при редактировании токена MapBox позволяет вам указать только URL-адреса, которые вы хотите получить доступ к.
Хотя MapBox имеет щедрый свободный уровень, вы, вероятно, хотите, чтобы он был заблокирован только к URL-адресам, на которых вы его используете. Вы можете создавать несколько клавиш, где можно было бы для общественного пользования на вашем сайте, и он будет для вашего местного развития.
Это полезно, например, в том случае, если у вас есть ключ, который никогда не будет использоваться публично для целей в разработке, но у вас есть ключ, с которым вы развертываете, что можно заблокировать только к этому URL.
Если кто-то схватит ваш ключ, они могут подключить его на свой собственный веб-сайт и использовать весь ваш бесплатный уровень, потенциально подбегающий ваш счет!
Хотите узнать больше о картах?
Вы можете проверить несколько моих других ресурсов, чтобы начать:
- Как создать коронавирус (Covid-19) Приборная панель и карта приложение в реакции с GATSBY и листовкой
- Любой может отображаться! Вдохновение и введение в мир отображения
- Как создать приложение покатации на летнее дорожное покрытие с GATSBY и Lastlet
- Как создать свой собственный отследитель Santa с GATSBY и React Reaflet
- Как создать приложение сопоставления в реакцию простой способ с листовой лоткой
Оригинал: “https://www.freecodecamp.org/news/how-to-set-up-a-custom-mapbox-basemap-with-gatsby-and-react-leaflet/”