Инфографика Инструменты Visualize! geoInf.js Контакты

Начало работы с geoInf

Это небольшое учебное пособие познакомит вас с основами работы geoInf и научит, какие файлы нужно включить в HTML-страницу для корректной работы инструмента и какими методами можно пользоваться для отображения векторных карт. Всеми необходимыми файлами мы вас обеспечим!

Показать пример на отдельной странице

Подготовьте вашу HTML-страницу

Перед тем, как начинать писать Javascript-код для вашей новой geoInf-карты, необходимо выполнить несколько простых подготовительных действий.

Создание карты и загрузка слоёв

Прежде всего необходимо создать новый объект карты. Все дальнейшие действия вы будете производить с ним. Назвать переменную, которая будет хранить карту, можно как угодно, но мы в данном примере назовем её совсем коротко - I. Убедитесь, что у вас на странице есть свободный div-элемент (у нас его id равно map_holder), который вместит будущую карту, и передайте его id (или его самого) конструктору в качестве аргумента:


var I = new Inf('map_holder');//не забудьте оператор new!
//вместо 'map_holder' можно было написать document.getElementById('map_holder')
//или $('map_holder'), используя возможности jQuery
			

Не удивляйтесь, что вы не увидели на экране никаких изменений, так и должно быть - ведь ваша карта всё еще пуста. Самое время прикрепить к ней несколько векторных слоёв - а для этого вам понадобятся какие-нибудь geojson-файлы. Можете взять, например, вот эти: полигональный countries.geojson, линейный rivers.geojson, точечный towns-n-castles.geojson и еще один полигональный lake.geojson. Пусть вас не пугает содержимое этих файлов: это всего-навсего карта Страны Оз, подготовленная мною по мотивам изображения, взятого из Википедии:

В США эта картинка находится в общественном достоянии. Выяснить, принадлежит ли она кому-либо в России, не удается. Но скорее всего, я не нарушил никаких законов =)

Мы разместили geojson-файлы в директории res, которую создали в папке, где хранится сам html-документ. Вы можете разместить их где угодно, но учтите это, когда будете указывать пути к файлам:


