React Leaflet Circle Radius

I am using react-leaflet to have a map of the world and display dots on this map.

I have a json with the following fields for each object: {accuracy_level, lat, long, name}. When I display the dots on the lat and long coordinates I use the Circle Component of react leaflet (https://react-leaflet.js.org/docs/api-components/#circle) to have a circle around the lat and long coordinates. The size of the circle varies when you are zooming.

My question is what does the number in the radius corresponds to ? I am assuming it is the number of pixels on the map. But for example if I have accuracy_level = 10 km, how do I know how many pixels on the map = 10km ?

This is what my code looks like for now.

<MapContainer center={location} zoom={13} scrollWheelZoom={true}>
        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"/>

        {data.map(x => (
           <Circle 
              center={[x.lat, x.long]} 
              pathOptions={{color: 'red'}} 
              radius={x.accuracy_level == "HIGH" ?  100 :  x.accuracy_level == "MEDIUM" ? 500 : 1000}>
        </Circle>
        ))}

      </MapContainer>

React Leaflet Circle Radius

0 Answers