Вчера у меня была возможность присоединиться к ребятам из CartoDB на их CartoCamp Edu, где собрались преподаватели и специалисты по веб-картографии, включая Криса Уонга, чтобы обсудить, как использовать CartoDB в классе. Как преподаватель, который преподает CartoDB в основном работающим профессионалам в рамках Сертификационной программы по ГИС и дизайну в Институте Пратта, я всегда заинтересован в новых способах демонстрации студентам возможностей и полезности CartoDB для создания интерактивных онлайн-карт.

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

Я использую CartoDB в классе, потому что это простая в использовании платформа, которая упрощает сложные задачи размещения данных и функций стиля. Мои студенты, изучающие Майнинг в Интернете, уже в первый день работают с картой. В некоторых случаях это их первая карта. Для тех, кто может работать с более традиционной ГИС, это их первая онлайн-карта. Независимо от их происхождения, как только они увидят, как легко создать карту, они начнут учиться, играя с функциями и стилями, чтобы получить карту, которую они хотят. Я использую панель CSS, чтобы научить их использовать CartoCSS для улучшения стиля и функциональности их карт.

Хостинг визуализации в CartoDB — это хорошо, но студенты часто спрашивают, как они могут создать дополнительные функциональные возможности для пользователей, такие как изменение слоев или фильтрация результатов. Это требует большего знания JavaScript и побуждает их начать создавать свой собственный интерактивный веб-проект, часто веб-сайт, построенный на JavaScript, который использует визуализацию, созданную в CartoDB, в качестве основы и накладывает функциональность поверх нее. У CartoDB есть отличный курс по началу работы с CartoDB.js, и Крис провел нас через отличный учебник по началу работы с данными NYC PLUTO, но это заставило меня задуматься о том, как взять то, что он нам показывал, и сделать немного легче начать. Я сделал несколько интерактивных веб-картографических проектов, и каждый раз мне приходилось возвращаться и находить начальный шаблон, чтобы начать работу. Чтобы помочь другим начать работу, я создал шаблон:

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

Ключевыми фрагментами кода являются переменные, управляющие центральной точкой карты («map_centerpoint»), уровнем масштабирования («zoom_level»), слоем визуализации («myVizLayer») и именем таблицы («table_name»). для данных, с которыми вы хотите работать. Центральная точка и уровень масштабирования — это значения, которые вы выбираете (чем выше число, тем ближе масштаб). Слой визуализации находится, когда вы визуализируете свою карту. Когда вы нажимаете «Опубликовать» в правом верхнем углу:

Вы получите экран, который позволит вам выбрать, как опубликовать карту. В этом случае скопируйте ссылку под CartoDB.js:

Теперь замените значение в «myVizLayer» этой ссылкой (не забывая взять ее в кавычки) и обновите table_name именем таблицы для данных, которые вы хотите изменить. Вы можете найти имя таблицы на панели SQL в правой части экрана, где написано «SQL». Имя таблицы — это слово после «FROM». Замените значение table_name именем вашей таблицы.

Теперь вы заменили большинство ключевых элементов кода. Следующее, что нужно сделать, это заменить значения в функции «setInteractivity()». В настоящее время у него есть «cartodb_id», «name» и «pop2005». Это столбцы из таблицы world_borders, которые мы хотим использовать в нашей визуализации. Вам всегда понадобится ваш cartodb_id. Вот как CartoDB распознает объекты для отображения функций. Вы можете получить имена столбцов, переключившись на «Просмотр данных» (в центре вверху). Найдите имена столбцов, которые вы хотите использовать:

Теперь, когда вы видите «data.name» или «data.pop2005», вы можете заменить их именами ваших столбцов, используя синтаксис «data.‹column_name›». Теперь вы можете запрашивать значения в этих столбцах или отображать информацию, как мы делаем здесь, с населением и названием страны. Следующим шагом является добавление дополнительных пользовательских функций и стилей, что выходит за рамки этого поста, но использует те же элементы, которые мы создали с помощью кнопки сброса и функции щелчка для фильтрации.

Этот шаблон размещен в репозитории Github, который я надеюсь заполнить другими интересными и полезными шаблонами. А пока, я надеюсь, вы найдете это полезным. Удачного картографирования!

РЕДАКТИРОВАТЬ: В интересах полного раскрытия информации я должен был упомянуть в своем первоначальном посте, что я являюсь Партнером CartoDB с апреля этого года. Этот пост не спонсируется CartoDB.

Первоначально опубликовано на сайте blog.datapolitan.com 22 августа 2015 г.