Leaflet Maps

Interactive OpenStreetMap-based maps with a click-to-load placeholder and accessible markers.

Topics: Integration · Privacy

Highlights

Click-to-load consent placeholder
Multiple locations with own icons
Pin, circle and icon markers
Address search in the builder
OpenStreetMap, CARTO, Esri and more tile providers

Accessibility

Map is a named region, markers are buttons, controls work with the keyboard and announce zoom limits.

Privacy

Tiles are only requested after the visitor agrees. The choice is remembered per provider.

Live demo

See it in action

Everything below is the real element, configured in Breakdance. Try it with your keyboard, zoom in, or open the page on your phone.

Variant 1

Dark tiles, single pin

The map stays a placeholder until you agree. Only then are tiles requested from CARTO. Your choice is remembered for this provider, so the other maps on this page load right away.

Variant 2

Several locations, circle markers

The map zooms to fit all locations. Markers are buttons named after the place, popups contain a directions link. Try it with Tab and Enter.

Variant 3

OpenStreetMap, icon markers

No API key needed for OpenStreetMap tiles. Keep the OSM tile policy in mind for high-traffic sites: attribution stays visible and heavy commercial use needs your own tile server.

More modules

All modules

New

Element