Skip to content

Draw a Circle

Draw a radius to approximate a location with Turf.js

const radiusCenter = [2.3454, 48.8452];
const map = new maplibregl.Map({
    container: 'map',
    zoom: 13,
    center: radiusCenter,
    style: {
        version: 8,
        sources: {
            osm: {
                type: 'raster',
                tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
                tileSize: 256,
                attribution: '© OpenStreetMap Contributors',
                maxzoom: 19
            }
        },
        layers: [
            {
                id: 'osm',
                type: 'raster',
                source: 'osm'
            }
        ]
    },
    maxZoom: 18,
    maxPitch: 85
});

map.on('load', () => {
    // Generate a polygon using turf.circle
    // See https://turfjs.org/docs/#circle
    const radius = 1; // kilometer
    const options = {
        steps: 64,
        units: 'kilometers'
    };
    const circle = turf.circle(radiusCenter, radius, options);

    // Add the circle as a GeoJSON source
    map.addSource('location-radius', {
        type: 'geojson',
        data: circle
    });

    // Add a fill layer with some transparency
    map.addLayer({
        id: 'location-radius',
        type: 'fill',
        source: 'location-radius',
        paint: {
            'fill-color': '#8CCFFF',
            'fill-opacity': 0.5
        }
    });

    // Add a line layer to draw the circle outline
    map.addLayer({
        id: 'location-radius-outline',
        type: 'line',
        source: 'location-radius',
        paint: {
            'line-color': '#0094ff',
            'line-width': 3
        }
    });
});

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Draw a Circle</title>
    <meta property="og:description" content="Draw a radius to approximate a location with Turf.js" />
    <meta property="og:created" content="2025-06-25" />
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.css' />
    <script src='https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.js'></script>
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; }
    </style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@7/turf.min.js"></script>
<div id="map"></div>
<script>
    const radiusCenter = [2.3454, 48.8452];
    const map = new maplibregl.Map({
        container: 'map',
        zoom: 13,
        center: radiusCenter,
        style: {
            version: 8,
            sources: {
                osm: {
                    type: 'raster',
                    tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
                    tileSize: 256,
                    attribution: '&copy; OpenStreetMap Contributors',
                    maxzoom: 19
                }
            },
            layers: [
                {
                    id: 'osm',
                    type: 'raster',
                    source: 'osm'
                }
            ]
        },
        maxZoom: 18,
        maxPitch: 85
    });

    map.on('load', () => {
        // Generate a polygon using turf.circle
        // See https://turfjs.org/docs/#circle
        const radius = 1; // kilometer
        const options = {
            steps: 64,
            units: 'kilometers'
        };
        const circle = turf.circle(radiusCenter, radius, options);

        // Add the circle as a GeoJSON source
        map.addSource('location-radius', {
            type: 'geojson',
            data: circle
        });

        // Add a fill layer with some transparency
        map.addLayer({
            id: 'location-radius',
            type: 'fill',
            source: 'location-radius',
            paint: {
                'fill-color': '#8CCFFF',
                'fill-opacity': 0.5
            }
        });

        // Add a line layer to draw the circle outline
        map.addLayer({
            id: 'location-radius-outline',
            type: 'line',
            source: 'location-radius',
            paint: {
                'line-color': '#0094ff',
                'line-width': 3
            }
        });
    });
</script>
</body>
</html>