Введение в Layerpin
Превращайте чертежи, схемы, поэтажные планы и иллюстрации в интерактивные быстрые карты с метками, векторными фигурами, Deep Zoom и безопасным встраиванием.
Что такое Layerpin?
Layerpin — это платформа для создания интерактивных карт на основе пользовательских изображений: планов этажей, архитектурных чертежей, схем выставок, музеев, университетских кампусов, магазинов и технических диаграмм.
В отличие от географических карт (Google Maps, Mapbox), требующих реальных координат Земли и данных ГИС, Layerpin работает прямо на ваших изображениях с субпиксельной нормализованной сеткой координат, поддержкой сенсорного ввода, быстрым поиском и кэшированием CDN.
Отмечайте жилые и офисные помещения, статус аренды, площадь, фототуры и удобства прямо на поэтажных планах.
Направляйте гостей выставки по стендам, сценам, выходам и зонам партнеров с помощью поиска и фильтрации.
Превращайте сборочные чертежи, схемы оборудования и производственные линии в интерактивную документацию со всплывающими подсказками.
Просматривайте снимки дронов сверхвысокого разрешения, музейные картины и сложные чертежи CAD с плавной пирамидальной тайловой загрузкой Deep Zoom.
4-этапный рабочий процесс
От исходной растровой картинки до быстрой интерактивной карты на вашем сайте — весь процесс разбит на 4 понятных шага:
- 1Загрузите исходное изображение или чертежНачните с изображения в формате PNG, JPEG, WebP, SVG или AVIF. Для сверхбольших чертежей загрузите гигапиксельное изображение — пирамида Deep Zoom создастся автоматически.
- 2Нарисуйте интерактивные метки, зоны и выноскиИспользуйте 11 инструментов Layerpin: ставьте метки, обводите полигоны, измеряйте расстояния и создавайте текстовые выноски прямо на холсте.
- 3Добавьте категории, медиафайлы и карточкиПрикрепляйте фотогалереи, кнопки действий, теги и форматированное описание Markdown. Группируйте метки по категориям с интерактивной легендой.
- 4Опубликуйте стабильный снимок и встройте на сайтПубликуйте неизменяемые снимки с кэшированием на глобальных серверах CDN без задержек. Скопируйте код адаптивного iframe с защитой домена или прямую ссылку.
Базовая архитектура и система координат
Чтобы карта оставалась точной на любых экранах, Layerpin построен на трех инженерных принципах:
В отличие от абсолютных пикселей, смещающихся при смене масштаба, Layerpin рассчитывает координаты от 0.00 до 100.00. Метки математически зафиксированы на нужных пикселях изображения на смартфоне, планшете или 4K-мониторе.
Все правки сохраняются в черновике. Экспериментируйте с координатами и стилями, не мешая пользователям, просматривающим опубликованную карту.
При нажатии кнопки «Опубликовать» создается статический снимок в сети CDN. Время отклика составляет менее 15 мс без нагрузки на базу данных.
Основные возможности платформы
Включает полный набор инструментов для создания, оформления, систематизации и публикации интерактивных карт:
Метка, Полигон, Прямоугольник, Круг, Линия и коннекторы, Кисть, Текст, Выноска, Линейка, Ластик и Выделение.
Подсказки при наведении, боковые панели и модальные окна с галереями фото, кнопками и разметкой Markdown.
Сортировка по цветным категориям, переключатели в легенде, поиск в реальном времени и персональные иконки.
Тайловая загрузка выводит чертежи размером 50 000 px с плавностью 60 FPS без перегрузки оперативной памяти устройства.
Адаптивный iframe с белым списком доменов, гарантирующий показ карты только на проверенных ресурсах.
Ускоряйте работу с более чем 25 горячими клавишами для быстрой смены инструментов и копирования стилей.
Генерируйте метки из текста и таблиц, обводите зоны, объединяйте категории и переводите карту на 16 языков со своим ключом API (BYOK).
Переводите метки, полигоны, фильтры и описания на 16 языков с моментальным переключением для посетителей.
Массовая загрузка данных из таблиц CSV, Excel или Numbers, а также экспорт резервной копии в CSV или JSON в любой момент.
Клонируйте карту целиком со всеми тайлами Deep Zoom, метками и фильтрами для безопасного тестирования изменений.
Создание первой карты
Готовы начать? Выполните эти простые шаги, чтобы опубликовать свою первую интерактивную карту:
- 1Откройте панель управления картамиПерейдите в панель управления и нажмите «Создать карту».
- 2Загрузите изображение или схемуВыберите файл плана или схему со своего компьютера (JPEG, PNG, WebP, SVG, AVIF).
- 3Разместите первые метки и зоныНажмите клавишу M (метка) или P (полигон) и кликните на изображение, чтобы добавить элемент.
- 4Опубликуйте картуНажмите «Опубликовать» в верхней панели. Карта готова и доступна для встраивания на сайт!
Встраивание на сайт и безопасность
Для встраивания карты Layerpin на сайт достаточно одной строки адаптивного кода iframe с поддержкой жестов пальцами и масштабирования:
<iframe
src="https://layerpin.com/m/YOUR_MAP_ID"
width="100%"
height="600"
style="border: 0; border-radius: 12px; overflow: hidden;"
allow="fullscreen"
loading="lazy"
></iframe>