Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
rfarkv opened this issue Nov 8, 2024 · 4 comments
Open

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

rfarkv opened this issue Nov 8, 2024 · 4 comments

Comments

@rfarkv
Copy link

rfarkv commented Nov 8, 2024

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);
            

Animation

Here is what is happening:
Animation2

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
Copy link
Owner

ichim commented Nov 8, 2024

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
Copy link
Author

rfarkv commented Nov 8, 2024

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
Copy link
Owner

ichim commented Nov 8, 2024

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.

@rfarkv
Copy link
Author

rfarkv commented Nov 18, 2024

That did the trick, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants