Создание интерактивной карты офиса. Создание интерактивной карты для сайта


Обзор онлайн-сервисов для создания интерактивных визуальных историй – EduNeo

учитель в ЦДО "Ростовская санаторная школа-интернат №28" .

Эксперт: в области географии, педагогики, методики дистанционного обучения

Closr.it – онлайн-сервис, с помощью которого можно создавать визуальные истории на основе изображений.

Узнать предсказание на 2018 год: Выбери шар на интерактивной Елочке.

Принцип работы сервиса

Сервис дает возможность загрузить изображение и расставить на нем метки с описанием. Изображение становится интерактивным: перемещаясь по изображению и изменяя масштаб, зритель может рассмотреть детали и узнать дополнительную информацию. 

Особенности сервиса:

  • англоязычный;
  • требуется регистрация, также есть возможность входа через социальные сети Facebook и Goggle +;
  • бесплатный.
  • есть возможность обратной связи – зрители могу комментировать метки;
  • имеется возможность поделиться созданной работой в Facebook, Twitter, Goggle +, отправить по почте, поделиться ссылкой или встроить на свой сайт или блог (с помощью HTML-кода).

Возможность организации групповой работы в сервисе

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

 Инструкция по работе с сервисом (на русском языке).

Примеры визуальных историй М.Коломийцева (предмет – география)

Особенности рельефа

Строение вулкана

Работа с контурной картой

ArcGIS Online – сервис, позволяющий на основе основе большого количества разнообразных карт создавать визуальные истории.

Принцип работы сервиса

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

Особенности сервиса:

  • содержит огромное количество разнообразных карт от физических до политический, имеются спутниковые снимки, исторические карты и пр.;
  • язык: русский;
  • необходима регистрация. Имеется возможность входа через социальные сети Facebook, Goggle +.;
  • позволяет создать пробную бесплатную версию, в дальнейшем необходима оплата;
  • есть возможность делиться материалами в социальных сетях или получить код для встраивания на сайт;
  • существует приложение ArcGIS Online для мобильных устройств: для Android и  для ОС IOS

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

Инструкция по работе с сервисом вот здесь.

Возможность групповой организации работы в сервисе

Бесплатный персональный аккаунт в сервисе не дает возможность групповой работы в сервисе. Однако можно организовать совместную работу по сбору информации для создания будущего виртуального путешествия и разработки маршрута.   

Возможности сервиса для образовательной деятельности

Сервис будет полезен не только географам. Можно создавать маршруты по следам литературных или исторических героев, придумывать виртуальные экскурсии и пр.

Примеры работ М. Коломийцева (предмет – география)

Путешествие по Кавказу  

Служба в армии

Презентация Служба в армии

Второе плавание Х. Колумба

Презентация Второе плавание Х. Колумба

Известный онлайн-сервис ThingLink – для создания интерактивных плакатов. Имеется возможность создавать интерактивные видео и картинки 360*, но только для платных аккаунтов.

Принцип работы сервиса. Позволяет добавлять в редактируемые изображения метки. В метки можно добавить: текст, видео (с популярных хостингов, например Youtube), картинки, ссылки на стороние ресурсы.

Особенности работы сервиса

  • язык: английский;
  • необходима регистрация, возможен вход через социальные сети;
  • созданные плакаты в ThingLink могут быть доступны для редактирования другим пользователям. Необходимо зайти в настрой;
  • есть бесплатный тариф с ограниченным функционалом, и годовые. Цена для индивидуального преподавателя: 35 долларов в год;
  • работает со всеми современными веб-браузерами, а также с iPad, iPhone и Android;
  • есть возможность поделиться плакатом в социальных сетях или встроить в блог/сайт;
  • степень освоения: легкая. Интуитивно понятный интерфейс.

В 2016 году возможности бесплатной версии были сильно урезаны! Например, нельзя загрузить собственную картинку или аудио для метки. Ограничения в шрифтах, фонах и пр.

Инструкция по работе с сервисом.

Пример работы М. Коломийцева

Интерактивный плакат по географии

Работа с контурной картой

Круговорот воды в природе

Узнать предсказание на 2018 год: Выбери шар на интерактивной Елочке.

 

 

 

 

 

www.eduneo.ru

