Navigation Lines

[danielcooper-hk]

Hello,

I think LeafletForBlazor can really help my project out and I think I'm being a bit stupid here but cannot work it out.

I am currently using syncfusion maps and they are soooooo slow when you get to more than 200 waypoints on the map.

What I cannot seem to work out is how to create navigation lines between two sets of Co-ordinates in LeafletForBlazor.

I am plotting how goods can move from a warehouse to a seaport, then to the corresponding seaport then to the destination at the other end. There could be a couple of thousand sets of co-ordinates.

Can you point me in the right direction of drawing lines between map points?

Thanks,

Dan.

[ichim]

Hello sir,

First of all, I would like to understand what it is about. Basically, there are three ways to draw lines, polylines or lines between two pairs of coordinates:

1. First, DisplayPolylinesFromArray class provides addMeasure() method with which you can create lines between two pairs of coordinates. This method can display a label (midle of the line - measure line) with a text, for example distance.
2. Second, DisplayPolylinesFromArray provides add() method with which you create polylines (many pairs of coordinates)
3. But not least, the DataFromGeoJSON class that will allow you to display lines (but also points and polygons) stored in GeoJSON files.

Can you tell me what kind of lines they are?

From your description it is possible that addMeasure() from on DisplayPolylinesFromArray.

Laurentiu

[danielcooper-hk]

Hello, Thanks for such a quick reply. My Syncfusion map currently outputs like this: ***@***.*** And it takes it 8-10 seconds to render. The blue lines are road routes and the red lines are sea routes. To make the map render at all, I have had to ignore all of the interim waypoints for the road routes which makes the map less attractive, especially if the map is zoomed in properly. And my data looks like this: ***@***.*** To draw lines on the current map you link the 297 way points together into pairs, so [0,1] [1,2] [2,3] [3,4] etc. If I can achieve that with your library and it can perform instantly instead of in 30 seconds it will fix one of my biggest issues with this project. Look forward to hearing from you and keep up the good work with this library! Thanks, Dan. Regards, Daniel Cooper Alba Capital Tel: +852 9153 1221 From: Laurentiu Ichim ***@***.***> Date: Saturday, 15 June 2024 at 4:28 AM To: ichim/LeafletForBlazor-NuGet ***@***.***> Cc: Daniel Cooper ***@***.***>, Author ***@***.***> Subject: Re: [ichim/LeafletForBlazor-NuGet] Navigation Lines (Issue #35) Hello sir, first of all, I would like to understand what it is about. Basically, there are two ways to draw lines, polylines or lines between two pairs of coordinates: 1. First, DisplayPolylinesFromArray class provides addMeasure() method with which you can create lines between two pairs of coordinates. This method can display a label (midle of the line - measure line) with a text, for example distance. 2. Second, DisplayPolylinesFromArray provides add() method with which you create polylines (msny pairs of coordinates) 3. But not least, the DataFromGeoJSON class that will allow you to display lines (but also points and polygons) stored in GeoJSON files. Can you tell me what kind of lines they are? Laurentiu — Reply to this email directly, view it on GitHub<#35 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AXUP46SZF76ZZQI2UHYSDDTZHNG5XAVCNFSM6AAAAABJKU4RCOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNRYG4YTQMBVGM>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[ichim]

Hello sir,

I'm sorry, but I didn't understand. please give me examples (code) of what the coordinate pairs of the lines look like, as you want to draw them.

[danielcooper-hk]

Apologies Laurantiu, sending the response by email hasn't worked. Let me try again here directly.

The class I store the way points in is driven by the way Syncfusion wants to receive them. It is a double[] [startLat, endLat] and a double[] [startLong, endLong]:

public class MapNavigationLines
{
    public double[] Longitude { get; set; } = [];

    public double[] Latitude { get; set; } = [];

    public String Color { get; set; } = string.Empty;

    public string DashArray { get; set; } = "0";

    public double LineAngle { get; set; } = 0;
}

I use Color to set a different colour depending on the transportation type (i.e. air, road, rail or sea).

I have to transform into this format to use Syncfusion from the way it is stored in the database which is:

public class GeoRoutingLeg
{
    public bool IsRoad { get; set; } = false;

    public bool IsAir { get; set; } = false;

    public bool IsSea { get; set; } = false;

    public bool IsRail { get; set; } = false;

    public List<GeoRoutingWayPoints> WayPoints { get; set; } = [];
}

public class GeoRoutingWayPoints
{
    public double Longitude { get; set; } = 0;

    public double Latitude { get; set; } = 0;
}

Here, the first record in the list is the start point and the end is the endpoint, so the pairs would be [0,1] [1,2] [2,3] etc.

If the waypoints gets over 300 Syncfusion really struggles to draw the map.

Here is the Syncfusion Blazor Map component code also:

<SfMaps @ref="map" Height="100%">
    <MapsLayers>

        <MapsLayer UrlTemplate="https://a.tile.openstreetmap.org/level/tileX/tileY.png" TValue="string">

            <MapsShapeSettings Fill="#F5F1F0">
                <MapsShapeBorder Color="black" Width="0.2"></MapsShapeBorder>
            </MapsShapeSettings>

            <MapsZoomSettings Enable="true" ZoomFactor="4" MaxZoom="40" ShouldZoomInitially="true" MouseWheelZoom="false">
                <MapsZoomToolbarSettings>
                    <MapsZoomToolbarButton ToolbarItems="new List<Syncfusion.Blazor.Maps.ToolbarItem>() { Syncfusion.Blazor.Maps.ToolbarItem.Zoom, Syncfusion.Blazor.Maps.ToolbarItem.ZoomIn, Syncfusion.Blazor.Maps.ToolbarItem.ZoomOut, Syncfusion.Blazor.Maps.ToolbarItem.Pan, Syncfusion.Blazor.Maps.ToolbarItem.Reset }"> </MapsZoomToolbarButton>
                </MapsZoomToolbarSettings>
            </MapsZoomSettings>

            <MapsMarkerSettings>
                <MapsMarker Visible="true" Height="25" Width="25" DataSource="cities" TValue="MapCities">
                    <MapsMarkerTooltipSettings Visible="true" ValuePath="Name"></MapsMarkerTooltipSettings>
                </MapsMarker>
            </MapsMarkerSettings>
                               
            <MapsShapeSettings Autofill="true">
                <MapsNavigationLines>
                    @foreach (MapNavigationLines line in navigationLines)
                    {
                        <MapsNavigationLine Visible="true" Width="2" Color="@line.Color" Latitude="@line.Latitude" Longitude="@line.Longitude" DashArray="@line.DashArray" Angle="@line.LineAngle"></MapsNavigationLine>
                    }
                </MapsNavigationLines>
            </MapsShapeSettings>
        </MapsLayer>
    </MapsLayers>
</SfMaps>

in you can see that Syncfusion wants to receive the Latitude and Longitude in pairs rather than pairs of co-ordinates. The map it creates, and what I want to recreate using your library is:

I'm hopeless at Java/Javascript so was really hoping I could replace Syncfusion maps with Leaflet using your library.

The map will display a different route depending on which product the user selects and this part is where Syncfusion gets really slow as the user can wait up to 30 seconds to see the map. They have improved the component but it is still too slow for my purpose.

The only other requirement I have is blocking zooming using the mouse. One of the main users is on a Mac and the Apple Magic Mouse is super sensitive and it can cause chaos on the map if you get the angle of you hand wrong whilst hovering over the map.

Apologies for the previous reply, the email didn't include the attachments I pasted.

Hope this helps to explain my use case. Thanks for your help so far, Dan.

[ichim]

For this moment, I would recommend using the data in GeoJSON format:

https://github.com/ichim/LeafletForBlazor-NuGet/tree/main/RTM%20and%20GeoJSON/working%20with%20Files/GeoJSON%20from%20file