Последние четыре недели были посвящены первому испытанию Mapbox - Map Madness. Если вы мне не верите, послушайте внимательно, как поет Мэтт Беллами из Muse в видео ниже, и вы услышите «м-м-мэп безумие». Или, может быть, все это начинает меня переборщить… Тем не менее, последние несколько недель были интересным введением в разработку гео-веб. Простота того, как инструменты и веб-API Mapbox показали, как пользователи с любым уровнем подготовки могут участвовать в, возможно, ранее пугающем мире веб-разработки.
От Картограммы, добавления маркеров до выдавливания зданий, последние несколько недель показали, что, несмотря на то, что я использую Mapbox уже несколько лет, есть новые инструменты и приемы, которые я изучаю, чтобы повысить эффективность и сэкономить время. Некоторое время я работал над проектом, включающим географическую коллекцию происхождения музыкальных исполнителей, с целью создания музыкальной географии. В прошлом я обсуждал, как начать работать в мире веб-картографии, и обнаружил, что Mapbox, возможно, лучше всего подходит для моих нужд. Я попытаюсь продемонстрировать шаги, которые я предпринял с помощью Mapbox для своего Проекта музыкальной карты.
Сбор, организация, хранение и атрибуция данных с помощью Mapbox Studio идеально подходят для оцифровки точек в наборах данных Mapbox Studio. После добавления полей атрибутов и значений для каждой точки набор данных можно сохранить и экспортировать как набор векторных данных. Затем он преобразуется в набор листов, также в редакторе Mapbox, который теперь готов к добавлению в качестве слоя в стилях.
Стилизация каждого отдельного слоя, цвета и шрифта по отдельности может занять много времени и усилий, но использование перетаскивания изображения с последующим сохранением стиля с помощью инструмента Картограмма позволило поэкспериментировать и получить нужные цвета всего за несколько кликов. Я выбрал привлекательный розовый и синий, вдохновленный цветовой схемой The Offical Charts. Это сэкономило много времени, но мне все еще нужно было немного настроить и настроить стили Mapbox Studio, что достаточно интуитивно. Я мог бы легко выделить мою карту немного больше, "выдавив заливку" слоем "здания" по высоте.
Более того, используя один из предустановленных слоев тайлов в Mapbox «terrain-rgb», я мог придать земле, а не только зданиям, трехмерный эффект. Но я также хотел добавить свои очки `` музыкального исполнителя '' - это я мог сделать, добавив это как слой в стиль, добавив значки .svg, настроив параметры отображения / перекрытия и шрифта / маркировки, а также имея несколько фильтрованных версии одних и тех же данных, точки разного размера в зависимости от значений «количества совпадений» (см. ниже).
Сохранение и публикация этого стиля дала мне сервис веб-карт, который я искал, но это только начало, а не полностью интерактивная карта. Для этого мне нужно использовать Mapbox GL JS. Я хотел загрузить только что созданный стиль; иметь интерактивные всплывающие окна для запроса слоя набора данных; добавить геокодер; и добавить другие встроенные инструменты навигации. Первым требованием было настроить мою веб-карту, «вызвав» Mapbox GL JS API и токен доступа, и поместить карту в веб-документ, включая базовую карту стиля, которую я только что создал в Mapbox Studio. Следующий фрагмент позволил мне добиться этого.
‹Head›
‹meta charset = 'utf-8'›
‹title› Исследуйте историю местной музыки с помощью Карты музыки ‹/title›
‹script src = ' https: // api.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js '› ‹/script›
‹ссылка href =' https://api.mapbox.com/mapbox- gl-js / v0.43.0 / mapbox-gl.css 'rel =' stylesheet '/›
‹style›
body {
margin: 0; отступ: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
}
#locations {
position: absolute;
}
‹/ стиль ›
‹/head›
‹Body› ‹script›
// Файл Javascript
mapboxgl.accessToken = ‘* вставить токен доступа *’;
var popup = null
var map = new mapboxgl.Map ({
container: 'map',
style: 'mapbox: // styles / agermeister / * вставьте сюда ссылку на стиль *',
центр: [-3.5, 53.131658],
масштаб: 5,
шаг: 0
});
…
‹/Body› ‹script›
С картой в веб-документе мне нужно добавить элементы управления навигацией, а также окно поиска для поиска местоположений - все, чтобы сделать карту более удобной. Чтобы добавить в поле поиска геокодера, мне нужно было вызвать адреса .js и .css для этого элемента, а затем использовать функцию 'map.addcontrol', чтобы добавить это на карту, со следующим фрагментом между сценарием ‹ Теги ›и ‹body›.
‹Скрипт src = ' https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.0.1/mapbox-gl-geocoder.js' › ‹/script›
‹Link rel = 'stylesheet' href = ' https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.0.1/mapbox-gl-geocoder.css' type = 'text / css' / ›
…
map.addControl (новый MapboxGeocoder ({
accessToken: mapboxgl.accessToken
}));
Вызов из Mapbox GL JS, я мог бы аналогичным образом загрузить:
- полноэкранный вариант;
var full = new mapboxgl.FullscreenControl ();
map.addControl (полный, «внизу справа»);
- элементы управления навигацией;
// Добавляем на карту элементы управления масштабированием и поворотом.
var nav = new mapboxgl.NavigationControl ();
map.addControl (nav, ‘bottom-right’)
- и кнопка геолокации
// Добавляем на карту элемент управления геолокацией.
map.addControl (new mapboxgl.GeolocateControl ({
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true
}));
Это предоставило мне приложение с полностью управляемой веб-картой (см. Ниже), но я все еще хотел иметь возможность взаимодействовать с моим набором данных. Мне нужно было загрузить набор векторных данных и добавить функцию всплывающего запроса для взаимодействия с ним, а также функцию для изменения курсора на точку при наведении курсора на точку данных. Используя приведенный ниже фрагмент, я загрузил векторный набор данных, вызвав его Mapbox id, аналогично этому руководству; однако, чтобы убедиться, что он не закрывает карту, я установил для него непрозрачность 0. Хотя "беспорядочно", это означало, что он был интерактивным, но не видимым, а запрашивал тот же набор данных.
map.on ('load', function () {
map.addLayer ({
'id': 'music_artists',
'type': 'circle',
/ / Загрузить источник векторных листов из Музыкальной карты
'source': {
type: 'vector',
url: 'mapbox: // * Tileset ID *' // Ваш набор листов Mapbox Map ID
},
'source-layer': '* dataset address', // имя набора плиток
'paint': {
// Добавить управляемые данными стили для круга -color
'circle-color': {
свойство: 'ChartAppearancesTop40',
тип: 'interval',
остановки: colourList // переменная, содержащая остановки цвета
},
'circle-radius': 7,
'circle-opacity': 0
}
});
});
Последним шагом было создание всплывающего окна для отображения атрибутов при взаимодействии с этим набором векторных данных, который я только что загрузил в веб-документ. Это было достигнуто с помощью функции map.queryRenderedFeatures в Mapbox GL JS и использования некоторого HTML для стилизации самого всплывающего текста. Кроме того, изменение курсора было добавлено с использованием той же функции для изменения style.cursor при наведении курсора.
// Когда событие щелчка происходит рядом с местом, открываем всплывающее окно в месте
// функции с описанием HTML из ее свойств
map.on (‘click’, function (e) {
var features = map.queryRenderedFeatures (e.point, {sizes: [‘music_artists’]});
// если у функций нет информации, ничего не возвращаем
if (! features.length) {
return;
}
var feature = features [0];
// Заполняем всплывающее окно и устанавливаем его координаты
// на основе найденного объекта
var popup = new mapboxgl.Popup ()
.setLngLat (feature.geometry.coordinates) < br /> .setHTML ('‹div id =" popup "class =" popup "style =" z-index: 10; "›' +
'‹ul class =" list-group "›' + < br /> '‹li class =” list-group-item ”› Исполнитель:' + feature.properties ['title'] + «‹/li›» +
'‹li class =» list-group- item »› Появления в Top40 в Великобритании: '+ feature.properties [' ChartAppearancesTop40 '] + «‹/li›» +
' ‹li class =» list-group-item »› Первое появление в диаграмме: '+ feature. properties ['FirstChartDate'] + «‹/li›» +
'‹li class =« list-group-item »› Genre:' + feature.properties ['Genre'] + «‹/li›» +
'‹li class =" list-group-item "› Sub Genre:' + feature.properties ['Sub Genre'] + «‹/li›» +
'‹li class =» list-group-item »› Описание: '+ feature.properties [' description '] + «‹/li›» +' ‹/ul› ‹/div› ')
.addTo (карта);
});
// Используйте тот же подход, что и выше, чтобы указать, что символы доступны для щелчка
// путем изменения стиля курсора на 'указатель'
map.on ('mousemove', function (e) {
var features = map.queryRenderedFeatures (e.point, {Layers: ['music_artists']});
map.getCanvas (). style.cursor = (features.length)? 'pointer': '' < br />});
И вуаля! Создана полностью интерактивная трехмерная карта с музыкальной геоинформацией! Он отображает и позволяет искать музыкальную историю, а трехмерные здания помогают понять окружающую среду, из которой возникла музыка. На первый взгляд, создание классно выглядящей веб-карты может показаться сложной задачей с высокими зданиями и более чем 250 строками кода. Однако, проявив немного терпения, используя доступные руководства, инструменты и документацию по коду Mapbox, можно создавать свои собственные веб-приложения - все, что нужно, - это идея.
Самое замечательное в том, что развитие и обучение не прекращаются. Например, с помощью Mapbox можно также создавать карты-истории. Mapbox продолжает расширять и обновлять свои платформы и библиотеки кодирования, и для моего проекта по картированию музыки это тоже постоянно. Я все еще оцифровываю и обновляю свой набор данных, так как он основан на музыкальных исполнителях, которые входили в топ-40 Великобритании, и моя работа вырезана! Как географ, я учусь и хочу добавить тепловые карты, ползунки времени и другие функции для изучения жанров и творческих способностей во времени и пространстве. Некоторое время это был мой интересный хобби-проект, который также помог мне в моих знаниях в области веб-разработки. Таким образом, это показывает, что #mapmadness не обязательно должна длиться всего месяц, это может быть устойчивый интерес и набор ценных навыков.
Удачного картирования,
Дэйвид