Создание интерактивной карты офиса / Блог компании Positive Technologies / Хабр

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

Ежедневно мы сталкиваемся с проблемой «Как найти в офисе Васю?» или, наоборот, мучаемся вопросом «Как зовут парня, который сидит в том углу?». В итоге пара энтузиастов решила положить этому конец. Так началась история разработки интерактивной карты нашего офиса. Об этом мы сегодня и расскажем.

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

Разработчики изначально предполагали следующие сценарии использования карты.

  1. Поиск рабочего места коллеги. Есть строка для поиска, туда «вбивается» фамилия нужного коллеги (можно искать и по имени, но уж слишком много у нас тезок), и на карте показывается местоположение его рабочего места.
  2. Идентификация. Если человек недавно работает в какой-то комнате и еще не успел выучить имен соседей, он может найти свою комнату на карте и, кликнув на определенный стол, узнать имя того, кто его занимает.
  3. Навигация. Порой объяснить, где именно в офисе ты сидишь задача непростая. Чтобы облегчить ее, предполагалось реализовать возможность отправлять ссылку на свое местоположение — http://portal.yourdomain.ru/map#username. При клике на нее карта прокручивается к нужному этажу и помещению, показывая искомое рабочее место.
На данный момент реализованы все три сценария.

Делать карту изначально решили с использованием API Яндекс.Карт. Все, что требовалось от карты, API Яндекс.Карт позволял: загрузить свое изображение, сделать базовую работу с картой («зум», перемещение) и реализовать работу с объектами на карте. В качестве средства совместной работы над проектом изначально было выбран Dropbox, поскольку изменения в коде происходили нечасто. Сперва казалось, что нужна система контроля версий, однако в дальнейшем необходимость в ней отпала. Сейчас разработку ведет один человек.

В итоге карта должна была быть размещена на корпоративном портале.

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

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

Разработка
Изначально нанесение данных на карту производилось вручную. Сначала с корпоративного портала скачивался Excel-файл со списком всех сотрудников (с того этажа, для которого был план), который затем конвертировался в CSV с нужными полями: фамилия, имя, должность, электронный адрес сотрудника. После этого в CSV-файл дописывались координаты стола на карте. Этот файл играл роль базы данных, из которой по Python-скриптом формировался JavaScript-массив с данными о пользователях.

Поскольку карта была реализована в статическом варианте, просматривать ее можно было только в режиме read-only; возможность «переезда» сотрудника с места на место изначально не учитывалась.

Новая карта
После того как первая версия была выпущена, и мы начали собирать «хотелки» коллег, «Яндекс» существенно обновил свой картографический API. Делать новую версию мы решили уже с переездом на API версии 2.0.

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

  1. Добавились недостающие этажи: мы самостоятельно нарисовали схемы для нужных этажей, после чего добавили их на карту.
  2. Изменили работу со столами и сотрудниками, разделив понятия «сотрудник» и «стол». Раньше связь «стол — сотрудник» была жесткая, и чтобы поменять двух коллег местами, нужно было физически двигать столы на карте. Сейчас достаточно указать, что за столом сидит другой человек: столы двигать не придется.
  3. Кроме того, заметно упростился сам механизм работы со столами: мы отказались от статической карты и сделали простое веб-приложение. Это позволило автоматически сохранять положение столов и положение коллег за столами.
  4. В новом API работа карты не привязана к домену, что позволяет организовать работу на двух (или больше) доменах (не только portal.yourdomain.ru/map, но и portal/map).
Планы
Работа над улучшением карты не останавливается, идей много. Вот самые интересные из них.
  1. Добавление новых сущностей. В офисе есть много интересных вещей: столовые, кофемашины, «переговорки», места для стендап-митингов… Было бы полезно нанести все это на карту.
  2. Интеграция карты с Active Directory и Exchange позволила бы реализовать массу полезных функций. Было бы интересно подкачивать данные о сотруднике из Exchange (например, его расписание). Совместив данные расписания сотрудника с графиком занятости переговорных комнат, можно отображать на карте информацию о рабочем месте сотрудника (на месте ли он, и если нет, то в какой из «переговорок» его искать; это было бы особенно полезно в случае с руководителями).
Вот так интересный сайд-проект группы энтузиастов внутри компании вырастает в сервис, полезный каждому сотруднику. Кстати, проект отлично переносится и масштабируется, что особенно актуально для нашей компании в преддверии переезда в новый офис. Чтобы запустить карту на новом месте нужно будет всего лишь загрузить новый план этажей и заново «рассадить» сотрудников.

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

Кстати, авторы и разработчики карты присутствуют на Хабре: MikeOzornin и evgekon.

habr.com

Примеры использования | Интерактивные карты для вебсайтов

На этой странице собраны некоторые примеры использования наших карт, сгруппированные по способам применения.

Карты дилеров, дистрибьютеров, представителей, партнеров

  • http://suprotec.ru/
  • http://askfurnitura.ru/
  • http://mebeloptovik.ru/
  • http://dendor.ru/
  • http://ugra-plit.ru/
  • http://www.rusenergo.info/
  • http://facirus.ru/
  • http://www.mas-pricep.ru/
  • http://lavco.ru/
  • http://blueggvision.com/

Карты филиалов

  • http://strutec.ru/
  • http://rosprom-security.ru/
  • http://kabelshik.ru/
  • http://microzaim.net/
  • http://profetrans.ru/
  • http://fundzj.ru/

Карты, в качестве элемента навигации

  • http://www.voenpereezd.ru/ — карта в выпадающем меню

Быстрый доступ к информации по регионам

  • http://ecoopen.ru/
  • http://agroconsult.pro/
  • http://genomerussia.bio.spbu.ru/
  • http://ayu.ru/
  • http://rcami.ru/

Карты покрытия

  • http://rainbow-moscow.ru/

В следующей галерее размещены скриншоты некоторых вебсайтов, с интерактивной картой России на базе HTML5. Ссылки на сайты этих примеров можно найти в статьях с меткой «Портфолио»

Карта мероприятий на агропорталеКарта продаж компании Альфа-СПККарта филиалов компании Деньги до зарплатыКарта России на сайте бесплатных объявленийКарта представителей национального объединения проектировщиков

Карта партнеров на сайте Союза органического земледелияКарта членов партнерства Аварийные комиссары России

Карта представителей корпорации Евросвязь

Карта официальных дилеров компании JAFAR-RUSКарта озер РоссииКарта дилеров бренда MINIXКарта сроков доставкиКарта России на сайте История регионовКарта клиентов Центра инновационных технологий

fla-shop.com.ru

CloudURL - Интерактивная карта на JavaScript

jVectorMap

jVectorMap

jVectorMap.com (пример) — это jQuery-плагин для создания именно таких интерактивных карт.

Здесь используется SVG в качестве формата карты, и к тому же плагин предлагает множество уже заранее подготовленных карт. Также, используя редактор векторной графики (вроде Adobe Illustrator), мы можем нарисовать что угодно (карту торгового центра), экспортировать ее в SVG и добавить интерактивные элементы.

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

JQVMap

JQVMap

JQVMap.com — плагин, который использует SVG для рендера векторных карт. Он работает во всех браузерах, поддержка в старых версиях IE 6-8 осуществляется через VML.

Raphaël (raphael.js)

Raphaël raphael.js

raphaeljs.com (пример)  — небольшая библиотека на JavaScript, которая должна упростить вашу работу с векторной графикой. Raphaël использует SVG и VML в качестве основы для создания графики. Это означает, что каждый графический объект который вы создаёте, также является объектом DOM, так что к нему можно добавить обработчик событий JavaScript или модифицировать его позднее.

Maphilight

jQuery.Maphilight.js

 jQuery.Maphilight.js (пример) —  является плагин JQuery, который добавляет визуальные блик на карты изображения. В IE используется VML. в других браузерах используется canvas. Maphilight был протестирован в Firefox, IE, Safari, Chrome, и Opera.

 

jQuery Mapael

jQuery Mapael

JQuery Mapael — Простота сборки красивые визуализации данных на динамических векторных карт

tech.yandex.ru

tech.yandex.ru

 

Интерактивная SVG картограмма с помощью d3.js

Интерактивная SVG картограмма с помощью d3.js

Add Interactive Maps to WordPress with MapSVG

Add Interactive Maps to WordPress with MapSVG

mapsvg.com (speckyboy.com)

 

Полезное:

cloudurl.ru

Необычные и интерактивные карты сайта для вдохновения