//синтаксис для создания и прикрепления к карте нового слоя таков:
//Inf.draw(путь_к_файлу_geojson, краткое_описание_слоя)
//создадим 4 слоя из наших файлов:
var countries = I.draw('res/countries.geojson, 'Страны');
var rivers = I.draw('res/rivers.geojson', 'Реки');
var lake = I.draw('res/lake.geojson', 'Озеро');
var towns = I.dataLayer('res/towns-n-castles.geojson', 'Поселения и замки');			
//для чего нужны "описания" и где их увидит ваш пользователь, вы узнаете чуть позже
			

После того, как вы обновите страницу, на ней появится такое геоизображение:

Показать пример на отдельной странице

Да, изображение черно-белое и не очень красивое - ко всем элементам свежесозданного слоя тут же применяются стили по умолчанию, а точечные объекты заменяются на небольшие круги одинакового размера. Дело в том, что файлы в формате geojson не содержат в себе никакой информации о внешнем облике пространственных объектов - только их координаты и атрибутивную информацию. Поэтому теперь нам нужно "вручную" раскрасить наши объекты.

Стили отображения слоёв


//Начнем со слоя, содержащего страны:
countries.setStyle({//в качестве аргумента передаем объект
	poly: {//то, что следует за этим ключевым слоем, стилизует полигоны
		'fill': '#ffffd9',//цвет заливки
		'opacity': 0.8,//её прозрачность
		'stroke': '#f55',//цвет контура
		'stroke-width':  1,//толщина контура
		'stroke-linejoin': 'round',//то, как соединяются сегменты линий
		'stroke-dasharray':'- .'//контур будет пунктирным 
	}
	//так как линий и точек в этом слое нет, им стили задавать не будем
});			
			

Список всех доступных параметров и их значений доступен в документации Raphaёl. Эти параметры определены спецификацией SVG-графики, на которой работает наша карта, следовательно, мы ограничены ими. Ниже - результат "раскраски" стран:

Показать пример на отдельной странице

Теперь остается сделать реки реками, а озеро - озером:


rivers.setStyle({
	line: {
		'stroke': '#44b',
		'stroke-width': 2,
		'stroke-linejoin': 'round'
	}
});
lake.setStyle({
	poly: {
		'fill': '#ccf',
		'stroke': '#44b',
		'stroke-width': 2,
		'stroke-linejoin': 'round'
	}
});
			
Показать пример на отдельной странице

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

В файле towns-n-castles все объекты имеют атрибут "Type" (именно так, с большой буквы). Значений у атрибута всего три: "village", "castle", "emerald". Сделаем так, чтобы все "castle" показывались более толстой обводкой (ведь у них есть толстые стены!), чем беззащитные "villages", а "emerald" (это, как вы, наверное, уже догадались, Изумрудный город) отображался бы значком изумрудного цвета:


towns.setStyleByProp('Type', 'emerald', {point: {
	'fill': '#50C878',
	'stroke': '#555',
	'stroke-width': 4}});
towns.setStyleByProp('Type', 'village', {point: {
	'fill': '#ddd',
	'stroke': '#555',
	'stroke-width': 1}});
towns.setStyleByProp('Type', 'castle', {point: {
	'fill': '#ddd',
	'stroke': '#555',
	'stroke-width': 4}});
//Будьте внимательны с заглавными/строчными буквами. JavaScript чувствителен к регистру.
			
Показать пример на отдельной странице

Наконец, настало время раскрасить каждое из королевств страны Оз в "свой" цвет. Страну Мигунов - в желтый, жевунов - в голубой, гилликинов - в фиолетовый, болтунов - в розовый. А земли изумрудного города - в изумрудный. Названия стран в geojson-файле хранятся в поле "NAME". Мы можем воспользоваться методом setStyleByProp(), который мы применяли выше, но в случае, когда мы хотим изменить только цвет элементов, можно сделать это более кратким методом setFillByProp().


countries.setFillByProp('NAME', 'Gillikin Country','#bb59ff');
countries.setFillByProp('NAME', 'Munchkin Country','#2abde7');
countries.setFillByProp('NAME', 'Winkie Country','#eee35c');
countries.setFillByProp('NAME', 'Quadling Country','#ee5c6f');
countries.setFillByProp('NAME', 'Lands of Emerald City','#03aa77');
			
Показать пример на отдельной странице

На этом мы закончим разбирать наш первый пример. Мы научились создавать на веб-странице карту и прикреплять к ней изображение geojson-слоев, а потом задавать им стили отображения, в том числе и в зависимости от атрибутов объекта. Как пользоваться функциями тематического картографирования, применять к геоизображению способ картограммы (количественного фона) и картодиаграммы (или значковый способ), позволить пользователю "листать" геоизображение с данными на разные моменты времени, прикреплять легенды к тематическим слоям, вы узнаете в следующих туториалах.

Способы картографического изображения: картограмма или количественный фон

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

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

Конверсия обычного полигонального слоя в картограмму

Если вы прошли предыдущий туториал, речь в котором шла о создании небольшой и простой карты Волшебной Страны Оз, у вас уже есть все необходимые нам сейчас данные. Вы сможете использовать сделанную вами карту в этом примере. Если вы не смотрели предыдущий туториал, то вам необходимо скачать: countries.geojson, rivers.geojson, towns-n-castles.geojson и lake.geojson

Создайте карту, прикрепите к ней слои из скачанных файлов (слой из файла countries.geojson прикрепите первым, иначе он закроет собой нижележащие слои), и не усердствуйте со стилями для стран - ведь мы всё равно их сейчас перекрасим!

В файле countries.geojson у полигонов, помимо атрибута "NAME", имеются также атрибуты "DARK_RATE1", "DARK_RATE2", "DARK_RATE3". В них записаны некоторые числовые значения - предположим, что это доля темных волшебников от общего количества волшебников на разные годы. Построим картограмму для этого показателя. Слой у нас уже имеется (раньше мы назвали этот слой countries, оставим это название), надо лишь конвертировать его. Для этого нам понадобится указать границы категорий и назначить им цвета, и придумать описание, которое пользователь увидит в легенде.


countries.choropleth({2013:'DARK_RATE1'},{0:'#fef0d9',200:'#fdcc8a',400:'#fc8d59',600:'#d7301f'},'Тёмных магов на тысячу')
//первый аргумент - {год : имя_атрибута}. Предположим, что DARK_RATE1 хранит показатель на 2013 год
//второй аргумент - {нижняя_граница_категории : цвет}. У нас 4 категории: 0-200, 200-400, 400-600, и более 600
//третий аргумент - небольшое описание слоя, которое будет помещено в легенду к нему
			
Показать пример на отдельной странице

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

Создание нового полигонального слоя-картограммы

Для создания картограммы при помощи theInf необязательно сначала создавать простой слой, а потом "раскрашивать" его. Можно сделать обе этих операции одной командой. Попробуем создать картограмму для Ленинградской области из файла lenobl.geojson

Файл содержит полигоны - муниципальные районы Ленинградской области. У каждого объекта есть атрибут "kvr_2008", в котором содержится число жилых квартир, введенных в действие в 2008 году в субъекте, в расчете на тысячу человек. Для этого показателя мы и сделаем картограмму:


var I = new Inf('map_holder');
var boundary = I.choropleth('res/lenobl.geojson', 'Районы ЛО', {2008: 'kvr_2008'},
		{9:'#238443', 6:'#78C679', 3:'#C2E699', 0:'#FFFFCC'},//цветовая шкала с 4 категориями
		'Введено в действие квартир, на 1000 чел.');//описание слоя для легенды
			
Показать пример на отдельной странице

Неважно, в каком порядке вы укажете числа-границы категорий, они всё равно будут отсортированы по возрастающей. Если у объекта значение атрибута null, то есть по нему данных нет - как, например, у Санкт-Петербурга, он будет окрашен в белый цвет.

Создание легенды для картограммы

Чтобы пользователь видел, какой показатель отражен на вашей картограмме, и какие числа скрываются под выбранными вами цветами - нужна легенда. Вы можете создать её при помощи метода Inf.addLegend(), передав ему в качестве аргументов через запятую все слои, легенды к которым вы хотите создать (в нашем случае слой, пока что, один).

Для нашего примера с волшебниками в стране Оз:


var legend = I.addLegend(countries);
			

И для примера с новыми квартирами в Ленинградской области:


var legend = I.addLegend(boundary);
			
Показать пример на отдельной странице Показать пример на отдельной странице

Управление видимостью слоёв

Этот небольшой урок покажет вам, как предоставить пользователю управление видимостью слоёв.

Наш пример будет основан на карте Тосненского района Ленинградской области: tosno-boundary.geojson, tosno-rivers.geojson, tosno-roads.geojson, tosno-railroads.geojson, tosno-towns.geojson.

Мы создали новую карту и прикрепили к ней все пять слоёв: контур района, реки, дороги, железные дороги и населенные пункты. После этого присвоили слоям стили. Теперь, чтобы предоставить пользователю управление видимостью слоёв, например, с дорожной сетью и железными дорогами, мы напишем следующий код:


var layerControl = I.addLayerControl(roads,railroads);//в качестве аргументов можно передать
//любые из имеющихся на карте слоёв			
			
Показать пример на отдельной странице

После того, как увидите результат, попробуйте закомментировать только что написанную строку и применить другой метод - он сделает слои, переданные ему в качестве аргумента, взаимоисключающими:


var layerControl = I.addRadioControl(roads,rivers);//проверьте результат