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.
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.
Use these controls to position the map:
Controls the vertical position on the globe.
Examples:
Paris → 48.8566
New York → 40.7128
Controls the horizontal position.
Examples:
Paris → 2.3522
New York → -74.0060
Controls how close the camera is to the location.
Recommended values:
2 → World view
5 → Country view
10 → City view
15 → Street level
The component includes multiple map themes:
Minimal dark map without labels.
Dark theme with roads and place names visible.
Minimal clean light map.
Light theme with visible labels.
Balanced modern map style.
Traditional OpenStreetMap appearance.
Choose the style that best matches your website branding.
Inside the Pins section, you can add multiple locations.
Each marker supports:
The label displayed beside the pin.
Example:Suryagarh
The exact location of the marker.
Optional external URL opened when the marker is clicked.
Examples:
Hotel booking page
Portfolio project
Google Maps page
Event page
Customize the pin color to match your design system.
The component includes separate typography controls for:
Controls the title shown at the top.
Controls the live coordinate display at the bottom.
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.
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
Allows users to zoom using:
Mouse wheel
Trackpad
Pinch gestures
Allows users to drag and move the map freely.
Disable this if you want the map to remain fixed.
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
Jules Hq