Привет, друзья! Сегодня я хочу представить Вам подборку необычных и интерактивных карт сайта. Их прелесть заключается в том, что они совершенно не такие какими мы их привыкли вдеть. Обычно это простая страница с перечнем ссылок на все страницы нашего сайта. В данном же случае мы имеем дел со сложным графиком, в котором содержаться как текстовые так и графические элементы. Такая карта сайта выглядит на много сложнее по структуре, но в то же время более интуитивно понятна и конечно же красивая.

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

Спасибо http://speckyboy.com и рекомендую:

  • 10 причин, чтобы начать вести свой блог в 2015 году
  • Бесплатные PSD макеты журналов, книг, брошюр и блокнотов
  • Правдивые но болезненные факты повседневной жизни
  • 3 самые популярные тенденции в веб — дизайне за 2014 год
  • 35 популярных брендов и сайтов которые используют WordPress

beloweb.ru

бесплатные сервисы для создания своих интерактивных карт

22 490 просм.

Свежий обзор пяти бесплатных сервисов для создания своих интерактивных карт:  Travellerspoint, API Яндекс.Карты, QuickMaps, ZeeMaps, TripGeo Direction Map

1. TravellersPoint

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

 

2. API Яндекс.Карты

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

3. QuickMaps

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

4. ZeeMaps

ZeeMaps — это простой и полезный онлайн-сервис, который предоставляет пользователям множество полезных инструментов и настроек, чтобы помочь им создавать интерактивные карты, добавить маркеры из Google Spreadsheet, или CSV-файл и многое другое. После создания интерактивной карты, ее можно опубликовать на блогах, сайтах или просто сохранить в формате JPG или PDF-формате, чтобы их можно загрузить на различные портативные устройства и компьютер.

 

5. TripGeo Direction Map

Используя TripGeo Direction Map, пользователи могут легко создавать карты и создавать свои маршруты с пользованием Google Map. Есть возможность отображение Street View для любой точки на маршруте,  установки скорость движения, интервала обновления, масштаба и многое другое.  После создания интерактивной карты, ее можно легко внедрить на сайт.

Автор: ТопОбзор по матариалам smashingapps.com, yandex.ru

При использовании материала активная ссылка на http://www.topobzor.com обязательна

Похожее

comments powered by HyperComments

www.topobzor.com

Создание интерактивных карт

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

Также мы занимаемся разработкой 3D-карт, по которым можно свободно перемещаться и которые можно «крутить-вертеть» под любым ракурсом.

Об основных преимуществах и выгодах графического дизайна от Network Media можно узнать здесь.

 

Что Вы получите

Каковы наши возможности в создании интерактивной карты на заказ

  • Цели: просто скажите, что требуется

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

  • Детализация: от мухи на стекле до вида из космоса

В зависимости от Ваших пожеланий, мы готовы разработать как приблизительные схемы, так и карты на основе спутниковых снимков, гибридные (спутник + схема) карты, карты по индивидуальному заказу.  Объекты на них могут быть указаны лишь схематично или прорисованы до мельчайших деталей

  • Уровень сложности: от схемы до портала

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

  • Количество слоев: пока не кончаться объекты

Интерактивные карты от Network Media могут иметь любое количество слоев. Допустим, Вам нужна карта зоны туристического отдыха. Один слой — отели и схемы проезда к ним, другой — культурные достопримечательности и схемы как до них добраться, третий — достопримечательности природные, четвертый — веломаршруты, пятый — пешие тропы и т.д. пока не кончатся туристические объекты. Пользователь легко переключается между слоями. Каждый слой может содержать дополнительную информацию — описания, подсказки, советы, изображения

  • Функционал: все, что только доступно

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

  • Дополнительные элементы и эффекты: хоть графика, хоть анимация

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

 

Как заказать разработку интерактивной карты

Заказать создание интерактивной карты очень просто.
  1. Звоните нам по телефону +7 (812) 670-07-32 для Санкт-Петербурга, +7 (499) 647-72-09 для Москвы или пишите письмо
  2. Обрисовываете задачу, задаете уточняющие вопросы
  3. Достигаете с нами договоренности.
  4. Работа над Вашим проектом начинается.

Работаем с клиентами по всему миру!

network-media.ru