Недавно была опубликована интерактивная карта, отображающая демографические изменения в Европе с 2001 по 2011 год — период, для которого доступна максимально подробная статистика от каждого муниципального образования. С помощью цветовой шкалы обозначается степень убыли или прироста населения буквально в каждой точке Европы (за исключением России и стран СНГ) и Турции.
Один из разработчиков команды Airbnb принимал участие в работе над созданием этой демографической карты. Хотите узнать, как самостоятельно создать подобный проект? Тогда добро пожаловать под кат.
Предварительные условия
Для нашего примера мы используем набор данных по Берлину, содержащий в себе сведения о зданиях и количестве их этажей.
Для начала подготовим рабочую среду:
Установите Tilemill — это картографическое приложение, позволяющее быстро и просто создавать карты, используя разные источники данных.
Скачайте готовый shape—файл, который уже содержит нужные данные. Если у вас есть свой набор данных, то их нужно объединить с shape—файлом. Есть много способов сделать это, например, с помощью Quantum GIS.
Заведите аккаунт на Mapbox — там есть бесплатный тариф с ограничением в 50 000 просмотров карты.
Создаем новый проект
Мы начинаем с добавления слоя, на котором будут отображаться данные нашей карты. Запустим Tilemill и создадим новый проект.
Теперь слева вы можете увидеть карту мира, а справа некоторые правила Carto CSS (язык для оформления карт, используемый в TileMill). Таким образом, в левой части экрана отражается превью вашей карты, а в правой вы определяете стили для разных её частей.
Внедрение данных
Добавляем наш shape—файл в качестве нового слоя (пиктограмма слоя в левом нижнем углу, Add Layer). ID — это уникальный идентификатор слоя в проекте. Выбираем shape—файл как источник данных и жмём Save.
Проверим, что всё работает нормально. Раскрасим наш shape—файл, добавив следующие строки:
#buildings{
polygon—fill: green;
}
С помощью идентификатора «buildings», присвоенного при добавлении слоя, мы можем установить стиль. Ваша карта должна выглядеть следующим образом:
В нашем примере мы хотим визуализировать этажность зданий. Убираем стиль стран и устанавливаем черный фон карты.
Map {
background—color: black;
}
Для стиля этажности зданий мы можем раскрасить только определенные, подходящие нам объекты. В этом примере маленькие здания покрашены в зеленый цвет, средние — в оранжевый, а более высокие выкрашены в голубой. Вы можете использовать какие угодно цвета (в данном примере для выбора цветов использовался Chroma.js Color Scale Helper).
#buildings{
polygon—fill: #d4ffdf;
line—opacity:0;
/* smaller buildings — green */
[floors = 1]{
polygon—fill: #b0f1b8;
}
[floors = 2]{
polygon—fill: #8ae393;
}
[floors = 3]{
polygon—fill: #5fd36c;
}
/* smaller buildings — orange */
[floors = 4]{
polygon—fill: #fff98f;
}
[floors = 5]{
polygon—fill: #f0e759;
}
[floors = 6]{
polygon—fill: #e0d500;
}
/* higher buildings — blue */
[floors >= 7]{
polygon—fill: #def3ff;
}
[floors > 15]{
polygon—fill: #bbdcfc;
}
[floors > 30]{
polygon—fill: #65aef4;
}
[floors > 60]{
polygon—fill: #0098f0;
}
}
Теперь вы должны увидеть нечто вроде этого:
Добавление интерактивности
Вы можете извлечь данные из атрибутивной таблицы и отобразить их на карте с помощью подсказок/всплывающих окон. В нашем примере мы хотим отобразить всплывающее окно с подсказкой по этажности здания. Чтобы включить эту функцию, нужно нажать на пиктограмму руки в левом нижнем углу и выбрать «Teaser». Теперь мы должны определить слой («buildings»), на котором хотим поддерживать интерактивность, и добавить «floors» в разделе «Content to be shown on hover».
После сохранения проекта, при наведении курсора на здание будет всплывать окошко с информацией.
Экспорт mbtiles
Интерактивность можно экспортировать в формат MBTiles, специально разработанный для хранения карт и возможности доступа к ним онлайн и оффлайн.
Но прежде чем мы экспортируем наш слой, установим прозрачный фон.
Map {
background—color: transparent;
}
В конечном итоге код должен выглядеть так:
Map {
background—color: transparent;
}
#buildings{
polygon—fill: #d4ffdf;
line—opacity:0;
/* smaller buildings — green */
[floors = 1]{
polygon—fill: #b0f1b8;
}
[floors = 2]{
polygon—fill: #8ae393;
}
[floors = 3]{
polygon—fill: #5fd36c;
}
/* smaller buildings — orange */
[floors = 4]{
polygon—fill: #fff98f;
}
[floors = 5]{
polygon—fill: #f0e759;
}
[floors = 6]{
polygon—fill: #e0d500;
}
/* higher buildings — blue */
[floors >= 7]{
polygon—fill: #def3ff;
}
[floors > 15]{
polygon—fill: #bbdcfc;
}
[floors > 30]{
polygon—fill: #65aef4;
}
[floors > 60]{
polygon—fill: #0098f0;
}
}
Чтобы экспортировать слой в mbtiles, нужно нажать «Export» в правом верхнем углу и выбрать «MBTiles». Вам придётся подождать, пока данные отрисуются. Если вы не можете определить слой, воспользуйтесь следующими настройками для экспорта карты:
- Zoom: 9 — 13
- Center: 13.3944,52.5141,10
- Bounds: 13.0621,52.3475,13.7089,52.6734
По окончанию процесса сохраните *.mbtiles.
Загрузка на MapBox
Возьмите .mbtiles файл и загрузите его в свой аккаунт Mapbox. После загрузки нового слоя найдите его на вкладке «Data» в вашем аккаунте. Теперь создайте новый проект с этим слоем:
Если вы не видите карту, используйте строку поиска. Сохраните карту и копию ID (его можно найти в разделе «Project» —> «Info»).
Веб—приложение
Для отображения карты в браузере мы используем Mapbox.js, ведь он уже включает в себя слой «сетки» для описания взаимодействия данных, в которой нам нужно отобразить значения этажности. Вы можете также использовать Leaflet в сочетании с utfgrid Plugin.
Для начала вы можете использовать этот шаблонный код. Он загружает карту и показывает число этажей в консоли при наведении курсора на здания. Просто измените ключ доступа и ID карты.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf—8 />
<title>Map example</title>
<meta name='viewport' content='initial—scale=1,maximum—scale=1,user—scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />
<style>
* {
margin:0;
padding:0;
}
html, body{
height: 100%;
}
#map {
height:100%;
width:100%;
background: #111;
}
.building—info {
position: absolute;
left: .5em;
top: .5em;
color: white;
font—size: 2.5em;
font—family: Arial, sans—serif;
}
</style>
</head>
<body>
<div id='map'></div>
<div class='building—info'></div>
<script>
L.mapbox.accessToken = 'your—access—token';
var mapid = 'your—map—id';
var infoElm = document.querySelector('.building—info');
var map = L.mapbox.map('map', mapid, {gridLayer : false, zoomControl : false }).setView([52.5141,13.3944,10], 11);
map.attributionControl.addAttribution('Source: Senatsverwaltung für Stadtentwicklung und Umwelt Berlin');
var dataLayer = L.mapbox.gridLayer(mapid).addTo(map);
dataLayer.on('mouseover', function(evt){
if(typeof evt.data === 'undefined'){
return infoElm.innerHTML = '';
}
infoElm.innerHTML = 'floors: ' + evt.data.floors;
});
</script>
</body>
</html>
Как видите, вышеописанным способом можно быстро и просто создавать интересные картографические проекты. Конечно, если у вас уже есть готовые данные, это ключевой компонент.
