Skip to content

Draw a Circle

Draw a radius to approximate a location with Turf.js

<!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 charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css' />
    <script src='https://unpkg.com/maplibre-gl@4.7.1/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>