Draw a circle¶

Draw a circle with radius to approximate a location.
Example¶

<!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">
    <script src='https://unpkg.com/@vietmap/vietmap-gl-js@4.2.0/vietmap-gl.js'></script>
    <link rel='stylesheet' href='https://unpkg.com/@vietmap/vietmap-gl-js@4.2.0/vietmap-gl.css' />
    <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 = [106.65718028654604,10.819725635578505, ];
    const map = new vietmapgl.Map({
        container: 'map',
        zoom: 13,
        center: radiusCenter,
        style: 'https://maps.vietmap.vn/mt/tm/style.json?apikey=YOUR_API_KEY_HERE',
        maxZoom: 18,
        maxPitch: 85
    });

    map.on('load', () => { 
        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>