Draw Polygons on a Leaflet Map
LeafletDraw filled L.polygon areas on a Leaflet map with custom stroke and fill styles.
const map = L.map('map').setView([48.86, 2.34], 14);
L.tileLayer('https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', {
tileSize: 256,
attribution: '© <a href="https://www.maptiler.com/">MapTiler</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map);
const polygon = L.polygon([
[48.8650, 2.3300], [48.8650, 2.3450],
[48.8560, 2.3450], [48.8560, 2.3300]
], { color: '#FF5722', fillColor: '#FF5722', fillOpacity: 0.3, weight: 2 }).addTo(map);
polygon.bindPopup('Selected area');How it works
L.polygon() takes an array of [lat, lng] coordinate pairs that define the polygon’s vertices. Leaflet automatically closes the shape by connecting the last point to the first. The second argument configures the stroke and fill styles.
Key style options include color (stroke color), fillColor, fillOpacity (0 to 1), and weight (stroke width). Like all Leaflet layers, polygons support popups and tooltips via .bindPopup() and .bindTooltip().
Key APIs
| API | Description | Docs |
|---|---|---|
L.polygon() |
Create a polygon | leafletjs.com/reference.html#polygon |
.setStyle() |
Update polygon style | leafletjs.com/reference.html#path-setstyle |
FAQ
How do I create a polygon with a hole?
Pass a nested array: the first sub-array is the outer ring, additional sub-arrays are holes. L.polygon([[outer], [hole]]).
Can I edit polygon vertices after creation?
Yes. Call .setLatLngs() with new coordinates. For user-driven editing, use the Leaflet.draw plugin.
Common mistakes
- Confusing
color(stroke) withfillColor: setting onlycolorgives you a filled polygon in that color with a matching border - Not closing the polygon ring manually: Leaflet handles this automatically, but GeoJSON requires the first and last point to match
- Using
fillOpacity: 1on large polygons: it hides the map underneath
Build maps using Leaflet with AI
Generate code like this draw polygons on a leaflet map example using the Leaflet skill in your IDE.
Related Examples
- Draw Polylines on a Leaflet Map
- Choropleth Map with Leaflet
- See how to do this in MapLibre GL JS, MapTiler SDK or OpenLayers