Draw Polygons with MapLibre GL JS

MapLibre GL JS

Draw polygons on the map by clicking to place vertices and updating a GeoJSON source in real time.

progress_activityLoading map...

const map = new maplibregl.Map({
  container: 'map',
  style: 'https://api.maptiler.com/maps/streets-v4/style.json?key=YOUR_MAPTILER_KEY',
  center: [14.42, 50.08],
  zoom: 13
});
const coords = [];
const geojson = { type: 'Feature', geometry: { type: 'Polygon', coordinates: [[]] } };
map.on('load', () => {
  map.addSource('draw', { type: 'geojson', data: geojson });
  map.addLayer({ id: 'draw-fill', type: 'fill', source: 'draw', paint: { 'fill-color': '#2196F3', 'fill-opacity': 0.2 } });
  map.addLayer({ id: 'draw-line', type: 'line', source: 'draw', paint: { 'line-color': '#2196F3', 'line-width': 2 } });
  map.addSource('vertices', { type: 'geojson', data: { type: 'FeatureCollection', features: [] } });
  map.addLayer({ id: 'draw-points', type: 'circle', source: 'vertices', paint: { 'circle-radius': 5, 'circle-color': '#fff', 'circle-stroke-width': 2, 'circle-stroke-color': '#2196F3' } });
});
map.on('click', (e) => {
  coords.push([e.lngLat.lng, e.lngLat.lat]);
  const ring = [...coords, coords[0]];
  geojson.geometry.coordinates = [ring];
  map.getSource('draw').setData(JSON.parse(JSON.stringify(geojson)));
  map.getSource('vertices').setData({ type: 'FeatureCollection', features: coords.map(c => ({ type: 'Feature', geometry: { type: 'Point', coordinates: c } })) });
});
document.getElementById('finish-btn').addEventListener('click', () => {
  if (coords.length < 3) return;
  map.off('click');
  map.getCanvas().style.cursor = '';
});

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@6.11.2/dist/maplibre-gl.css" />
<style>
body { margin: 0; padding: 0; }
#map { width: 100%; height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<button id="finish-btn" style="position:absolute;top:10px;left:10px;z-index:1;padding:6px 14px;background:#141414;color:#e0e0e0;border:2px solid #2a2a2a;font-family:monospace;font-size:12px;font-weight:600;cursor:pointer;">Finish Drawing</button>

<script type="module">
import * as maplibregl from 'https://unpkg.com/maplibre-gl@6.11.2/dist/maplibre-gl.mjs';

const map = new maplibregl.Map({
  container: 'map',
  style: 'https://api.maptiler.com/maps/streets-v4/style.json?key=YOUR_MAPTILER_KEY',
  center: [14.42, 50.08],
  zoom: 13
});
const coords = [];
const geojson = { type: 'Feature', geometry: { type: 'Polygon', coordinates: [[]] } };
map.on('load', () => {
  map.addSource('draw', { type: 'geojson', data: geojson });
  map.addLayer({ id: 'draw-fill', type: 'fill', source: 'draw', paint: { 'fill-color': '#2196F3', 'fill-opacity': 0.2 } });
  map.addLayer({ id: 'draw-line', type: 'line', source: 'draw', paint: { 'line-color': '#2196F3', 'line-width': 2 } });
  map.addSource('vertices', { type: 'geojson', data: { type: 'FeatureCollection', features: [] } });
  map.addLayer({ id: 'draw-points', type: 'circle', source: 'vertices', paint: { 'circle-radius': 5, 'circle-color': '#fff', 'circle-stroke-width': 2, 'circle-stroke-color': '#2196F3' } });
});
map.on('click', (e) => {
  coords.push([e.lngLat.lng, e.lngLat.lat]);
  const ring = [...coords, coords[0]];
  geojson.geometry.coordinates = [ring];
  map.getSource('draw').setData(JSON.parse(JSON.stringify(geojson)));
  map.getSource('vertices').setData({ type: 'FeatureCollection', features: coords.map(c => ({ type: 'Feature', geometry: { type: 'Point', coordinates: c } })) });
});
document.getElementById('finish-btn').addEventListener('click', () => {
  if (coords.length < 3) return;
  map.off('click');
  map.getCanvas().style.cursor = '';
});

</script>
</body>
</html>

import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';

const map = new maplibregl.Map({
  container: 'map',
  style: 'https://api.maptiler.com/maps/streets-v4/style.json?key=YOUR_MAPTILER_KEY',
  center: [14.42, 50.08],
  zoom: 13
});
const coords = [];
const geojson = { type: 'Feature', geometry: { type: 'Polygon', coordinates: [[]] } };
map.on('load', () => {
  map.addSource('draw', { type: 'geojson', data: geojson });
  map.addLayer({ id: 'draw-fill', type: 'fill', source: 'draw', paint: { 'fill-color': '#2196F3', 'fill-opacity': 0.2 } });
  map.addLayer({ id: 'draw-line', type: 'line', source: 'draw', paint: { 'line-color': '#2196F3', 'line-width': 2 } });
  map.addSource('vertices', { type: 'geojson', data: { type: 'FeatureCollection', features: [] } });
  map.addLayer({ id: 'draw-points', type: 'circle', source: 'vertices', paint: { 'circle-radius': 5, 'circle-color': '#fff', 'circle-stroke-width': 2, 'circle-stroke-color': '#2196F3' } });
});
map.on('click', (e) => {
  coords.push([e.lngLat.lng, e.lngLat.lat]);
  const ring = [...coords, coords[0]];
  geojson.geometry.coordinates = [ring];
  map.getSource('draw').setData(JSON.parse(JSON.stringify(geojson)));
  map.getSource('vertices').setData({ type: 'FeatureCollection', features: coords.map(c => ({ type: 'Feature', geometry: { type: 'Point', coordinates: c } })) });
});
document.getElementById('finish-btn').addEventListener('click', () => {
  if (coords.length < 3) return;
  map.off('click');
  map.getCanvas().style.cursor = '';
});

How it works

This example implements polygon drawing without external plugins. Each map click adds a vertex to a coordinate array. The polygon is rendered by closing the ring (appending the first coordinate) and updating the GeoJSON source.

Three layers visualize the drawing: a fill layer for the polygon interior, a line layer for the border, and a circle layer for individual vertices. All three update in real time as the user clicks.

Clicking the “Finish Drawing” button removes the click listener to finalize the polygon. With 3 or more vertices, you have a valid polygon.

Key APIs

API	Description	Docs
`source.setData()`	Update GeoJSON source data	maplibre.org docs
`map.on('click')`	Listen for map clicks	maplibre.org docs
`map.off('click')`	Remove click listener	maplibre.org docs

FAQ

How do I calculate the polygon area?

Use a library like Turf.js: turf.area(polygon) returns the area in square meters.

Can I edit vertices after drawing?

This basic implementation does not support vertex editing. For full draw/edit functionality, consider implementing drag handlers on vertex points.

Common mistakes

Not closing the polygon ring: append the first coordinate to the end of the array
Forgetting to deep-copy the GeoJSON before setData(): MapLibre may cache references
Allowing polygon creation with fewer than 3 points: 2 points or fewer cannot form a valid polygon

auto_awesome

Build maps using MapLibre GL JS with AI

Generate code like this draw polygons with maplibre gl js example using the MapLibre GL JS skill in your IDE.

auto_awesomeGet skills keyGet a free API key

Related Examples

Fill Layers with MapLibre GL JS
Load GeoJSON Source in MapLibre GL JS
See how to do this in Leaflet, MapTiler SDK or OpenLayers