Конструктор интерактивных карт по истории

Обновлено: 06.05.2024

Порой глянешь по сторонам и кажется, что современного мира вне IT не существует. Однако есть области человеческой жизни, очень слабо затронутые компьютеризацией. Одна из таких областей — история. И как наука, и как учебный курс. Конечно, работа за компьютером едва ли когда-то заменит историкам ковыряние в архивах. Но уж изучать историю по нарисованным в учебнике статическим картам, а порядок событий выстраивать, тщательно выписывая на бумажку даты в порядке возрастания — это точно прошлый век. Однако инструментов для наглядного изучения истории не так-то много и найти их очень непросто.

Если вы хотите узнать, какие есть интерактивные исторические карты, где стоит посмотреть на представление событий в форме таймлайнов и как делать сложные запросы к википедии типа «все государственные деятели, работавшие в Европе в 1725 году» — читайте дальше.

С чего все началось: на летней школе мы взялись делать интерактивную карту исторических событий на базе википедии. Я не даю прямую ссылку на проект, поскольку проект очень сырой (над ним работала команда из 4 прекрасных десятиклассников, но много ли успеешь за 3 недели), а еще потому что сервер имеет обыкновение «падать» и без хабраэффекта.
Нам хотелось на карте отобразить события, происходившие в разные исторические эпохи — и это отчасти получилось: у нас есть карта битв с их описаниями. На тот момент, когда мы занимались этим проектом, мы знали лишь про пару интерактивных исторических атласов, и ни один из них не показывал на карте события.

Я полагаю, что этих карт так мало потому что все сталкиваются с теми же проблемами, что и мы: исторические данные не структурированы. Нет машиночитаемых баз данных, откуда можно выгрузить информацию о важных исторических событиях. Историки, если и заводят базы данных, описывают в них, как правило, лишь свою узкую предметную область — типа карты укреплений Римской империи. Это может быть интересно и полезно историкам, но вряд ли простые люди могут извлечь из такой карты для себя много пользы. Вторая проблема — полное отсутствие данных про границы стран в исторической перспективе. Вы можете найти сотни атласов древних эпох, но координаты границ вам придется переносить с атласов вручную. Третья проблема — отсутствие каких-либо стандартов описания исторических данных. Даже нормального формата описания даты не существует, стандартные типы данных и форматы ломаются о годы до нашей эры. Что уж говорить про разные календари или неточно определенные даты.

Как гласит народная мудрость: «После того, как вы сломали прибор, изучите инструкцию». Уже после того как мы сделали свою карту, мне удалось найти несколько других проектов с интерактивными картами и другими способами визуализировать историю и добывать исторические данные. Но на то, чтобы откопать эти ресурсы в недрах интернета мне понадобилась какое-то совершенно неприличное количество времени, поэтому я решил собрать всё, что нашел, в одном месте.

Первая категория — интерактивные исторические карты. Это не карты моей мечты, но вполне рабочие продукты. Их довольно много (и я не перечисляю тут еще совсем узкоспециализированные), но действительно хороших среди них всего пара, увы. Отдельно печалит, что среди них нет локализованных проектов, а значит по ним тяжело учить русскоязычных школьников.

    Самая няшная карта, да еще и имеющая очень широкие возможностями для визуализации — это Chronas. Она сложновата для того, чтобы изучить её самостоятельно, поэтому посмотрите видео-ролик про её возможности. Это красиво и сильно. На карте отмечены исторические события разных типов со вспомогательной информацией, что позволяет знакомиться с историей, не отрываясь от карты.

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

Из вводного видео можно также узнать об довольно широких возможностях визуализации статистической информации (типа населенности, исповедуемых религий итп) о разных эпохах. Не все из этих визуализаций просты и наглядны, но сама возможность так делать — это здорово.

    Исторические таймлайны на Histropedia. Я не очень люблю такой стиль представления данных, как ось времени, но а) за неимением лучших средств визуализации, можно и ими пользоваться, б) эти таймлайны действительно хорошо сделаны и удобны, в) эти таймлайны можно редактировать, а также создавать собственные, г) можно создавать таймлайны не руками, а запросом к викиданным, д) довольно много таймлайнов уже сделано за вас, и их приятно изучать.

