About LeafletMap
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
