Leaflet Examples You Can Edit and Run
4 small Leaflet examples written by AgentGid from the official docs, one feature each. Every one runs in your browser: change the code and see the result at once, or describe a change and let AI rewrite it. The screenshots are taken from the same code by our server, which also checks that each example starts without errors.
Leaflet: usage and stats 94 AI-built projects use it
Markers and popups in LeafletClick any pin to open its popup; drag the map to pan and scroll to zoom.
GeoJSON layers in LeafletClick the park, the route or a point to see its properties.
Handling map clicks in LeafletClick anywhere to drop a point and read its coordinates; zoom to see the level change.
Layer switcher and scale control in LeafletTick and untick the boxes in the top-right control to show or hide each group.
Try them all in one place
import * as L from 'leaflet';
const el = document.createElement('div');
el.style.cssText = 'position:fixed;inset:0;background:#1d2633';
document.getElementById('root').appendChild(el);
const style = document.createElement('style');
style.textContent = '.pin span{display:block;width:22px;height:22px;border:3px solid #fff;box-sizing:border-box;' +
'border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 0 6px #0009}';
document.head.appendChild(style);
const map = L.map(el).setView([51.505, -0.09], 14);
const places = [
{ name: 'Coffee bar', pos: [51.508, -0.1], color: '#f6ae2d' },
{ name: 'Bookshop', pos: [51.503, -0.08], color: '#8ab4f8' },
{ name: 'Park gate', pos: [51.5, -0.098], color: '#81c995' },
{ name: 'Museum', pos: [51.507, -0.075], color: '#ff6b6b' },
];
const markers = places.map(p => {
const icon = L.divIcon({
className: 'pin',
html: `<span style="background:${p.color}"></span>`,
iconSize: [22, 22],
iconAnchor: [11, 26],
popupAnchor: [0, -26],
});
return L.marker(p.pos, { icon }).addTo(map)
.bindPopup(`<b>${p.name}</b><br>${p.pos.join(', ')}`);
});
markers[0].openPopup();
Click any pin to open its popup; drag the map to pan and scroll to zoom. Code written by AgentGid [1]. How it works, with a screenshot →
Click any pin to open its popup; drag the map to pan and scroll to zoom. Code written by AgentGid [1]. How it works, with a screenshot →Click the park, the route or a point to see its properties. Code written by AgentGid [1]. How it works, with a screenshot →Click anywhere to drop a point and read its coordinates; zoom to see the level change. Code written by AgentGid [1]. How it works, with a screenshot →Tick and untick the boxes in the top-right control to show or hide each group. Code written by AgentGid [1]. How it works, with a screenshot →Checked Oct 12, 2026: each example starts without errors in Chromium with leaflet 1.9.4. Needs WebGL.
Sources
Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.