— карта с геотэгированными вики-статьями про эти места. Предполагается, что она используется для достопримечательностей, но в википедии есть статьи чуть ли не о каждой улице Москвы и о каждой станции метрополитена — так что я вижу вокруг себя довольно бытовой список «достопримечательностей». На вышеупомянутом Chronoas'е, кстати, на карте тоже есть фотки, каким-то образом отнесенные к месту-времени. Отнесение ко времени, впрочем, довольно условное: сколько этому фотографированию лет.

Технологию семантических сетей берут на вооружение все крупные поисковые и информационные системы. В частности, сейчас многие учатся переводить естественный язык в формализованные запросы такому графу. Наверняка следственные органы и разведывательные службы пользуются этим (учитывая, что один из самых популярных графов знаний делается по CIA Factbook). Можно придумать миллион способов использовать эту технологию в любой аналитической работе: для государства, для бизнеса, для науки и даже для планирования домашнего хозяйства.

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

    Есть отличнейший туториал «Using SPARQL to access Linked Open Data» (на сайте The Programming Historian) о том, что такое linked data, и зачем они нужны. Я считаю, что каждый образованный человек должен выучить основы SPARQL, так же как каждый человек должен уметь гуглить. Это буквально про то, как строить сложные и мощные поисковые запросы (см. примеры ниже). Пусть вы не будете пользоваться этим каждый день, но когда придёт очередная задача по поиску и анализу информации, требующая месяца ручной работы, вы будете знать, как этого избежать.

Скажу честно, несмотря на хорошую подачу, материал всё равно довольно сложный: формат данных RDF, онтологии и язык запросов SPARQL. Пока я не нашел эту статью, я мог только восхищаться тому, как круто люди им пользуются, но вообще не понимал как это заставить работать. The Programming Historian дает сложный материал на очень понятных примерах и показывает, как этим пользоваться.

Их сайт, кстати, небезынтересен уже своим названием. Они учат историков пользоваться вычислительными инструментами и программированием для исследований. Потому что капелька программирования любую работу делает проще.

upd: Вспомнил и добавил еще две карты про историю урбанизации и развития человечества. И еще одну совсем простенькую карту, сделанную руками.

КОНСТРУКТОР ИНТЕРАКТИВНЫХ КАРТ С ПРОВЕРЯЕМЫМИ ЗАДАНИЯМИ – творческий инструмент, позволяющий учителю-методисту создавать насыщенные интерактивными объектами карты, схемы и задания самостоятельно (без помощи программистов и специалистов в области компьютерной графики) или в ходе проектной работы с учащимися.

Интерактивные карты, созданные при помощи «Конструктора», могут быть эффективно использованы для сопровождения занятий по географии, истории, а также тех предметов в области естествознания и обществознания, в которых предполагается работа с картами.

Интерактивные карты – частный случай интерактивных моделей (далее могут использоваться оба термина). «Конструктор» предназначен для создания интернет- и SCORM-совместимых моделей на картографической основе, использующих следующие типы интерактивности:

Презентационная схема

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

  • Включать/выключать показ объектов в нужный момент времени;
  • Подсвечивать объект для концентрации внимания учащихся;
  • Перемещать, модифицировать, перекрашивать объекты;
  • Дополнять карту-схему объектами непосредственно во время занятия.

Проверяемое задание

Аналогично заданиям, выполняемым на контурных картах. Основано на добавлении к картографической подложке объектов, параметры которых (местоположение, форму, цвет и другие) должен будет воспроизвести учащийся, выполняющий задание. Проверка правильности выполнения задания осуществляется программой автоматически. Проверяемые объекты могут быть следующих типов:

  • Символы;
  • Стрелки;
  • Ломаные – как разомкнутые, так и замкнутые (области);
  • Текстовые поля и привязанные подписи;
  • Круговые диаграммы;
  • Радиокнопки и чекбоксы;
  • Растровые изображения.

Для лучшего понимания специфики программы укажем, что «Конструктор» не является ни геоинформационной системой (ГИС), ни редактором для создания сложных карт – для этих целей существуют специализированные программы, лишенные, однако, возможностей по созданию интерактивных проверяемых заданий.

2. КАК УСТРОЕН КОНСТРУКТОР И ИНТЕРАКТИВНЫЕ КАРТЫ

Основные понятия и части «Конструктора»:

Редактор

Что делает автор (учитель) в «Редакторе карт»:

  • Импортирует готовую карту-основу (любой файл в формате swf, jpg, gif, png);
  • Дополняет карту произвольным количеством объектов – как импортированных из внешних файлов (например, фотография), так и нарисованных средствами самого редактора (например, граница или название области);
  • Определяет поведение каждого из объектов на готовой карте – будет ли объект преследовать исключительно иллюстративные цели или же объект предназначен не для показа, а является эталонным, то есть ученик должен будет самостоятельно воспроизвести его форму, цвет и другие параметры;
  • Формулирует задание для ученика;
  • Определяет набор инструментов, доступных ученику для выполнения задания.

Плеер

Для показа и использования интерактивных карт используется «Плеер карт», автоматически добавляющийся в карту при ее создании, и позволяющий:

  • Открыть карту;
  • Изучить заложенные в карту презентационные материалы и подсказки;
  • Воспользоваться инструментами рисования для выполнения поставленного задания;
  • Произвести автоматическую оценку правильности выполнения задания;
  • Передать результат автоматического оценивания задания в систему управления учебным процессов (LMS) на основе спецификации SCORM RTE.

«Конструктор» версии 3.0 включает также «Конвертер карт», позволяющий экспортировать карты в более современный формат HTML5 – см. ниже.

Форматы интерактивных карт

Интерактивные карты представлены на диске в трех форматах:

Файловая структура интерактивной карты

Карта в формате FLASH имеет структуру:

  1. Файл Название карты.html (стартовый файл для запуска данной карты)
  2. Папка Название карты_files
    • Набор файлов, необходимых для работы данной карты (изображения и др.)
    • Флэш-плеер (файл MapPlayer.swf ), одинаковый для всех карт

Примечание:
Названия карт и файлов, которые они используют, лучше писать латинскими буквами и цифрами. Русскоязычные названия файлов допустимы, но могут вызвать проблемы при попытке обеспечить ее совместимость с системами управления учебным процессом.

Карта в формате HTML5 имеет структуру:

  1. Файл Название карты.html (стартовый файл для запуска данной карты)
  2. Папка Название карты_files
    • Набор файлов, необходимых для работы данной карты (изображения и др.)
    • Плеер (папка map_player ), одинаковый для всех карт

Примечание 1:
При запуске стартового файла двойным щелчком, интерактивная карта откроется в браузере при помощи «Плеера» и будет доступна для использования, но не для редактирования (в «Плеере» нет полного интерфейса «Редактора» и функции сохранения).

Примечание 2:
По умолчанию папка со скриптами расположена внутри папки "Название карты_files" – то есть каждая карта имеет свою копию плеера. При конвертации моделей в формат html5 вы можете задать папке со скриптами иное расположение – на одном уровне с файлом "Название карты.html". В этом случае несколько карт могут ссылаться на одну и ту же папку плеера.

Как отредактировать интерактивную карту

Чтобы отредактировать карту, запустите «Редактор» ( Редактор карт.exe ), зайдите в папку с картами формата FLASH, и выберите для правки соответствующий стартовый html-файл.

Карту в формате HTML5 нельзя изменить в «Редакторе карт». Чтобы внести исправления, нужно отредактировать соответствующую карту в формате FLASH, а затем при помощи «Конвертера» снова экспортировать ее в формат HTML5.

3. ЗАПУСК И СИСТЕМНЫЕ ТРЕБОВАНИЯ

