Introduction to Layerpin
Transform static blueprints, floorplans, schematics, and illustrations into interactive, high-performance image maps with custom pins, vector shapes, deep zoom tiling, and secure website embeds.
What is Layerpin?
Layerpin is an interactive image map authoring platform designed specifically for custom visual media — floor plans, architectural blueprints, event venues, museum galleries, campus directories, store layouts, and product schematics.
Unlike traditional geographic mapping tools (such as Google Maps or Mapbox) that require physical Earth coordinates and satellite GIS data, Layerpin operates directly on your custom images with a sub-pixel normalized coordinate system, responsive touch controls, instant search, and CDN-cached edge delivery.
Mark property units, availability, square footage, tenant specifications, photo tours, and amenities directly on architectural layouts.
Guide visitors through trade show booths, stage schedules, emergency exits, concessions, and sponsor activations with search and category filters.
Turn exploded hardware diagrams, factory lines, and technical drawings into interactive documentation with hotspot popups and action links.
Inspect ultra-high-resolution aerial drone captures, museum paintings, and complex CAD schematics with multi-resolution Deep Zoom tiling.
4-Step Authoring Workflow
From raw raster graphics to a high-speed interactive map embedded on your website, Layerpin streamlines the process into four structured steps:
- 1Upload your source illustration or blueprintStart with any high-resolution image in PNG, JPEG, WebP, SVG, or AVIF format. For ultra-large CAD drawings or aerial maps, upload a gigapixel image to generate an automatic Deep Zoom pyramid.
- 2Draw interactive pins, zones, and calloutsUse Layerpin's 11 dedicated drawing tools to place customizable marker pins, trace boundary polygons, draw measurement scales, and add rich text callouts directly on the canvas.
- 3Enrich with categories, media, and detail cardsAttach rich media galleries, action buttons, tags, and Markdown descriptions to any item. Organize markers into custom colored categories with legend toggles and instant keyword search.
- 4Publish stable snapshots and embed anywherePublish an immutable, edge-cached snapshot with zero downtime. Copy your responsive iframe snippet with authorized origin security, or share a direct public link.
Core Architecture & Coordinate System
Building responsive image maps requires solving responsive scaling across devices. Layerpin is architected with three fundamental engineering principles:
Unlike absolute pixel coordinates that misalign whenever screen sizes change, Layerpin calculates all pin placements, polygon vertices, and line points using normalized map units from 0.00 to 100.00 map units. By decoupling coordinates from physical screen pixels and GPS latitude/longitude, annotations stay mathematically anchored to the exact visual pixel of your artwork whether viewed on a mobile screen, tablet, or 4K desktop monitor.
Edits made in the editor remain in your private draft mode. Adjust pin coordinates, restyle color borders, and test category filters without impacting visitors viewing your live maps.
Clicking “Publish” writes a frozen, read-only snapshot cached across global edge CDNs. Viewers experience sub-15ms initial loads with zero database contention.
Key Platform Features
Layerpin includes a comprehensive suite of purpose-built tools for authoring, styling, organizing, and delivering interactive visual maps:
Full palette featuring Marker, Polygon, Rectangle, Circle, Line & Connectors, Brush, Text, Callout, Measure, Eraser, and Select tools.
Deliver hover tooltips, side drawers, or full modal views complete with photo carousels, action buttons, tags, and formatted Markdown descriptions.
Group pins into colored categories with legend toggles, instant keyword search, item counters, and customizable icons.
Tiled image pyramid loader streams multi-resolution chunks on demand, rendering 50,000px blueprints smoothly at 60 FPS without memory exhaustion.
Responsive iframe embeds with domain authorization restrictions to ensure your interactive visuals are only displayed on approved websites.
Speed up map creation with 25+ keyboard hotkeys for instant tool selection, style copy/pasting, canvas contrast cycling, and zoom thresholds.
Generate markers from text or CSVs, trace boundary shapes, merge categories, and translate entire maps into 16 languages with BYOK privacy.
Translate pins, vector shapes, category filters, and media into 16 native languages with instant public language switching and graceful cascade fallbacks.
Batch upload markers via CSV, Excel, or Numbers spreadsheets with custom fields and categories, or backup map items anytime as CSV or JSON.
Clone entire maps with their high-resolution Deep Zoom pyramids, markers, shapes, and category filters to test draft updates safely before publishing.
Create Your First Map
Ready to build? Follow this quick start checklist to create and publish your first map:
- 1Open your Maps DashboardHead to your Maps Dashboard and click Create Map.
- 2Upload your image or schematicSelect a floor plan, blueprint, or graphic file from your computer (JPEG, PNG, WebP, SVG, AVIF).
- 3Plot your first pins and shapesPress M for the Marker tool or P for the Polygon tool. Click anywhere on your image canvas to place items.
- 4Publish your mapClick Publish in the top header. Your interactive map is now live, CDN-accelerated, and ready for embedding!
Website Embedding & Security
Embedding your Layerpin map on any website requires a single responsive iframe snippet. It automatically supports mobile touch gestures, pinch-to-zoom, and responsive container resizing:
<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>