5d:I[473921,["/creators-assets/_next/static/immutable/chunks/2bxtessbrg0z1.js","/creators-assets/_next/static/immutable/chunks/3xktnaujy87te.js","/creators-assets/_next/static/immutable/chunks/3futvmn4fb096.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/1ozc4wc1du10z.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1n4sz3rar6_gg.js","/creators-assets/_next/static/immutable/chunks/2h_rs7nbfvb7-.js","/creators-assets/_next/static/immutable/chunks/3ly-i84yiij4i.js","/creators-assets/_next/static/immutable/chunks/3oybmd01gs-b6.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/1eyot9c9uwocm.js","/creators-assets/_next/static/immutable/chunks/03stgnoj58q7s.js","/creators-assets/_next/static/immutable/chunks/1cey7skpirawe.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3gipqcylfnv5h.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/1ftf6fdyz0hh4.js","/creators-assets/_next/static/immutable/chunks/2lxef2-u417vc.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/2y36h9lujf54i.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3xmobvbzj3637.js","/creators-assets/_next/static/immutable/chunks/26fs9mkd8gzie.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/110hzb6dmcbdr.js","/creators-assets/_next/static/immutable/chunks/2eiu9v0ook5ln.js","/creators-assets/_next/static/immutable/chunks/1zt764sfv2wd7.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/3gx0_q52o4oil.js","/creators-assets/_next/static/immutable/chunks/0u_jiik6ovv_e.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/1tvhyiuh-gmez.js"],"PostDetailCard"] 5e:T14f8,

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

5a:[["$","$L5d",null,{"post":{"id":"019e796d-5d77-7acd-b90f-564e31cf1667","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"2201c2b3-54a1-4f38-bc7c-8b7ad3106761","name":"Julius Ayo","slug":"abe-ayomiposi","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2201c2b3-54a1-4f38-bc7c-8b7ad3106761/bfunbx6o","badges":["available","pro","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"1C4dqzSni7qskAdAcreu","resolved":true,"title":"LeafletMap","body":"$5e","bodyJson":null,"introduction":"An interactive cinematic map component","slug":"leafletmap","author":{"framerUserId":"2201c2b3-54a1-4f38-bc7c-8b7ad3106761","name":"Julius Ayo","slug":"abe-ayomiposi","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2201c2b3-54a1-4f38-bc7c-8b7ad3106761/bfunbx6o","badges":["available","pro","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/1C4dqzSni7qskAdAcreu/leafletmap-RGvYTpQyawOPmHTySmhANHqz0IiOY0","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-23T20:07:21.113Z","updatedAt":"2026-06-04T20:04:03.001Z","publishedAt":"2026-05-30T15:07:51.031Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://leaflet-map.framer.website/","price":"5","paymentUrl":"https://juleshq.lemonsqueezy.com/checkout/buy/e807bdd5-f8e2-4cf3-b3f6-a915ecd912ae","workshop":false,"categories":[{"id":"8ee0cfdd-bc84-44cf-aa9c-54c86b5c56e0","name":"Maps","slug":"maps"}],"lastSaveId":"vkGZvFscv9L8I6BjMa8U","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":11,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-30T15:07:51.031Z","updatedAt":"2026-05-30T15:07:51.031Z","reported":false,"type":"post"}}],"$L5f"]

Suggested for you