# Layerpin product and guides > Public product facts, use cases, help content, and guides for Layerpin interactive image maps. ## Supported languages Layerpin supports 15 languages across the public product and marketing pages. English is the canonical default. Each localized version provides native translations for home, pricing, use cases, contact, and help: - **English** (English): https://layerpin.com/ - **German** (Deutsch): https://layerpin.com/de - **French** (Français): https://layerpin.com/fr - **Italian** (Italiano): https://layerpin.com/it - **Spanish** (Español): https://layerpin.com/es - **Portuguese** (Português): https://layerpin.com/pt - **Polish** (Polski): https://layerpin.com/pl - **Russian** (Русский): https://layerpin.com/ru - **Turkish** (Türkçe): https://layerpin.com/tr - **Indonesian** (Bahasa Indonesia): https://layerpin.com/id - **Vietnamese** (Tiếng Việt): https://layerpin.com/vi - **Thai** (ไทย): https://layerpin.com/th - **Chinese Simplified** (简体中文): https://layerpin.com/zh - **Japanese** (日本語): https://layerpin.com/ja - **Korean** (한국어): https://layerpin.com/ko ## Product overview URL: https://layerpin.com/ Layerpin turns static images into interactive maps. Upload an image, add markers and shapes, preview the viewer experience, then publish a public link or authorized website embed. ### Workflow 1. **Upload the image:** Start with a floorplan, site plan, diagram, venue image, product shot, or store layout. 2. **Add the interactive layer:** Place markers and draw shapes directly over the source image with precise editor controls. 3. **Preview the public view:** Check how viewers will explore content, media, search, and map controls before publishing. 4. **Publish or embed:** Share a public map URL or install the generated embed script on an authorized website. ### Capabilities - **Interactive markers:** Place pins with names, notes, tags, image galleries, custom buttons, and detail cards. - **Precise shapes:** Draw polygons, rectangles, circles, lines, arrows, text, brush paths, and invisible hotspots. - **Searchable content:** Organize map items with tags, categories, and rich content so viewers can find the right place fast. - **Public publishing:** Keep drafts private, publish a stable read-only snapshot, and update it only when ready. - **Website embeds:** Authorize site origins, preview device sizes, and install a hosted script or iframe. - **Large image support:** Use higher-resolution floorplans, site plans, and diagrams on supported plans without slowing down the public map. ### Common questions #### What can I build with Layerpin? You can turn static images such as floorplans, venue maps, diagrams, store layouts, and site plans into interactive maps with markers, shapes, media, and public sharing. #### Can I edit a map before paying? Yes. Private editing is available before publishing. When you are ready for public links, website embeds, public delivery, and usage tracking, choose a paid plan and complete secure checkout. #### How are paid plans billed? Paid plans use secure automatic billing. Checkout shows the transaction currency, applicable tax, discounts, available payment methods, renewal interval, and final total before you confirm. #### Are draft maps public? No. Draft maps stay private to the owner. Public viewers see the published snapshot, so you control when edits become visible. #### Can I embed a public map on any site? Embeds use configured allowed origins. Public map links can be opened directly, while third-party website embeds must be authorized for that map. #### Does Layerpin support large floorplans? Normal image maps work across plans. Higher-resolution floorplans and diagrams are available on supported paid plans for maps that need more detail. ## Live Editor URL: https://layerpin.com/editor Layerpin provides a browser-based Live Editor sandbox where anyone can test image mapping with zero login required. Drop blueprints, architectural floor plans, or venue maps (up to 25MB), place custom clickable markers, trace vector zones, configure rich detail cards with photo galleries and action buttons, and preview living maps in real time. ## Interactive map use cases URL: https://layerpin.com/usecases ### Real Estate & Floor Plans Highlight unit availability, specs, photo galleries, and rental rates directly on floor plans. Typical features: Unit availability, Photo galleries, Room specs, Direct leasing CTAs. ### Parks, Campuses & Trails Guide visitors through walking trails, university campuses, amenities, and landmark attractions. Typical features: Landmark pins, Walking routes, Visitor amenities, Points of interest. ### Event & Exhibition Halls Reassign vendor booths, update stage schedules, and direct attendees across expo halls. Typical features: Exhibitor directory, Booth availability, Stage schedules, Wayfinding. ### Retail & Store Guides Turn store layouts into searchable guides for departments, seasonal displays, and promotional zones. Typical features: Department search, Product displays, Promotions, Aisle locations. ### Product Diagrams & Schematics Annotate hardware components, system architecture diagrams, and interactive part catalogs. Typical features: Hotspot shapes, Component specs, Documentation links, Exploded views. ### Resorts & Hospitality Map guest villas, dining venues, beach activities, and amenity schedules across vacation properties. Typical features: Villa availability, Dining & bars, Activity schedules, Guest amenities. ### Festivals & Sponsor Villages Map sponsor villages, stage lineups, food & beverage zones, and attendee navigation across festival grounds. Typical features: Sponsor village, Stage lineups, Food & beverage, Attendee search. ## Pricing URL: https://layerpin.com/pricing Prices use USD as the base currency. Checkout shows applicable taxes, discounts, transaction currency, and the final total before purchase. ### Basic Monthly price: USD 15. Yearly billing costs ten monthly payments. Maps: 5; published maps: 3. Per map: 100 markers, 100 shapes, 250 MB media storage. Public delivery: 5,000 included monthly views; USD 0.002 per extra view. Embed origins per map: 10. ### Pro Monthly price: USD 39. Yearly billing costs ten monthly payments. Maps: 25; published maps: 15. Per map: 500 markers, 300 shapes, 1 GB media storage. Public delivery: 25,000 included monthly views; USD 0.002 per extra view. Embed origins per map: 25. ### Premium Monthly price: USD 99. Yearly billing costs ten monthly payments. Maps: 100; published maps: 50. Per map: 2000 markers, 750 shapes, 2 GB media storage. Public delivery: 100,000 included monthly views; USD 0.002 per extra view. Embed origins per map: 50. ### Pricing questions #### What counts as a billable view? A view is counted when someone opens a published map link or an approved website embed. If the same visitor refreshes or reopens the same map within 30 minutes, it normally still counts as one view. Opening a different map counts separately. Private editing does not count, and a large map does not use extra views just because someone zooms in or explores more detail. #### Can I publish without a paid plan? Private maps can be created first, but public sharing and website embeds require an active paid map plan. #### What happens if a plan expires? Draft data remains in the editor, but public serving and embeds can be blocked until a paid plan is active again. #### Can I embed the same map on multiple websites? Yes, according to the plan's allowed origin limit. Premium also supports wildcard subdomain origins. #### Do yearly plans exist? Yes. Monthly and yearly subscriptions renew automatically until canceled. Yearly billing costs the equivalent of ten monthly payments, so it includes two months compared with paying monthly. #### When does a paid plan become active? A plan activates automatically after checkout confirms the transaction. This normally happens immediately; if confirmation is delayed, you can keep editing privately while Layerpin synchronizes the payment. #### Can I change plans before my current period ends? Yes. Plan changes requested from billing take effect immediately. The change preview shows any prorated credit for unused time, applicable discounts, tax, and the amount due before you confirm. #### Will public maps stop when I go over included views? Extra views do not stop your maps and are billed automatically. If an automatic payment fails, your maps stay available for seven days while you update your payment method. They are suspended only if the payment is still unpaid after that time and return after payment succeeds. #### Can the extra-view amount change? Yes. The estimate changes as extra views from public links and embeds are recorded. We charge automatically when unpaid extra usage reaches USD 20 and settle the remainder after each monthly usage period. Very small balances carry forward. #### How are payments, taxes, and currencies handled? Prices on this page use USD as the base currency. Secure checkout shows the transaction currency, applicable taxes, discounts, available payment methods, and final total before purchase. #### How do I cancel or update payment details? Use Billing in your Layerpin dashboard. You can cancel there or open the secure billing portal to update payment details, view payments, and download invoices. Cancellation takes effect at the end of the current paid period, and access continues until then. #### Can I request a refund? Refund eligibility follows our Refund Policy and applicable consumer law. Canceling a subscription stops future renewals but does not automatically refund unused time. #### Do draft edits affect published maps? No. Saving keeps edits private. Public links and embeds continue serving the last published version until you publish again. ## Help URL: https://layerpin.com/help ### Getting started 1. Create a map from the dashboard. 2. Upload a base image such as a floorplan, layout, or diagram. 3. Add markers and shapes in the editor. 4. Save changes before leaving the editor. ### Publishing 1. Draft maps remain private while editing. 2. Publishing creates a read-only snapshot for public viewers. 3. Republish when saved edits should become visible. 4. Public sharing requires an active paid map plan. ### Embedding 1. Configure allowed website origins before installing an embed. 2. Preview mobile, tablet, and desktop sizes from the embed page. 3. Use the hosted script or iframe code generated for the map. 4. Public URLs and website embeds are controlled separately. ### Billing 1. Paid plans unlock public links, embeds, and included monthly views. 2. Private editor usage is not counted as public map traffic. 3. Public links and embeds share the monthly view allowance. 4. Secure checkout handles recurring payments, applicable taxes, and invoices. 5. Monthly and yearly plans renew automatically until canceled. 6. Cancel from Billing and keep plan access through the current paid period. ## Contact URL: https://layerpin.com/contact - Product support: support@layerpin.com - Billing and plans: billing@layerpin.com - Security and abuse: security@layerpin.com # Layerpin guides ## How to Embed an Interactive Map in Your Website Builder URL: https://layerpin.com/blog/embed-interactive-map-website-builders Published: 2026-07-31 A step-by-step guide to installing a Layerpin interactive map in WordPress, Webflow, Wix, Squarespace, Framer, or Ghost. ### WordPress Embed responsive interactive maps into WordPress using Gutenberg Custom HTML blocks, Classic Editor, Elementor, or Divi HTML widgets. Method: Installation script Documentation: https://wordpress.com/support/wordpress-editor/blocks/custom-html-block/ 1. Open the WordPress page or post in your editor where the map should appear. 2. Add a Custom HTML block at your chosen layout position. 3. Paste the Layerpin installation script snippet directly into the block. 4. Preview the page in desktop and mobile view, then publish or update. ### Webflow Embed interactive maps in Webflow Designer using the Custom Code Embed element with full support for fluid responsive containers. Method: Installation script Documentation: https://help.webflow.com/hc/en-us/articles/33961332238611-Custom-code-embed 1. Open your page in Webflow Designer. 2. Add a Code Embed element inside your designated section or div block. 3. Paste the Layerpin installation script snippet and click Save & Close. 4. Preview the page, test responsive breakpoints, and publish your Webflow site. ### Wix Embed full-width or fixed-dimension interactive maps in Wix Studio and Wix Editor using the HTML Embed element. Method: Iframe code Documentation: https://support.wix.com/en/article/wix-editor-embedding-a-site-or-a-widget 1. In the Wix Editor, click Add Elements (+), then select Embed Code. 2. Add an Embed HTML element to your canvas and select Enter Code. 3. Paste the iframe embed code from Layerpin and adjust element dimensions. 4. Verify desktop and mobile canvas layouts, then publish your site. ### Squarespace Install responsive interactive maps into Squarespace 7.1 and Fluid Engine sections using Code blocks. Method: Iframe code Documentation: https://support.squarespace.com/hc/en-us/articles/206543167-Code-blocks 1. Edit your Squarespace page and add a Code block where you want the map. 2. Set the Code block display mode to HTML and disable Display Source. 3. Paste the iframe embed code from Layerpin and save your section. 4. Check layout responsiveness across screen widths, then save and publish. ### Framer Add interactive maps directly into Framer canvases using the native Embed component with fluid responsiveness. Method: Installation script Documentation: https://www.framer.com/help/articles/how-to-add-an-iframe-or-embed-script/ 1. Open your project in Framer, click Insert (+), and search for the Embed component. 2. Place the Embed component onto your canvas and set width/height to 100% or fixed bounds. 3. Paste the Layerpin installation script snippet into the HTML field. 4. Preview the canvas interactively, then publish your Framer project. ### Ghost Insert responsive interactive maps into Ghost CMS publications, member pages, and posts using HTML cards. Method: Installation script or iframe Documentation: https://ghost.org/help/cards/ 1. Open your post or page in the Ghost editor. 2. Click the (+) icon or type /html to insert an HTML card. 3. Paste the Layerpin installation script or iframe code snippet. 4. Preview the published page layout, then publish or update your post. ## Meet Pinny: your AI assistant for building better maps URL: https://layerpin.com/blog/build-maps-with-pinny-ai-assistant Published: 2026-10-06 Category: Workflow Turn reference files and ideas into reviewable map content. See how Pinny helps with items, filters, translations, and your account. ### A helping hand for your account and your map Pinny is Layerpin’s AI assistant for paid accounts. Open it from the dashboard to find maps, summarize a map, or check plan capacity. In the map editor, the conversation focuses on that map. Try: **“Show my recently updated maps”** or **“How much of my plan have I used?”** ### Turn your ideas and files into a first draft Describe the markers or shapes you need, or attach a CSV, JSON, Markdown, or text reference file in map chat. Pinny can prepare names, descriptions, tags, fields, and positions for review. Try: **“Create markers from this room list, keeping room numbers unchanged.”** A model that accepts images can inspect a lightweight map preview to suggest positions for visible rooms or landmarks. Outlines are approximate: always check them against your image. ### Organize content and reach more people Ask Pinny to audit the map, prepare item edits, organize tags and fields, or suggest and merge filters. It checks supported settings, item identities, and plan limits. For translation, enable target map languages first, then ask for complete content: names, descriptions, tags, fields, buttons, filters, and media wording. Try: **“Translate the filters and item content into French, keeping addresses unchanged.”** Read the [map language guide](/blog/translate-interactive-maps-for-a-global-audience) for the visitor experience. ### You stay in control of every change Pinny prepares proposals; it does not silently publish your map. Review the actual records, rather than relying only on the answer. Proposals and conversations are saved, so you can return to them later. Connect your own provider key using the [setup guide](/blog/set-up-api-keys-for-pinny). Choose a model and its supported thinking or web search options beside the message input. Your provider charges your API account separately. Open Token usage to review recorded tokens and estimated costs; estimates are not invoices. Steps: 1. Review the proposal and adjust supported values before applying it. 2. Apply it to your draft and save. Existing validation still checks the changes. 3. Preview the result, then publish when ready. Public links keep showing the previous published version until you publish again. ## Set up your API key and start working with Pinny URL: https://layerpin.com/blog/set-up-api-keys-for-pinny Published: 2026-10-06 Category: Guide Connect a supported AI provider, choose a model, and make your first reviewed map update with Pinny. ### Start with a paid plan and a provider API key Pinny requires an eligible paid Layerpin plan and your own provider API key. Trial accounts must upgrade to send messages. Supported providers are OpenAI, Anthropic Claude, Google Gemini API, Google Vertex AI, xAI (Grok), Mistral AI, and DeepSeek. Your provider account needs API access and any required credits. A consumer chat subscription is not an API key. Choose a provider you already use, or compare the approximate input and output rates in Pinny’s model picker. The API keys dialog links to each provider’s key page. Gemini API and Vertex use separate credentials: for Vertex, use an **Express Mode API key**, not a service-account file. ### Connect your key in Pinny Open Pinny from the dashboard or map editor. On a narrow panel, header actions are grouped under **More chat actions**. Never paste your secret key into a message, a map field, or a screenshot. Steps: 1. Open More chat actions → API keys, then select your provider. 2. Paste the key in the password field and save it. The saved list shows a masked key. 3. Choose a model for that provider beside the message input. Its key must match the provider you selected. 4. Open Model options to choose supported thinking levels or enable web search. More thinking and searches can add provider costs. ### Make your first request and review the result Start with **“How much plan capacity have I used?”** in dashboard chat. For map work, open a map and ask **“Suggest filters for these rooms”** or attach a reference file. Image-based placement needs a model marked **Images**; text-only models can work with explicit coordinates. Check the proposal, apply it, and save the draft. Publish separately after previewing. The [Pinny guide](/blog/build-maps-with-pinny-ai-assistant) gives more ideas. ### Manage your keys, history, and usage Keys are encrypted before storage and used by Layerpin’s server for your provider requests. Replace or remove them in API keys; revoke compromised keys with the provider. Saving a key does not test it: the provider checks it when you send a message. If a request fails, follow the specific key, model access, quota, or rate-limit message. Use Chat history to return to conversations and Token usage to explore a date range and estimated provider costs. Deleting a chat does not delete its usage records. Provider invoices can differ because of caching, images, search, region, or discounts. Your Layerpin plan and provider API charges are separate. ## How to Translate Your Interactive Map and Reach More People URL: https://layerpin.com/blog/translate-interactive-maps-for-a-global-audience Published: 2026-09-15 Category: Guide Make your map welcoming in more languages. Learn how to translate labels, info cards, and filters in Layerpin, review each language, and publish one map for a wider audience. ### Help every visitor feel that your map was made for them A map can show someone exactly where to go, but the words around it explain why they should go there. A visitor might recognize a building or a room without understanding its opening hours, accessibility information, or booking button. Translating those details helps them move from looking at your map to taking their next step. Think of an international guest finding the entrance to your resort, a family comparing homes from another country, or an attendee choosing a session at your event. Clear information in a familiar language makes your map more welcoming and gives people fewer reasons to stop and ask for help. With Layerpin, you can keep **one map with the same locations and shapes**, then add translated content for different audiences. Visitors choose a language instead of navigating separate copies of your map. ### Start with the languages your audience actually needs Start with the people who already visit your venue, website, or community. Which languages appear in customer enquiries, event registrations, or conversations with your team? One carefully reviewed translation is more useful than several unfinished versions. Multilingual maps are available on paid plans. Basic supports **2 languages per map**, Pro supports **5**, and Premium supports **all available map languages**. These allowances include the original language. Trial maps use one original language without translation settings or a visitor language picker. Compare the current limits on the [pricing page](/pricing). When creating a map on a paid plan, choose its **Original content language**. This describes the language you will write the original content in; it does not translate your writing. Choose carefully because the original language cannot be changed after the map is created. ### Add languages and set up the visitor picker Open your map in the editor and go to **Customize → View → Map Language**. You can also open **Translate** in the sidebar and use its **Languages** button to reach the language settings. Adding a language makes it available for translation; it does not automatically translate the map. Give each language time for writing and review before inviting visitors to use it. Steps: 1. Add the languages you want to support, within your plan’s allowance. The original language stays available. 2. Drag the languages into the order you want visitors to see in the picker. Put your most relevant languages near the top. 3. Choose a default language as the fallback for visitors. A supported language requested in the link or chosen by the visitor can take priority. 4. Enable Show Language Picker. With at least two languages configured, visitors can choose a language on read-only, published, and embedded maps. ### Translate the whole experience, not just the item names Open **Translate** and select a target language. The panel groups content into **Items**, **Filters**, and **Details**. Work through each group so the map title, the choices visitors make, and the information they open tell the same story. For items, review names, descriptions, text shapes, tags, field titles and values, and button labels where those fields exist. Include attached media names, descriptions, alternative text, and tags. For filters, translate the group names, descriptions, option names, and option descriptions. Use Details for the map name and description. For example, translating a room name is only the start. A visitor may also need to understand ‘Seats 12’, ‘Step-free access’, and ‘Book this room’. Keep room numbers, addresses, product codes, and proper names unchanged when translating them would make the location harder to identify. Missing translations fall back to the original content. This lets you work gradually, but check for unexpected language mixing before publishing. **Text painted into the map image itself is not translated.** Use editable labels or text shapes for wording that needs to change with the visitor’s language. ### Use Pinny for a first draft, then review the details If Pinny is available for your account and you have configured a supported provider key, you can ask it to prepare translations. Try: ‘Translate all filters and item content into French. Include tags, fields, buttons, and media descriptions. Keep room numbers and proper names unchanged.’ Your model provider bills your API key separately. Pinny prepares a proposal for you to review. When a response includes several languages, use the language badges on the card to change the preview, or open the review dialog and switch languages there. Check the actual records and fields instead of relying only on the assistant’s summary. Apply one language or all the proposed languages to your draft after reviewing them. AI can help with the first pass, but ask a fluent speaker to check important directions, safety information, accessibility details, and calls to action. Publishing remains a separate step. ### Review each language as a visitor would Use the editor’s language selector to preview a translated version. Selecting a language alone does not change or save your content. Return to the original language when you want to review the original wording. Check the full journey: open the map, choose a filter, select a location, read its info card, and use its button. Make sure every translated term leads visitors to the same place and action as the original. Preview on a phone too; translated labels can be much longer than their originals. A simple shared glossary helps you stay consistent. Decide how your team translates recurring terms such as ‘Entrance’, ‘Reception’, ‘Available’, and ‘Reserve’. When original details change later, review the corresponding translations as part of the same update. ### Save, publish, and share one map with more people Save your translations, then **Publish** when the map is ready. Saving updates the private draft. Public links and embeds continue to show the last published version until you publish again. The [publishing guide](/blog/publish-updates-with-confidence) explains this workflow in more detail. Share your public map link or place the map on an approved website. Visitors can use the language picker in either experience. For a campaign aimed at a particular audience, you can request a supported language in the public link with `?lang=fr` for French, or `&lang=fr` if the link already has a query string. The language must be enabled for that map. You do not need to reach every language on your first release. Start with one audience, make their experience clear, and expand as you learn. Whether you are welcoming guests from across the street or across the world, the goal is the same: help people understand your place and feel confident taking their next step. ## How to Use Interactive Map Filters to Help People Find What Matters URL: https://layerpin.com/blog/use-interactive-map-filters Published: 2026-08-11 Category: Workflow Plan useful filter groups, assign map items efficiently, and turn a crowded interactive map into a focused decision-making tool that drives conversions. ### Start with the decisions your visitors need to make A great interactive map is not just a digital drawing-it is an interactive decision engine. When a prospective homebuyer opens a master-planned community map, an attendee navigates a 200-booth convention hall, or an employee locates a hot desk in a corporate campus, they arrive with immediate, urgent questions. Before creating filter categories in Layerpin, map out the exact decision paths of your audience. A real estate buyer asks: 'Are there any 3-bedroom units available under my budget on the 4th floor?' A conference attendee asks: 'Where are the AI breakout sessions happening right now that have wheelchair accessibility?' A festival guest asks: 'Where can I grab vegan food near the main stage?' Translate each core question into a dedicated filter dimension such as Property Type, Availability, Floor Level, Track/Theme, or Accessibility. Supporting details that do not directly narrow down the search (such as parking permit numbers or architect names) belong in the interactive info card instead of cluttering your filter bar. Steps: 1. Identify the top 3-5 criteria your visitors use to evaluate and choose locations. 2. Convert each core question into an independent filter dimension. 3. Keep non-filtering reference details inside info cards to maintain a clean interface. ### Choose single or multiple selection deliberately Layerpin supports both single-select (radio) and multi-select (checkbox) filtering models. Selecting the right model for each dimension prevents visitor confusion and ensures logical search results. Use single-selection when an item can strictly belong to one state at a time. For example, an apartment is either Available, Under Contract, or Sold. A meeting room belongs to Floor 1, Floor 2, or Floor 3. Radio options keep the user interface straightforward and eliminate contradictory filter states. Use multiple-selection when items frequently possess overlapping attributes. Amenities (WiFi, Wheelchair Access, Outdoor Seating, Power Outlets), dietary options (Vegan, Gluten-Free, Halal), or multi-disciplinary conference tags should always be multi-select. When visitors pick multiple tags within the same filter, Layerpin uses an 'OR' logic to broaden options; when picking across different filters, it applies 'AND' logic to narrow choices down with precision. Steps: 1. Set mutually exclusive states (Availability, Floor, Phase) to Single Select. 2. Set tags and attributes (Amenities, Dietary, Audiences) to Multiple Select. 3. Test filter combinations to ensure resulting selections feel intuitive and natural. ### Use visual styling channels for instant visual recognition Filters in Layerpin do more than hide and show markers-they can dynamically control visual styling channels across your map, including Marker Pin Colors, Shape Fill/Stroke Colors, and Item Indicator Badges. Connect your highest-priority status filter to your primary visual channel. For real estate developments, letting 'Availability' drive pin colors (e.g., emerald green for Available, amber for Reserved, subtle slate for Sold) enables prospective buyers to identify open lots at a glance. For large campuses or festival grounds, map the 'Zone' or 'Building' filter to shape fill colors. This preserves immediate spatial context while visitors filter down individual booths or points of interest. Steps: 1. Open Visual Styling Sources under the Customize menu. 2. Assign your most critical operational filter (such as Availability or Zone) to Marker Pin Color or Shape Fill. 3. Ensure strong color contrast between marker pins and your background map image. 4. Preview both light and dark areas of your map to guarantee maximum legibility. ### Share filtered deep-links for sales pitches and campaigns One useful sharing feature in Layerpin is deep-linkable filter state. Every filter selection, active zoom position, and opened info card dynamically updates the browser URL in a clean, shareable format. Sales reps can send a client a direct link that opens the map pre-filtered to 'Available 2-Bedroom Penthouses with Sea View', with the premier unit's info card already open. Event organizers can link sponsors directly to their assigned exhibition booth. Operations teams can bookmark 'Overdue Maintenance' equipment views. When the recipient opens the link, Layerpin instantly restores the exact filter criteria and camera focus, eliminating the friction of manual searching. Explore multi-dimensional filtering in action on the [River Beats Festival live demo](https://www.layerpin.com/m/river-beats-festival-demo) or test location categorization on the [Central Park NYC live demo](https://www.layerpin.com/m/central-park-nyc-demo). Steps: 1. Apply your desired filter criteria and select the focal marker or zone. 2. Click 'Copy Link' from the public or preview viewer. 3. Embed the link in email campaigns, client proposals, or QR codes on physical print materials. ### Maintain your filter system as your project evolves Maps are living documents. As units sell, booth vendors change, or facilities undergo renovations, keep your filter architecture centralized in Layerpin's Filters panel. Avoid creating ad-hoc filter values with duplicate meanings (e.g., having both 'Apartments' and 'Apt Units'). Establish standardized naming conventions across your team. When updating large maps with dozens of markers, assign one filter dimension across all items in batch before moving to the next. Regularly review your visitor analytics and user feedback. If visitors are frequently asking questions about a specific attribute that is buried inside text descriptions, elevate that attribute into a dedicated filter to streamline user discovery. ## How to Create an Interactive Floor Plan URL: https://layerpin.com/blog/create-interactive-floor-plan Published: 2026-08-10 Category: Getting started Turn static architectural blueprints, CAD drawings, and office layouts into clickable, branded interactive floor plans with searchable spaces, rich media cards, and clear availability details. ### Prepare a high-clarity background plan The foundation of an outstanding interactive floor plan is a crisp, legible source image. Whether you are working with an architectural CAD export, Revit render, PDF blueprint, or high-resolution graphic site plan, export your drawing at 2000px to 6000px width. Strip away unnecessary engineering annotations, dimension lines, and construction hatchings that clutter digital screens. Focus on clean room perimeters, clearly marked entryways, staircases, elevators, and window orientations. Use high-contrast color schemes so walls and navigable hallways stand out immediately. Upload your floor plan directly into Layerpin. The platform optimizes and prepares the file for responsive deep zoom, allowing browsers to request a suitable resolution for the visitor's screen and zoom level. Steps: 1. Export your floor plan as a clean PNG, JPG, or SVG without extraneous construction lines. 2. Ensure text labels on the base drawing are readable at standard zoom levels. 3. Upload the image to Layerpin and set your default starting view to the building entrance or focal lobby. ### Define rooms and zones with interactive shapes For enclosed spaces such as offices, meeting rooms, retail units, or exhibition booths, use Layerpin's polygon and rectangle shape tools rather than simple pins. Shapes highlight the physical footprint of the area, making spatial boundaries unmistakable. Apply semi-transparent fill colors (e.g., 15-25% opacity) with a solid 2px border. This allows the architectural details beneath-such as door swings, seating arrangements, and room numbers-to remain fully visible while still communicating selection states. Configure distinct hover and active states. When a visitor hovers over Room 302, a subtle glow or fill brightening provides immediate tactile feedback, signaling that the space is clickable. Steps: 1. Select the Polygon tool to trace irregular room layouts or Rectangle tool for standard spaces. 2. Set default fill opacity between 15% and 25% with contrasting border lines. 3. Adjust hover and active highlight colors to match your brand palette. ### Add pinpoint markers for key amenities and points of interest While shapes define rooms, pin markers are ideal for individual destinations: reception desks, restrooms, emergency exits, coffee bars, elevators, and AV equipment. Layerpin allows you to customize pin icons, marker styles, and badge labels. Use universally recognized icons (e.g., coffee cup for breakrooms, elevator icon for lifts) so visitors can locate critical amenities without reading text. Organize markers into functional categories so visitors can toggle amenity layers on and off as needed. Steps: 1. Place pin markers on specific amenities, utilities, and access points. 2. Assign intuitive icons and distinct category colors to each marker group. 3. Use custom text labels for named destinations such as 'Executive Boardroom' or 'Customer Service'. ### Structure info cards for engagement and next actions When a visitor clicks on a room or booth, the info card should answer their next questions immediately. Include high-quality photos of the interior, square footage / capacity, available tech amenities, and current occupancy status. Every card should feature a prominent call-to-action button: 'Schedule a Tour', 'Reserve Desk', 'Book Meeting Room', or 'Contact Leasing Agent'. Connect these buttons directly to your Calendly, booking engine, or CRM form. On mobile screens, Layerpin automatically adapts info cards into an ergonomic bottom sheet drawer, ensuring one-handed usability for visitors walking through the physical space. Steps: 1. Add room photos, virtual 3D tour links (Matterport/YouTube), and structured dimension fields. 2. Include a clear primary action button linking to booking or inquiry workflows. 3. Test the card presentation in mobile preview to verify quick readability. ### Embed and distribute your floor plan anywhere Once your interactive floor plan is ready, embedding it onto your website takes less than two minutes. Copy Layerpin's lightweight responsive embed script or iframe snippet and paste it into WordPress, Webflow, Squarespace, Wix, Framer, or custom Next.js apps. For physical kiosks and on-site signage, generate QR codes that link directly to specific rooms or the full interactive mobile view. As room assignments or leasing statuses change, update the map in Layerpin and publish-your live embeds then use the newly published version without requiring website code changes. Explore how deep zoom and interactive unit cards look in real life on the [Riverside Garden City live demo](https://www.layerpin.com/m/riverside-garden-city-demo). ## Markers vs. Shapes: Choosing the Right Map Item URL: https://layerpin.com/blog/markers-vs-shapes-interactive-maps Published: 2026-08-09 Category: Map design Master the strategic use of pins, polygons, rectangles, polylines, and labels to create clean, intuitive interactive maps that communicate spatial hierarchy effortlessly. ### The core rule: Points for destinations, areas for territory The most common mistake on interactive maps is overusing pin markers for large geographical zones, or conversely, drawing tiny shapes for pinpoint objects. Choosing the correct map element fundamentally determines how quickly visitors digest your layout. Use **Marker Pins** when the location is a single discrete point: an entrance gate, an information kiosk, a scenic viewpoint, a piece of machinery, or a specific desk. A marker pin answers the question: *'Where exactly is this one thing located?'* Use **Shapes (Polygons & Rectangles)** when the location occupies a measurable physical area: a retail store lot, a residential land parcel, an office wing, a parking lot, or a protected park zone. A shape answers the question: *'What are the boundaries, footprint, and scope of this space?'* Steps: 1. Evaluate whether the visitor needs to find a pinpoint coordinate or understand a bounded area. 2. Default to marker pins for points of interest under 5% of viewport area. 3. Default to polygons or rectangles for rooms, buildings, land lots, and zones. ### When to use Polylines, Connectors, and Custom Lines Beyond pins and shapes, Layerpin provides specialized vector line tools: Polylines, Arrows, and Callout Connectors. Use **Polylines** for continuous linear features: walking trails, marathon routes, utility pipelines, guided tour paths, and transit lines. Polylines support custom stroke styles, dashes, arrows, and multi-segment vertex editing. Use **Connectors** when a map area is too dense to fit labels directly over the item. A leader line connects an off-center title card or icon to the precise coordinate without obscuring underlying architectural artwork. Steps: 1. Select the Polyline tool for paths, boundaries, routes, and utility channels. 2. Use Callout Connectors for crowded areas to offset labels cleanly. 3. Adjust line thickness (2px to 6px) and dash patterns to distinguish different path types (e.g., solid for primary corridors, dashed for emergency egress). ### Mastering Shape styling: Opacity, borders, and contrast A poorly styled shape obscures the map drawing beneath it. A well-styled shape enhances the drawing by providing a clear color tint without hiding underlying labels or textures. Set default shape fill opacity between 15% and 30%. This subtle wash establishes territory while keeping architectural details readable. Pair it with a crisp 1.5px to 2.5px solid stroke border in a contrasting shade. On hover and selection, boost opacity to 40-50% and thicken the border to provide clear interactive feedback. Layerpin allows you to set custom color tokens that align directly with your brand guidelines. Steps: 1. Keep base fill opacity low (15-25%) so background maps remain fully visible. 2. Use distinct stroke colors that pop against both light and dark background imagery. 3. Configure prominent hover and selected states for seamless interactive feedback. ### Combining Markers and Shapes in harmony High-end interactive maps often combine shapes and markers into cohesive composite systems. For example, draw a polygon around an entire shopping mall wing, and place specific category pins inside it for anchor stores and emergency exits. Establish a consistent interaction rule: if clicking a polygon opens its leasing info card, clicking child pins inside it should open specific merchant cards. Ensure child pins have higher z-index stacking so they remain easily clickable inside polygon perimeters. Use Layerpin's layer management panel to reorder elements and lock background shapes, preventing accidental misclicks during editing. See how polygonal booth shapes and area pins coexist seamlessly on the [River Beats Festival live demo](https://www.layerpin.com/m/river-beats-festival-demo). ## Design Map Info Cards That Help Visitors Decide URL: https://layerpin.com/blog/design-map-info-cards Published: 2026-08-08 Category: Map design Structure high-converting info cards with compelling media, structured data badges, custom action buttons, and frictionless mobile drawer UX. ### The 3-second rule for interactive map cards When a visitor clicks on a map pin or building shape, you have approximately three seconds to orient them, present key details, and offer a logical next step. Cluttered cards packed with wall-to-wall body copy create cognitive fatigue and increase bounce rates. Structure your info card content in a strict visual hierarchy: Title & Category Badge at the top, High-Resolution Hero Visual, Key Metric Badges (Price, Size, Availability), a 2-3 sentence summary, and a high-contrast Action Button. Keep the card title concise and descriptive: 'Suite 402 - Ocean View Corner Unit' or 'Main Stage - Hall A', rather than cryptic database IDs like 'UNIT_B4_V2'. Steps: 1. Use descriptive, human-readable card titles. 2. Place category badges and status tags immediately adjacent to the title. 3. Limit initial body copy to the 2-3 most compelling selling points. ### Use media with purpose: Photography, galleries, and 3D tours High-quality imagery can help visitors understand a location before taking action. Include a 16:9 hero image that captures the real environment: the view from a balcony, the interior fit-out of an office, or the facade of an exhibition booth. Take advantage of Layerpin's media library to attach supplementary image galleries. Visitors can click through secondary photos or inspect full-screen high-resolution views without losing their place on the map. Embed Matterport 3D virtual tours, YouTube video walkthroughs, or architectural 360-renders directly into the card body to deliver an immersive experience right on your site. Steps: 1. Upload crisp 16:9 cover photos optimized for fast web delivery. 2. Attach gallery images for secondary perspectives (floor plans, amenities, views). 3. Embed 3D walkthroughs or video links for high-value listings and spaces. ### Highlight key attributes with structured field badges Visitors scan maps looking for specific numbers: square footage, price per month, capacity, operating hours, or contact extension. Burying these numbers in a paragraph forces users to read slowly. Use Layerpin's structured metadata fields to display these metrics as visual badge pills: `📐 1,450 sq ft`, `👥 Capacity: 40`, `⚡ 3-Phase Power`, `💰 $3,200/mo`. Visual badges make comparative shopping effortless: visitors can click between multiple units or booths and compare key statistics in seconds. Steps: 1. Extract numerical specs (price, area, capacity, dimensions) into structured fields. 2. Use concise icons alongside metric values for rapid scanning. 3. Maintain consistent unit measurements across all items on the map. ### Design high-converting call-to-action buttons Every info card should serve a business goal: capturing a lead, scheduling a viewing, reserving a seat, or routing directions. Never leave a visitor at a dead end. Include a prominent primary action button with direct, action-oriented copy: 'Book a Private Tour', 'Download Spec Sheet (PDF)', 'Inquire for Pricing', or 'Reserve This Space'. Layerpin allows you to link buttons to external booking URLs, mailto links, phone dialers, or triggering custom modal workflows. Steps: 1. Add a primary CTA button to every actionable map item. 2. Use specific action verbs ('Book Tour' instead of 'Click Here'). 3. Test all external links and booking forms to ensure zero broken paths. ### Optimize for the mobile bottom sheet drawer On mobile devices, a floating card hovering over a map covers too much screen real estate and makes map panning difficult. Layerpin solves this with an adaptive bottom sheet drawer. When tapped on a smartphone, the card smoothly slides up from the bottom edge of the screen, allowing users to scroll through details with one thumb while keeping the top portion of the map visible for spatial reference. Ensure your most important action button and pricing info appear in the top half of the drawer so mobile visitors don't have to scroll to take action. ## Prepare Large Images for Fast Interactive Maps URL: https://layerpin.com/blog/prepare-large-images-for-interactive-maps Published: 2026-08-07 Category: Performance A technical guide to exporting, optimizing, and configuring gigapixel blueprints, aerial drone photography, and vector site plans for responsive deep-zoom performance. ### Why image preparation matters for interactive maps Interactive maps demand far higher image performance than regular web photos. Visitors pan, pinch, and zoom in to inspect fine architectural labels, unit dimensions, and individual booth boundaries. If your image is too small, text and lines become blurry and unreadable when zoomed in. If your image is an uncompressed 80MB raw export, page load times skyrocket, bounce rates increase, and mobile devices crash due to memory constraints. Layerpin bridges this gap using deep-zoom tiling architecture. By preparing your source image correctly, you unlock instantaneous pan-and-zoom responsiveness with razor-sharp vector-like clarity. Steps: 1. Target a source image resolution between 3000px and 8000px along the longest edge. 2. Use RGB / sRGB color profiles to ensure color fidelity on all monitors. 3. Crop unnecessary white margins and empty canvas space before uploading. ### Best export settings from CAD, Illustrator, and Figma When exporting master plans or floor plans from design software (AutoCAD, Revit, Adobe Illustrator, Canva, or Figma), follow these export rules for optimal results: **For Vector CAD & Blueprints**: Export at 2x or 3x scale as high-quality PNG or WebP. Ensure line weights are at least 1pt to 1.5pt thick so fine wall boundaries do not vanish at broad zoom overviews. **For Aerial & Drone Photography**: Export as progressive JPEG or WebP at 85-90% quality. The human eye cannot detect compression artifacts at 85% quality, but file size is reduced by up to 70% compared to uncompressed 100% exports. Steps: 1. Export architectural line drawings as PNG or WebP with anti-aliasing enabled. 2. Export photographic and 3D realistic renders as high-quality JPEG (85% quality). 3. Ensure text labels on the base art are converted to outlines or exported at high DPI to avoid raster blur. ### How Layerpin processes and serves deep-zoom imagery When you upload an image to Layerpin, our processing pipeline generates a multi-resolution image pyramid (deep-zoom tiles). Instead of forcing a mobile browser to download a 50MB image all at once, Layerpin dynamically streams only the specific micro-tiles visible within the visitor's current viewport and zoom level. At low zoom, low-bandwidth overview tiles load instantly; as the user zooms into Room 402, high-resolution tile fragments stream in seamlessly. This architecture reduces the initial image transfer while supporting very large architectural master plans. Actual loading time still depends on image preparation, network conditions, hosting, and the visitor's device. ### Testing viewing performance across real devices Before launching your map publicly, always perform a real-world multi-device audit. Open your published map in a private browser window and test across three conditions: desktop 4K/retina display, mid-range mobile phone on cellular connection, and tablet in both landscape and portrait orientation. Confirm that the initial default zoom shows the complete area of interest without requiring immediate zooming, and verify that text labels remain crisp when panning across the furthest corners of the canvas. Steps: 1. Test initial load time on mobile 4G network. 2. Check for responsive panning and pinch zoom on each target device. 3. Verify camera bounds lock visitors within meaningful map boundaries. ## A Safer Workflow for Publishing Map Updates URL: https://layerpin.com/blog/publish-updates-with-confidence Published: 2026-08-06 Category: Publishing How to edit, stage, test, and publish map modifications with zero downtime or broken links across your embedded live websites. ### The difference between Draft Canvas and Published View When managing interactive maps for high-stakes projects-such as live real estate sales launches, major trade shows, or corporate directories-you cannot afford to have visitors see half-configured markers or incomplete pricing edits. Layerpin provides an isolated **Draft vs. Published** architecture. All additions, coordinate shifts, shape adjustments, and content edits you make in the editor are immediately saved in your secure workspace draft, but they are *not* pushed to your live website embeds until you explicitly click 'Publish Updates'. This allows you and your team to stage major layout overhauls, add 50 new vendor booths, or update seasonal pricing over several days without disrupting existing site visitors. Steps: 1. Use the editor freely as your private staging ground. 2. Make multi-item changes without worrying about live public visibility. 3. Review draft updates internally before triggering a public release. ### The pre-publish quality checklist Before hitting 'Publish Updates', run through this rapid 4-step quality audit in the Preview viewer: 1. **Check Filter Consistency**: Did you assign filter tags to all newly created markers? Unassigned markers will disappear when visitors apply filters. 2. **Audit Action Links**: Click every booking button and external link to verify destination URLs are active. 3. **Verify Mobile Layout**: Switch to the mobile preview and inspect the bottom drawer presentation. 4. **Inspect Visual Overlays**: Ensure newly drawn shapes do not accidentally overlap or hide crucial underlying reference text. Steps: 1. Audit filter tags on all new or modified map items. 2. Click-test all CTA buttons, external URLs, and media embeds. 3. Review phone and tablet viewports in preview mode. ### Instant publishing with zero embed maintenance When you click 'Publish Updates', Layerpin compiles the new production state and synchronizes it across our global edge CDN in milliseconds. You never need to re-copy embed codes, update WordPress plugins, or edit Webflow HTML blocks when updating map content. The live iframe or script embed running on your website automatically fetches the latest published version on the next page refresh. This makes ongoing operational updates-such as marking an apartment as 'Sold' or changing a speaker's booth location-a quick task from the editor. ## How to Organize a Map Media Library URL: https://layerpin.com/blog/organize-map-media-library Published: 2026-08-05 Category: Content management Keep hundreds of property photos, booth logos, and architectural drawings searchable, reusable, and properly formatted across all your map projects. ### Establish predictable asset naming conventions As an interactive map expands to dozens or hundreds of items, unorganized media libraries quickly lead to lost assets, duplicate uploads, and accidental overwrites. Adopt a standardized naming convention before uploading photos. Instead of camera defaults like `IMG_9482.jpg`, name files using structured hierarchy: `[Building]-[Unit/Room]-[ViewType].jpg`. For example: `tower-a-unit-402-living-room.jpg` or `hall-b-booth-12-logo.png`. Predictable names allow you and your collaborators to locate specific assets instantly using Layerpin's media library search bar. Steps: 1. Rename files with structured naming conventions before bulk uploading. 2. Include location ID, room number, or vendor name in the filename. 3. Maintain consistent lowercase hyphenated formatting for searchability. ### Tag media by zone, building, and asset category Layerpin allows you to assign custom tags and metadata to every uploaded photo, diagram, and graphic. Tags allow you to group assets across multiple dimensions: by Phase (Phase 1, Phase 2), Building (Tower A, Clubhouse), or Content Type (Interior, FloorPlan, 3DRender, SponsorLogo). When configuring info cards or batch-assigning galleries to multiple pins, filtering the library by tag saves hours of manual scrolling. Store master captions and copyright credits directly on the media item. When that image is attached to an info card, its caption carries over automatically. Steps: 1. Apply consistent tags to assets during upload. 2. Add descriptive captions and alt tags directly in the media manager. 3. Use tag filters to rapidly locate imagery for specific map zones. ### Safe media replacement and protection In active projects, rendering designs and vendor logos frequently get updated. Layerpin protects you from broken links by tracking every marker and card where a media asset is currently assigned. When you replace an image file in the media library, Layerpin automatically updates all connected cards and markers across your map in one operation, without requiring you to manually re-edit dozens of individual pins. Assigned assets are protected against accidental deletion, ensuring your live visitors never encounter missing image placeholders. ## How to Measure Distance and Area on an Image Map URL: https://layerpin.com/blog/measure-distance-and-area-on-image-maps Published: 2026-08-04 Category: Tools Calibrate custom scale ratios on floor plans, architectural drawings, and aerial photos to measure linear distances and calculate square footage in real time. ### How digital calibration unlocks real-world measurements A static JPEG or PNG floor plan has no innate concept of meters or feet-to a browser, it is merely a grid of pixels. Layerpin's measurement system bridges pixel geometry with real-world dimensions through a simple one-step calibration tool. To calibrate your map, draw a calibration line over a known dimension on your plan: a standard 3-foot doorway, a 10-meter swimming pool, a known parking stall width, or the printed graphical scale bar at the bottom of an architectural blueprint. Enter the known real-world measurement (e.g., `10 meters` or `32 feet`). Layerpin automatically calculates the exact pixel-to-metric ratio across the entire canvas, enabling accurate linear and area calculations across every corner of your map. Steps: 1. Open the Calibration tool from the editor toolbar. 2. Draw a straight line across a known dimension or graphic scale bar. 3. Input the exact real-world length and choose your unit (Feet, Meters, Inches, Centimeters). ### Measuring multi-point linear distances and walking routes Use the **Distance Measurement** tool to calculate walking routes, hallway lengths, property setbacks, and utility runs. Click to place vertex points along any continuous path-straight, angled, or winding. Layerpin calculates the running total distance in real time, displaying readable dimension labels alongside each segment. Double-click to finalize the measurement path. You can reposition vertex handles at any time to fine-tune alignment. Steps: 1. Select Distance mode to trace multi-segment walking paths or boundary lines. 2. Click to drop waypoints along turns, corridors, and pathways. 3. Double-click to lock the measurement and view the total distance. ### Calculating surface area and room square footage The **Area Measurement** tool is an indispensable asset for real estate leasing, exhibition booth management, and venue planning. Trace the boundary perimeter of any room, exhibition booth, outdoor lawn, or parking lot. Layerpin automatically closes the polygon and computes the exact internal area (e.g., `1,850 sq ft` or `172 m²`). Convert calibrated measurements into permanent visual callouts on your public map or keep them as internal planning annotations for your operations team. Steps: 1. Select Area mode and click around the perimeter of any space. 2. Close the polygon to compute instant square footage / square meters. 3. Toggle measurement labels on or off for public viewer presentation. ## Design Responsive Interactive Maps for Mobile URL: https://layerpin.com/blog/design-responsive-interactive-maps Published: 2026-08-03 Category: Map design Improve mobile usability with touch-friendly pin targets, bottom sheet drawers, gesture-friendly navigation, and adaptive UI layouts. ### Mobile map traffic: Why touch ergonomics make or break engagement Over 65% of website visitors interact with digital maps on smartphones and tablets. Whether it is an attendee walking through an event hall or a homebuyer standing in front of a development site, mobile usability directly dictates engagement. Desktop navigation relies on hover states and precision mouse cursors. Touchscreens rely on fingers, thumbs, and varying screen viewports. Designing a mobile-first interactive map requires deliberate adjustments to touch targets, drawer layouts, and gesture controls. Steps: 1. Ensure marker touch targets are at least 44x44 pixels for reliable finger taps. 2. Never place critical information exclusively inside hover tooltips. 3. Set intuitive default zoom levels that frame key landmarks on portrait screens. ### The power of bottom sheet drawers over modal popups On desktop screens, hovering or clicking a pin can open a floating card adjacent to the marker. On a mobile phone screen with limited width, a floating card covers the map, disorienting the visitor. Layerpin automatically transforms info cards on mobile into an ergonomic **Bottom Sheet Drawer**. When a user taps a pin, the drawer slides up smoothly from the bottom of the screen, displaying the photo, title, specs, and call-to-action button right under the user's thumb. Visitors can swipe down to dismiss the drawer and return to the map in one fluid motion, maintaining spatial context throughout their journey. Steps: 1. Keep key data points (price, title, primary CTA) visible in the top fold of the drawer. 2. Use swipe gestures for quick drawer dismissal. 3. Test thumbnail and gallery aspect ratios on narrow 375px screens. ### Preventing page-scroll hijacking with smart gesture isolation A classic frustration when embedding maps on mobile websites is 'scroll trap'-a visitor scrolling down an article gets stuck inside the map embed when their finger touches the canvas. Layerpin features smart gesture handling: when embedded inside a webpage, two-finger gestures or dedicated tap-to-interact triggers prevent accidental map scrolling, ensuring smooth page navigation. Include clean zoom-in, zoom-out, and reset-view buttons on screen so users who prefer tactile button controls can navigate effortlessly without pinch gestures. ## Create Clear Map Labels and a Useful Visual Language URL: https://layerpin.com/blog/create-clear-map-labels-and-legend Published: 2026-08-02 Category: Map design Cartographic design principles for readable typography, high-contrast badges, accessible color palettes, and interactive map legends. ### The golden rules of digital map typography Typography on an interactive map serves one primary mission: quick spatial recognition. Unlike editorial body text, map labels must remain legible against complex, multi-colored background imagery-from green park grass to dark asphalt roads and architectural hatches. Use clean, geometric sans-serif typefaces (such as Inter, Roboto, or SF Pro) with medium-to-bold weights. Avoid delicate thin serif fonts that vanish on high-resolution displays. Always apply a subtle background pill or text halo (a soft contrast outline). A clean dark badge behind white text or a white pill behind dark text guarantees 100% legibility regardless of what background artwork lies beneath. Steps: 1. Use clean sans-serif typography with semi-bold or bold weights for labels. 2. Apply contrast badge pills behind text to separate labels from complex art. 3. Keep label copy concise: 'Dining Hall' instead of 'Central Campus Dining and Catering Hall'. ### Establish clear visual hierarchy across zoom levels Not all map items are created equal. A master plan has primary districts, secondary buildings, and minor utility points. Establish a 3-tier typographic scale: **Tier 1 (Districts/Wings)** in large 16-18px bold uppercase text; **Tier 2 (Buildings/Stores)** in 13-14px semi-bold text; **Tier 3 (Amenities/Restrooms)** in compact 11-12px badges with icons. Layerpin allows you to set zoom-dependent label visibility, ensuring minor room labels remain hidden at bird's-eye view to prevent visual noise, and fade in gracefully as visitors zoom in closer. Steps: 1. Assign visual hierarchy tiers to your landmarks and destinations. 2. Use uppercase tracked text for large zones and sentence case for specific rooms. 3. Configure zoom thresholds so minor labels only appear at close zoom levels. ### Design accessible, interactive map legends A map legend is the visual Rosetta Stone of your layout. It translates your pin colors, category icons, and shape fills into understandable meaning. In Layerpin, your legend is not a static graphic-it is an interactive control. Clicking 'Restrooms' in the legend filters and highlights all restroom locations across the canvas. Follow WCAG AA accessibility guidelines when picking category colors. Never rely solely on color to differentiate categories; always pair color with a distinctive shape or icon so colorblind visitors can navigate with total confidence. ## Use Polylines and Connectors to Explain a Map URL: https://layerpin.com/blog/use-polylines-and-connectors-on-maps Published: 2026-08-01 Category: Tools Draw guided walking paths, transit corridors, directional arrows, and leader line callouts that keep complex maps organized and easy to navigate. ### When and why to use vector line overlays While markers pinpoint spots and shapes define rooms, lines tell stories of movement and connection. They guide visitors along physical pathways, explain emergency evacuation routes, showcase campus tour sequences, and illustrate infrastructure runs. Layerpin provides three specialized vector line types: **Polylines** (multi-segment connected vertices for paths), **Curved & Straight Connectors** (for leader line callouts), and **Directional Arrows** (for one-way traffic, entrances, and flow). Steps: 1. Use Polylines for multi-turn paths, hiking routes, and walking corridors. 2. Use Directional Arrows for flow control (e.g., parade routes, vehicle drop-offs). 3. Use Callout Connectors to link text labels cleanly to tight, crowded map points. ### Drawing and editing smooth multi-point paths Drawing polylines in Layerpin is intuitive and non-destructive. Click along your map background to drop vertex waypoints following hallways, sidewalks, or roads. Double-click to complete the line. Need to adjust a turn later? Select the polyline to reveal interactive vertex handles. Drag any point to shift its position, or click the midpoint plus handles to insert new vertices on the fly without redrawing. Customize stroke width (from thin 2px reference lines to bold 6px highlighted routes), line caps, join styles, and dash patterns (solid, dashed, dotted). Steps: 1. Click to place sequential path points and double-click to finish. 2. Use midpoint handles to add turns or adjustments without starting over. 3. Choose dashed styling for secondary or seasonal routes to contrast with primary paths. ### Using Callout Connectors to declutter dense areas On high-density maps-such as a medical campus with 30 clinics clustered in one wing, or a microchip technical diagram-placing markers and titles directly over coordinates creates an illegible tangle of overlapping text. Callout Connectors solve this by anchoring a leader pin at the exact physical feature, while allowing the text badge and info trigger to sit comfortably in adjacent open canvas space. The connector line automatically tracks and maintains its link if either the anchor pin or the callout badge is moved, ensuring pristine layout alignment at all times. ## How to Manage Event Sponsors, Booth Pricing, and Attendee Navigation on Interactive Maps URL: https://layerpin.com/blog/manage-event-sponsors-and-interactive-festival-maps Published: 2026-10-13 Category: Guide From sponsor pitch decks to a live attendee festival guide: learn how to map booth boundaries, pricing tiers, and stage proximity, and help participants discover brands effortlessly. ### The dual challenge: selling sponsor inventory and guiding festival attendees Organizing large-scale music festivals, expos, and community events involves two demanding groups: commercial sponsors who fund the production, and thousands of attendees who navigate the grounds in real time. Traditional workflows rely on static PDF decks for brand sales and paper leaflets for visitors. Brand managers struggle to gauge real foot traffic or stage proximity from a flat PDF, while attendees squint at static printouts trying to find a food stall or phone charging station in a crowded field. A modern interactive map bridges both worlds. With Layerpin, event planners build a single living canvas that starts as a sponsor inventory management tool and evolves into the official, mobile-friendly attendee navigator on festival weekend. Explore the [River Beats Festival live demo](https://www.layerpin.com/m/river-beats-festival-demo) to see this workflow in action. ### Manage booth positions, pricing tiers, and inventory with polygon boundaries The most common mistake on event maps is placing identical circular pins over a grid of sponsor tents. Pins obscure tent roofs, hide neighboring brands, and fail to reflect whether a sponsor purchased a 10×10 standard tent or an expansive 40×40 experiential activation. Instead, trace each booth's physical perimeter using 4-corner polygon or rectangle shapes. Give them a subtle semi-transparent fill (12% to 20%) with a contrasting border. This keeps your custom festival artwork, paths, and trees legible while turning every booth footprint into a clean, clickable zone. Attach structured custom fields to each shape: **Sponsorship Tier** (Headline Partner, Main Stage Gold, Sponsor Village Silver), **Price / Rate Card**, **Included Deliverables** (power drops, badge allocations, banner placements), and **Status** (`Available`, `Under Discussion`, `Confirmed`). Organizers can track booth inventory at a glance without juggling disconnected spreadsheets. Steps: 1. Trace actual tent perimeters using polygon or rectangle shapes aligned to your festival grid. 2. Configure subtle fill opacity and contrasting borders to maintain clear underlying map artwork. 3. Add structured custom fields for sponsorship tier, price, activation ideas, and booking status. 4. Group booths by zone (e.g., Central Sponsor Village, Food & Beverage, Marketplace, VIP Lounge). ### Accurate real-stage positioning: giving sponsors full visibility for the next event When brand managers evaluate high-dollar event packages, their primary questions revolve around spatial context: *How close is our booth to the Main Stage? What is the walking path from the entrance? Are we isolated from food courts or right in the high-traffic corridor?* An interactive map answers these questions immediately. Planners can share private, unlisted review links with prospective sponsors during pitch negotiations. Brand decision-makers can inspect sightlines to stages, calculate distances, and review activation concepts directly in high-resolution deep zoom. Equip prospective booth cards with rich media: upload photos of past brand activations, link 3D walk-throughs, and include a direct **“Inquire About Booth”** or **“Reserve Placement”** button connected to your sales team's calendar or CRM. Steps: 1. Position sponsor booths relative to stages, main entrances, restrooms, and dining hubs. 2. Share unlisted map links with brand managers so they can inspect foot traffic circulation. 3. Add past activation photos, power/AV specs, and pricing directly inside the booth info card. 4. Embed direct call-to-action buttons for rapid sales inquiries and booth reservation. ### The seamless hand-off: turning the sales layout into the live attendee navigator Once contracts are signed and festival week arrives, the same map seamlessly transitions into the attendee navigation guide without starting from scratch. Simply update confirmed brand logos, activation schedules, and public-facing descriptions. Set up multi-dimensional filters that cater to attendee needs: visitors can filter by **Area** (Main Stage, Sponsor Village, Food & Beverage, Wellness, Activities, VIP Lounge), **Visitor Interest**, and **Industry**. An attendee looking for coffee or merchandise can toggle that filter to highlight exact vendor tents across the festival grounds. Layerpin's instant search bar allows visitors to type keywords like *“charging”*, *“vegan”*, *“sunglasses”*, or specific brands like *“Nike”* or *“Spotify”* to instantly pan and zoom to the matching location. On mobile devices, cards open as smooth bottom-sheet drawers, giving attendees quick access to menus, schedules, and special festival perks without leaving the map. Steps: 1. Switch booth cards to attendee-facing content: brand logos, activation hours, menus, and giveaways. 2. Configure intuitive filters for areas, visitor interests, dining options, and partner types. 3. Enable instant search for rapid keyword and brand discovery on mobile screens. 4. Test the mobile bottom drawer view to ensure one-handed usability in outdoor festival conditions. ### Unlock more Layerpin capabilities: global languages, live updates, and view analytics Festivals and expos attract global visitors. Layerpin supports multilingual maps in languages such as French, Spanish, Portuguese, Vietnamese, Simplified Chinese, and Japanese. Using Pinny AI, you can translate filter categories, booth descriptions, and service details while preserving global trademarked brand names like Visa, Samsung, and Coca-Cola. Events are unpredictable: a vendor might swap locations on Saturday morning, or a stage schedule might adjust due to weather. With Layerpin's instant publishing, updates reflect immediately across all embedded websites, mobile apps, and printed QR codes without breaking links or forcing visitors to download new app updates. After the event wraps up, leverage Layerpin's built-in Audience Analytics. Share view metrics, popular search terms, and booth engagement data with your sponsors as concrete proof of performance, laying the groundwork for effortless renewals for next year's event. Steps: 1. Enable target visitor languages and translate descriptions while preserving brand names. 2. Publish real-time schedule or booth adjustments with zero downtime across QR codes and embeds. 3. Share deep links to specific booths or pre-filtered views across festival social media channels. 4. Review post-event Audience Analytics to demonstrate tangible attendee engagement to sponsors.