How to draw a Radius with Marker in Mapbox

How to draw a Radius with Marker in Mapbox

I want to draw a 1km of radius from the current location in Mapbox.

Prerequisite

Install this dependency first before we started our tutorial

  1. MapboxGL
  2. Turf

Instructions

Load the basic map

We need to write a div container for the map box

<div id="map"></div>

Import the necessary CSS to make the map load

body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }

Initialize the map box in the Javascript. Don't forget to replace the access token with yours. You can get it here - link

// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';

const LAT = 40;
const LONG = -74.5;

let map = new mapboxgl.Map({
	container: 'map', // container id
	style: 'mapbox://styles/mapbox/streets-v11', // style URL
	center: [LONG, LAT], // starting position [lng, lat]
	zoom: 12 // starting zoom
});

Draw a radius circle

Since Mapbox doesn't have this feature but they support a custom layer format. We gonna draw our own circle with multiple coordinates and import it inside our map box.

First of all, we need to listen to the load listener first. We only can apply this configuration whenever the map is successfully loaded.

map.on('load', function(e) {
	/// The rest of the code
}

Generate the GeoJSON

We gonna use turf to generate this JSON. It's straightforward. The circle variable will provide the JSON format.

// Add Circle Radius
const center = [LONG, LAT];
const radius = 1;
const options = {
	steps: 20,
	units: "kilometers",
};


const circle = turf.circle(center, radius, options);

Add source to Mapbox

Then, we gonna declare the source inside the Mapbox with the type geojson and pass the generated JSON as an argument.

map.addSource("circleData", {
	type: "geojson",
	data: circle
});

Add the layer to Mapbox

After that, we can add the layer to the map box and change the color in the paint property.

map.addLayer({
	id: "circle-fill",
	type: "fill",
	source: "circleData",
	paint: {
		"fill-color": "yellow",
		"fill-opacity": 0.2
	}
});

Mapbox with radius

Congratulations. It's done now :). Hope it's gonna help you build your map box component.

Snippets

// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';

const LAT = 40;
const LONG = -74.5;

let map = new mapboxgl.Map({
   container: 'map', // container id
   style: 'mapbox://styles/mapbox/streets-v11', // style URL
   center: [LONG, LAT], // starting position [lng, lat]
   zoom: 12 // starting zoom
});


// Add Circle Radius
const center = [LONG, LAT];
const radius = 1;
const options = {
   steps: 20,
   units: "kilometers",
};


const circle = turf.circle(center, radius, options);


map.on('load', function(e) {
   
map.addSource("circleData", {
   type: "geojson",
   data: circle
});


map.addLayer({
   id: "circle-fill",
   type: "fill",
   source: "circleData",
   paint: {
   	"fill-color": "yellow",
   	"fill-opacity": 0.2
   }
});

});

// Add marker
let marker = new mapboxgl.Marker({
   draggable: true
})
   .setLngLat([LONG, LAT])
   .addTo(map);

Codepen