--- title: "LeafletMap — Framer component · Best of Framer" description: "$5.00 · Framer component · by Julius Ayo · Maps. LeafletMap is an interactive map component for Framer that allows you to display custom locations with a cinematic visual style." canonical: "https://framer.elliotli.dev/component/leafletmap" --- [Home](/)/[Components](/components)/[Maps](/components/category/maps)/LeafletMap # LeafletMap An interactive cinematic map component [View on Framer](https://framer.com/marketplace/components/leafletmap/?via=elliot-li) ![LeafletMap preview image 1](https://framer.elliotli.dev/og/component/leafletmap/a13cc92f0e8ab17b/1600x1200.jpg) ## Summary LeafletMap is an interactive map component for Framer that allows you to display custom locations with a cinematic visual style. ## Description ## LeafletMap LeafletMap is an interactive map component for Framer that allows you to display custom locations with a cinematic visual style. The component is powered by Leaflet and includes built-in controls for map styling, markers, typography, zoom behavior, and live coordinates. Everything is controlled directly inside the Framer properties panel, so you can customize the experience without editing the code after installation. The component automatically: - Loads the Leaflet library - Applies map styles - Creates interactive markers - Handles zoom and drag interactions - Displays live coordinates - Supports external links for pins It is designed to work well for travel websites, hotel experiences, real estate platforms, architecture portfolios, agency sites, and immersive storytelling pages. ## How to Use the Component ### 1\. Add the Component to Framer - Create a new Code Component in Framer - Paste the component code into the file - Save the component - Drag the component onto your canvas The map will immediately render with the default location and settings. ### 2\. Set the Map Location Use these controls to position the map: ### Latitude Controls the vertical position on the globe. Examples: - Paris → 48.8566 - New York → 40.7128 ### Longitude Controls the horizontal position. Examples: - Paris → 2.3522 - New York → -74.0060 ### Zoom Level Controls how close the camera is to the location. Recommended values: - 2 → World view - 5 → Country view - 10 → City view - 15 → Street level ### 3\. Choose a Map Style The component includes multiple map themes: ### Dark Minimal dark map without labels. ### Dark + Labels Dark theme with roads and place names visible. ### Light Minimal clean light map. ### Light + Labels Light theme with visible labels. ### Classic Balanced modern map style. ### Street Map Traditional OpenStreetMap appearance. Choose the style that best matches your website branding. ### 4\. Add Markers (Pins) Inside the Pins section, you can add multiple locations. Each marker supports: ### Name The label displayed beside the pin. Example:Suryagarh ### Latitude and Longitude The exact location of the marker. ### Link Optional external URL opened when the marker is clicked. Examples: - Hotel booking page - Portfolio project - Google Maps page - Event page ### Pin Color Customize the pin color to match your design system. ### 5\. Customize Typography The component includes separate typography controls for: ### Header Font Controls the title shown at the top. ### Coordinates Font Controls the live coordinate display at the bottom. ### Pin Label Font Controls the labels attached to markers. You can adjust: - Font family - Font size - Font weight - Letter spacing This allows the map to visually match the rest of your website. ### 6\. Enable or Disable Coordinates The **Show Coordinates** option displays a live latitude and longitude readout at the bottom of the map. When enabled: - Coordinates update automatically as the map moves - Creates a more interactive experience When disabled: - The coordinate display is hidden ### 7\. Control User Interaction ### Scroll to Zoom Allows users to zoom using: - Mouse wheel - Trackpad - Pinch gestures ### Allow Panning Allows users to drag and move the map freely. Disable this if you want the map to remain fixed. ### 8\. Enable Cinematic Edge Fade The **Edge Fade** option adds a soft vignette around the edges of the map. This helps: - Focus attention toward the center - Create a premium cinematic appearance - Blend the map into dark layouts Recommended Use Cases This component works especially well for: - Luxury hotel websites - Travel experiences - Real estate listings - Architecture portfolios - Interactive landing pages - Storytelling websites - Tourism platforms - Event showcases - Agency websites Performance Notes The component: - Loads Leaflet only once - Uses lightweight map tiles - Supports smooth zooming and panning - Works responsively inside Framer layouts For best performance: - Avoid adding too many markers at once - Use optimized external links - Keep zoom levels appropriate for the experience you want to create ## Rank history [How rankings work →](/terms#rankings) - All · #4371 ## Details - **Author**: Julius Ayo - **Price**: $5.00 - **Published**: 2026-05-30 - **Updated**: 2026-06-04 - **Added**: 2026-05-23 - **Categories**: Maps ## More like this - [Waypoint](/component/waypoint) — Dev Ahsan · $9 — Photo-first locations map - [No-key Store Locator](/component/no-key-store-locator) — Sean Weekes · $15 — UK store finder, no Google API key - [Geo Office Location](/component/geo-office-location) — Design Foundry · Free — Interactive Global Office Showcase - [Map Locator CMS](/component/map-locator-cms) — sherwin · $15 — Map Locator CMS is a flexible, interactive map component for Framer that helps you showcase stores, offices, properties, venues, service…