Системные требования

  • Операционная система и программное обеспечение:
    • для работы с «Редактором карт»
      • ОС Microsoft Windows XP и выше
      • браузер MS Internet Explorer / MS Edge
      • плагин Flash
      • ОС Microsoft Windows XP и выше или GNU Linux (ALT Linux, Ubuntu) или Mac OS X

      Запуск «Редактора карт»

      • Для работы с «Редактором карт» требуется:
        • операционная система Microsoft Windows XP и выше;
        • браузер MS Internet Explorer / MS Edge;
        • плагин Flash к браузеру.

        Запуск «Конвертера карт»

        1. Установите среду выполнения Adobe AIR
          – с сайта производителя или из папки Конструктор карт/Конвертер карт/AdobeAIR .
        2. Запустите файл-установщик Конвертер карт.air
          – из папки Конструктор карт/Конвертер карт .
        3. Запустите установленное приложение Конвертер интерактивных карт

        Более подробно об установке компонентов «Конвертера интерактивных карт» можно прочесть в последнем разделе данного «Руководства».

        3. ИНТЕРФЕЙС РЕДАКТОРА

        «Редактор» содержит три закладки:

        3.1. Формирование интерактивной карты

        Интерфейс главной закладки «Редактора» состоит из четырех основных частей:

        3.1.1. РАБОЧЕЕ ПОЛЕ

        Служит для размещения элементов изображения и их редактирования.

        Особенности импортированных изображений

        В моделях можно использовать (в качестве карты-основы и для ее дополнения) как векторные, так и растровые изображения.

        Преимущество растровых изображений заключается в их большей распространенности. Такие изображения проще найти в электронном виде или изготовить самостоятельно, отсканировав "бумажную" картинку и сохранив ее в формате jpg, gif или png. Кроме того, растровые карты часто более красочны, чем векторные.

        Векторные изображения в формате swf хорошо масштабируется и поэтому выглядят одинаково аккуратно при изменении размеров окна программы.

        Наконец, импортировать можно не только файлы с изображениями, но и группы объектов из других моделей, созданных в «Редакторе». Экспорт группы объектов осуществляется командой "Сохранить выделенные объекты". Импортированные в новую модель объекты сохранят прежнее расположение и свойства.

        Размер рабочего поля

        Фактический размер рабочего поля зависит от разрешения вашего экрана и степени раскрытия окна «Редактора». Однако, для удобства работы в Конструкторе остается постоянным "виртуальный" размер рабочего поля, равный 800*600 пикселей.

        В реальной работе это означает, что импортированная карта-подложка размером 800*600 автоматически впишется в рабочее поле "под обрез", а импортированная картинка размером 400*300 будет занимать непосредственно после импорта лишь четверть рабочего поля. При этом, во-первых, их физические размеры на экране могут быть как больше, так и меньше – и будут меняться при изменении размеров окна «Редактора», а во-вторых, вы можете изменить и размеры импортированной картинки относительно рабочего поля – просто "потянув" за черные квадраты на рамке выделенной картинки.

        Изображения, размер которых больше 800*600 пикселей, вписываются в рабочее поле по-разному, в зависимости от состояния кнопок "Показывать полосу прокрутки". Если обе кнопки отжаты, импортируемое изображение автоматически уменьшится так, чтобы полностью поместиться в рабочем поле «Редактора». Если же, например, кнопка "Показывать горизонтальную полосу прокрутки" отжата (то есть горизонтальной полосы не будет), а кнопка "Показывать вертикальную полосу прокрутки" зажата, то импортируемое изображение автоматически впишется в рабочее поле так, чтобы полностью занимать его по горизонтали, но при необходимости сдвигаться по вертикали. Следует учитывать, что полоса прокрутки сама занимает в рабочем поле 20 виртуальных пикселей – так что размер рабочего поля, отводимого под объекты, при двух включенных полосах прокрутки будет составлять 780*580 пикселей.

        Примечание:
        Выделенный объект можно перемещать мышью или стрелками с клавиатуры (для точного позиционирования). Перемещение ровно на 10 пикселей легко осуществить, зажав клавишу Shift и однократно нажав на соответствующую стрелку.


        3.1.2. ПАНЕЛЬ ИНСТРУМЕНТОВ

        Содержит кнопки инструментов и команд, необходимых для создания и редактирования объектов модели.


        3.1.3. ПАНЕЛЬ НАСТРОЕК ОБЪЕКТОВ

        Список всех объектов модели

        Прокручиваемый список содержит все объекты модели – как импортированные, так и созданные в «Редакторе».

        В списке можно увидеть

        • Свойства объекта в «Редакторе»: видим ли объект, можно ли его перемещать;
        • Имя объекта;
        • Положение объекта относительно других объектов (выше-ниже);
        • Статус объекта (" изображение " – синий шрифт / " эталон ответа " – красный шрифт);
        • Выделенный объект, который в настоящий момент можно редактировать кнопками-командами или настройки которого можно менять (желтая строка);
        • Сгруппированные объекты (голубые строки).
        • Изменить свойства объекта в «Редакторе»: временно сделать невидимым (выключить значок "глаз" – например, чтобы увидеть объект, расположенный ниже данного), запретить перемещение (включить значок "замок" – например, для карты-подложки). Обратите внимание: эти настройки определяют свойства объекта только в «Редакторе», не в модели. Настройки объекта в модели описаны ниже;
        • Изменить имя выделенного объекта (начните редактирование двойным щелчком и впишите любое имя вместо задаваемого автоматически);
        • Выбрать нужный объект для редактирования (выделите строку или несколько строк (с зажатой клавишей Shift));
        • Переместить объект выше или ниже относительно других объектов (перетаскивайте мышью).

        Настройки статуса и поведения объекта в модели

        Объект типа ИЗОБРАЖЕНИЕ можно будет увидеть в модели-задании и даже отредактировать – если это разрешит автор. Изображение может обладать следующими настройками:

        Объекты-изображения могут создаваться с разными целями:

        1. В презентационных целях – например, учитель во время объяснения материала сможет "подсветить" какой-нибудь из объектов.
        2. Временно скрытые ("выключенные") объекты могут служить подсказкой ученику во время выполнения задания.
        3. Учитель может создать объект, во всем аналогичный эталонному объекту-заданию, кроме, например, цвета – и предложить ученику покрасить этот готовый объект-изображение так, чтобы воспроизвести эталонный.

        Объект типа ЭТАЛОН ОТВЕТА не будет показан ученику в задании, он послужит образцом, который должен правильно воспроизвести ученик. Эталон – это правильный ответ на вопрос задания (или один из вопросов, если их несколько в одном задании).

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

        Задать в «Редакторе» границу допустимой погрешности можно двумя способами:

          Задать расстояние (в пикселях), на которое можно отклониться от положения эталона.

        • Для символа зона допустимой погрешности – окружность заданного радиуса с центром в центре символа.
        • Для незамкнутой ломаной требуется выполнение двух условий:
          • линия-ответ нигде не выходит за пределы зоны погрешности линии-эталона;
          • крайние точки линии-ответа находятся в пределах погрешности крайних точек линии-эталона.
          • линия-ответ нигде не выходит за пределы зоны погрешности линии-эталона;
          • линия-ответ замкнута;
          • линия-ответ охватывает внутренность области-эталона.

          Зона погрешности визуально отображается на рабочем поле в виде розовой области вокруг эталонного объекта. Двигая ползунок, регулирующий величину зоны погрешности, можно наглядно видеть, как увеличивается или уменьшается допустимая погрешность.

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

          Помимо местоположения и формы, можно проверять и другие параметры построенного объекта.

          • Тип;
          • Цвет (без учета степени прозрачности).
          • Цвет границы (без учета степени прозрачности);
          • Цвет заливки (без учета степени прозрачности).
          • Тип (размер);
          • Величину/закраску секторов.
          • Содержание (с учетом регистра или без учета);
            Чтобы назначить для эталонного текстового поля несколько вариантов заполнения, которые будут считаться правильными, – пишите каждое из них на новой строке (т.е. разделяйте нажатием Enter).
          • Цвет шрифта (без учета степени прозрачности);
          • Размер шрифта;
          • Начертание шрифта.
          • Содержание (с учетом регистра или без учета);
          • Цвет шрифта (без учета степени прозрачности).

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

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

          3.1.4. ПОЛЕ ТЕКСТОВОГО КОММЕНТАРИЯ

          Переключившись с настроек объектов ("Объекты") на поле "Текст" можно написать текст задания или произвольный комментарий. В модели этот текст будет показан также с правой стороны от рабочего поля.

          Текст можно оформлять разным размером, стилем и цветом шрифта.


          3.2. Настройки задания

          В соответствии со спецификацией SCORM RTE, оценка за выполнение задания исчисляется в процентах и автоматически передается в систему управления учебным процессом.

          Блок "Оценивание" позволяет задать алгоритм оценки действий ученика, выполняющего задание. Так, "строгое" и "жесткое" оценивание вынуждают ученика не только воспроизвести эталонные объекты, но и не ставить лишних объектов. Это позволит "наказывать" за попытки "обмануть" задание путем постановки, например, не одного символа в требуемом месте, а заведомо избыточного числа символов – в расчете на то, что один из них случайно "попадет куда надо".

          4. ИНТЕРФЕЙС ПЛЕЕРА

          Интерфейс «Плеера» состоит из четырех частей:

          1. Рабочее поле

          Служит для размещения элементов изображения и их редактирования.

          2. Панель инструментов

          Содержит только те инструменты, которые автор считает необходимыми для работы с заданием.

          3. Текст задания

          Справа от рабочего поля отображается комментарий к заданию, составленный автором модели. Комментарий может перекликаться с текстовыми блоками на рабочем поле.

          4. Панель управления

          Выпадающее меню "Показать скрытые" позволяет регулировать видимость или невидимость объектов, определенных в «Редакторе» как "Изображение" с опцией "Можно включать".

          Справа расположено нередактируемое текстовое поле, в котором можно увидеть текст задания или произвольный комментарий, составленный автором задания.

          Кнопка "Сбросить" позволяет очистить Рабочее поле от всех действий, выполненных в «Плеере» и вернуться к первоначальному виду задания.

          Кнопка "Подтвердить ответ" запускает механизм проверки ответа пользователя.

          Кнопки "Подсказка" и "Правильные" появляются не всегда. Условия, при которых становится возможным использование подсказок, определяются при создании модели (например, разрешить смотреть подсказку только после первой неверной попытки ответа).

          Карты-истории позволяют комбинировать карты и описательный текст с мультимедийным содержанием. С их помощью проще использовать силу и мощь карт, чтобы рассказать историю.

          Начните прямо сейчас!

          тур по карте

          Тур по карте-истории

          Проведите аудиторию через последовательность фотографий или видеофайлов, привязанных к карте.

          журнал карты

          Story Map Journal

          Создайте глубокое последовательное повествование, организованное по разделам на панели прокрутки сбоку.

          каскад

          Story Map Cascade

          Создайте подробный и захватывающий полноэкранный рассказ, который нужно прокручивать.

          с закладками

          Story Map Series

          Представьте серию карт или другого контента с помощью вкладок, пронумерованных кнопок или "боковой гармошк.".

          shortlist

          Story Map Shortlist

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

          шторка

          Story Map Swipe и Spyglass

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

          основная

          Базовая карта-история

          Прекрасная картография говорит сама за себя; простой пользовательский интерфейс.

          Пять шагов к успеху в создании карт-историй

          Более подробно о том, как создать карту-историю

          Написания кода не требуется. Невероятная мощь. Открытый код.

          Станьте автором карты-истории


          Покажите места на карте, которые стоит увидеть. Заявите о себе. Планы и проекты вашей организации. Каждому есть, что рассказать. Вам слово!

          Создавайте крутые карты


          В рамках ArcGIS, Esri Story Maps позволяет использовать для создания собственных карт всю силу и мощь ведущей мировой картографической и ГИС-платформы.

          Расскажите всему свету


          Вовлекайте сообщество, общайтесь с клиентами, влияйте на принимающих решения лиц и воодушевляйте тех, кто вас поддерживает.

          В Галерее Story Maps вы найдете множество потрясающих примеров, отобранных командой Esri Story Maps для того. Чтобы продемонстрировать вам креативный подход и практические советы в различных отраслях. Вы можете выполнить поиск или применить фильтр, чтобы узнать, как авторы реализуют свои задачи в картах-историях, и, возможно, сможете использовать какие-либо идеи в своих собственных проектах. Изучайте. Почувствуйте, что означает сделать хорошую историю. Примените наиболее подходящий для вас способ или придумайте свой собственный!

          cpu

          Выберите шаблон приложения Story Map, который больше всего подходит для вашей истории

          После изучения Галереи Story Maps Gallery у вас может сформироваться решение, какой из шаблонов вы будете использовать. Либо вы можете воспользоваться мастером на странице Приложения с возможностью "Узнать у профессионал.", которое поможет подобрать наилучший шаблон.

          Создание собственной истории

          Просто нажмите на кнопку Создать для выбранного шаблона приложения, при этом запустится интерактивный и интуитивно понятный конструктор историй.

          Наши конструкторы значительно упрощают процесс создания истории. Написания кода не требуется. Story Maps являются частью ArcGIS Online, облачной ГИС-платформы Esri, поэтому, чтобы создать историю, надо выполнить вход в учётную запись ArcGIS Online. Ваши карты-истории, так же, как и карты и данные, которые в них используются, хранятся в защищенном облаке ArcGIS Online. Вам не нужно ничего специально загружать и устанавливать.

          Для каждого шаблона приложения есть страница руководства пользователя, где описывается процесс создания приложения. Более подробную информацию можно найти на странице Story Maps Ресурсы. Есть вопросы? Обратите внимание на страницу FAQ.

          В рамках ArcGIS, Esri Story Maps позволяет использовать для создания собственных карт всю силу и мощь ведущей мировой картографической и ГИС-платформы. Вы можете собирать и использовать собственные данные, данные своей организации или выбрать из огромной коллекции готовых к использованию проверенных данных, опубликованных Esri и многими другими известными партнерами и агентствами в ArcGIS Living Atlas.

          В веб-карты ArcGIS можно добавить собственные данные из различных форматов, начиная от табличных данных, разбитых на листы, до данных, опубликованных из ArcGIS Pro и ArcMap, настольных продуктов Esri для ГИС-профессионалов. Вы можете сначала создать собственные веб-карты в ArcGIS Online и затем использовать их в карте-истории, также некоторые шаблоны приложений позволяют создавать и редактировать карты непосредственно из интерактивных конструкторов, поэтому этим можно будет заняться в процессе создания самой истории. Кроме того, два приложения карты, основанные на представлении локаций, Story Map Tour и Story Map Shortlist, автоматически создают веб-карту при загрузке в них местоположений.

          Карты-истории также доступны в продукте Esri ArcGIS Enterprise, который позволяет организации создать собственную облачную картографическую и ГИС инфраструктуру. Если у вас используется ArcGIS Enterprise, вы будете создавать карты-истории на своем портале Enterprise, а не на веб-сайте, указанном выше.

          cpu

          Публикация и продвижение карты-истории

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



          Сегодня делимся с вами пошаговым руководством создания интерактивных карт для веб-приложения или блога. Просто сохраните эту статью в закладках. Хоть и существует, например, библиотека d3.js, которая может создавать пользовательские карты, есть несколько инструментов еще проще. В этом посте посмотрим на три простые в обращении, но мощные библиотеки Python с открытым исходным кодом и поработаем с ними.


          Когда документация вводит в ступор

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

          Далее в статье сравниваются реализации интерактивной фоновой карты (хороплета) с использованием трех популярных библиотек, доступных для Python, а также подробности и настройки окончательного результата.

          1. Altair — простая и быстрая реализация с легкодоступным набором функций.
          2. Plotly — обладает богатой функциональностью. Включает в себя Mapbox, пользовательские настройки и стилизацию.
          3. Folium — Leaflet — полностью настраиваемая и интерактивная. Включает в себя подсказки, всплывающие окна и многое другое.

          Предварительные требования

          Хороплетная карта требует двух видов данных в фоновом режиме, один из которых — это геопространственные данные, географические границы для заполнения карты (обычно это векторный файл .shp (Shapefile) или GeoJSON), и две точки данных на каждом квадрате карты для цветового кодирования карты в зависимости от самих данных.

          Библиотека Geo Pandas полезна, когда нужно получить данные в требуемом формате. В примере используется файл GeoJSON индийских штатов. Вы можете начать с любого общедоступного Shapefile или GeoJSON.

          Altair

          Altair — библиотека визуализации для Python, основанная на Vega. Хороплет реализуется минимальными усилиями и включает интерактивные элементы — выделение, всплывающие подсказки и т.д.

          Altair совместима с fastpages. Вы можете создавать простые записи блога в считанные минуты, просто конвертируя файлы Jupyter Notebook с помощью минимального количества кода. Ознакомьтесь с Readme на GitHub.


          Читаем Shapefile как фрейм GeoPandas:


          Фрейм выглядит так:


          Создаем базовый слой и слой хороплета:


          Код выше должен визуализировать интерактивную карту с функцией отображения подсказки и подсветки при выборе (клике).

          • Простая и быстрая реализация. Включает предопределенный набор функций, чтобы ускорить работу.
          • Совместимость с fastpages
          • Мало вариантов настройки и ограниченная интерактивность.
          • Нет возможности использовать внешние стилизованные части карты, такие как OSM, Mapbox и т.п.
          • API плохо документирован.

          Реализация c помощью Plotly

          Библиотека Plotly для построения графиков на Python отрисовывает готовые к публикации карты с большим количеством интерактивных и настраиваемых функций.

          Доступны пользовательские конфигураций базовой карты из Mapbox, OSM и другие стилевые опции, а также простая реализация с помощью Plotly Express и обширная документация. Это делает Plotly одним из предпочтительных вариантов для создания интерактивных карт.


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


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

          • Очень простая реализация с помощью библиотек диаграмм и Plotly Express. Имеется обширная документация.
          • Множество настроек и настраиваемых опций стилизации.
          • Совместимость с Dash и другими вариантами для встраивания фрагмента во внешние веб-приложения.
          • Нет возможности добавлять всплывающие окна и другие интерактивные элементы, кроме предварительно заданных вариантов.
          • Может потребоваться доступ по токену для работы с несколькими внешними стилями. Ограниченные возможности управления ограничениями масштабирования и связанной с этими возможностями интерактивностью.

          Реализация с помощью Folium

          Folium сочетает в себе простоту использования экосистемы Python и сильные стороны картографирования библиотеки leaflet.js. Это позволяет визуализировать настраиваемые, отзывчивые и интерактивные хороплетные карты, а также передавать богатые векторные, растровые, HTML-визуализации в виде маркеров на карте.

          Библиотека имеет ряд встроенных наборов частей карт из OpenStreetMap, Mapbox и Stamen, а также поддерживает пользовательские наборы через API Mapbox или Cloudmade. Поддерживаются изображения, видео, GeoJSON и TopoJSON.


          Добавление базовых слоев и слоев Choropleth:


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

          • Количество настроек и настраиваемых опций стиля наряду с уникальными интерактивными функциями, такими как пользовательские всплывающие окна/части карты/фон, а также увеличение по клику.
          • Опция передачи векторных, растровых, HTML визуализаций в виде маркеров на карте.
          • Опция отображения карты в виде HTML и другие опции встраивания фрагмента во внешние веб-приложения.
          • Достойный объем документации для изучения всех доступных функций.

          Заключение

          Эти три инструмента позволяют без особых хлопот реализовать индивидуально настроенные интерактивные карты для веб-сайтов.

          image


          Получить востребованную профессию с нуля или Level Up по навыкам и зарплате, можно пройдя онлайн-курсы SkillFactory:

          Читайте также: