How to prevent PointSymbol to change size when the zoom changes?

[rfarkv]

First of all, congratulations on your package, it's very useful!

So, I have a project that subscribes to a pub/sub service and every time a message arrives this message (coordinates) is used to move the icon on the map. In addition to moving the icon around the map, a circle is drawn in the same position as the icon that changes its radius according to the distance from the current point and the closest point on the route (polyline). The circle always has as its limit the closest point on the polyline. The problem is that this circle is changing size according to the zoom, I would like to always keep it at a fixed size. I read that the solution would be to create a circleMarker, but I didn't find anything about it in the documentation and since it's only been two days since I started working with leaflet I don't have much knowledge about it. Is it possible to make a circle that doesn't change size with the zoom?

Here is the spected behaviour:: For comparison this is the code i used with leafletjs.

     distanceCircle = L.circle([vehicleLatitude, vehicleLongitude], {
          radius: calculatedDistance, // Radius in meters
          color: 'red',
          fillOpacity: 0.2,
      }).addTo(map);

Here is what is happening:

Here is the code that is called every message to update the icon and the circle:

{
var pos = new double[] { vehiclePosition.lat, vehiclePosition.lng };

 //atualiza marcador
 realTimeMap.movePoint(pos);

 //circulo
 double totalDistance = [...]
 var pointsymbol = new RealTimeMap.PointSymbol
 {
     color = "red",
     fillOpacity = 0.2,
     radius = Convert.ToInt32(Math.Floor(totalDistance)),  
 };

 realTimeMap.movePoint(new double[] { vehiclePosition.lat, vehiclePosition.lng }, pointsymbol);
}

Thanks!

[ichim]

Hello sir,

Markers (circleMarker) will always have the scaled size at the zoom level. You will find the same at Esri. The reason is that if you are displaying bus stops (for example), you may want to be able to see them both at low and high zoom levels. In addition, the markers have the size given in the pixels (screen coordinates) versus map (real world/geographic) coordinates. The solution is to draw a circle.

[rfarkv]

Hello! Thank you for the quick answer. I see what you mean.

The solution is to draw a circle.

Can you point me to the right direction (pun intended) about this?

[ichim]

I'm sorry, for the moment LeafletForBlazor does not have circle creation (center and radius) explicitly.

I will add for the next version.

Alternatively, you can build a circle in C# (based on point coordinates and radius) and add it using: realTimeMap.Geometric.DisplayPolygonFromArray class.