StreamPoint Display Issue

[Flouriane]

Hello,

I am encountering an issue with displaying StreamPoint objects in LeafletForBlazor. While the points are successfully added via the add() method and are visible in the map’s data filters, they do not visually render on the map itself.

Map and Point Configuration
Basemap: Using RealTimeMap.BasemapLayer with OpenStreetMap.
Zoom Level: Configured to ensure visibility.
Coordinates: Tested with specific coordinates (latitude = 43.6, longitude = 3.8).

Here is the code used to add a point with a symbol:

 protected override void OnInitialized()
  {
      
      parameters = new RealTimeMap.LoadParameters
      {
          location = new RealTimeMap.Location
          {
              latitude = 43.6,
              longitude = 23.09
          },
          zoomLevel = 10,
          basemap = new RealTimeMap.Basemap
          {
              basemapLayers = new List<RealTimeMap.BasemapLayer>
              {
                  new RealTimeMap.BasemapLayer
                  {
                      url = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                      attribution = "© OpenStreetMap contributors",
                      minZoom = 1,
                      maxZoom = 19
                  }
              }
          }
      };

      base.OnInitialized();
  }

  private async Task AddMarker()
  {
      double latitude = 43.6;
      double longitude = 3.8;

      var point = new RealTimeMap.StreamPoint
      {   
          type ="Station 1",
          latitude = latitude,
          longitude = longitude,
          value = new RealTimeMap.PointSymbol
          {
              radius = 10,
              color = "blue",
              fillColor = "yellow",
              fillOpacity = 0.8,
              opacity = 1.0
          }
      };
      await leafletMap.Geometric.Points.add(point);
      afficherMap = true;
  }
}

Observed Outcome
Expected Outcome: The point should display on the map at the specified coordinates with the colors defined in PointSymbol.
Actual Outcome: The point does not appear visually on the map, although it is visible in the map’s data filters and during debugging.
Environment
LeafletForBlazor Version: 2.2.0.8
Framework: Blazor Server / Blazor WebAssembly
Browser: Chrome / Firefox (tested on multiple browsers)
Actions Taken
Increased zoom level.
Tested different colors and sizes for PointSymbol.
Verified basemap and point positions.
Thank you in advance for any help in resolving this issue. Any solutions or recommendations would be greatly appreciated!

[ichim]

Hello sir,

value property of the StreamPoint is used to extend the data structure of this object (StreamPoint). It cannot be used to change the StreamPoint appearance.

Your code should be:

<RealTimeMap @ref="leafletMap" width="460px" OnAfterMapLoaded="AddMarker" height="460px" />
@code{
    RealTimeMap? leafletMap;

    private async Task AddMarker()
    {
        leafletMap.Geometric.Points.Appearance(item => item.type == "Station 1").pattern = new RealTimeMap.PointSymbol
            {
                radius = 10,
                color = "blue",
                fillColor = "yellow",
                fillOpacity = 0.8,
                opacity = 1.0,
                weight = 2  //add line weight, default is 0
            };

        double latitude = 43.6;
        double longitude = 3.8;
        var point = new RealTimeMap.StreamPoint
            {
                type = "Station 1",
                latitude = latitude,
                longitude = longitude,
                
            };
        await leafletMap.Geometric.Points.add(point);
    }
}

Appearance() method can change the way points are displayed.
You can find more here:
https://github.com/ichim/LeafletForBlazor-NuGet/tree/main/RealTimeMap%20Geometric.Points%20Appearance

[Flouriane]

Hi,
Thanks for your fast answer !
I use the method you provided, but still have an issue when i use it ( With the new version you pushed )
leafletMap.Geometric.Points.add(point);

[ichim]

I don't understand error! But there was another similar bug that I solved in the last version 2.2.2.

Please copy error details and send me!!!

Please update package to last version.
....

The error is generated when a pattern on Appearance is null

Please update package to last version.

[Flouriane]

Thanks for your answer, the last version was already updated this morning :)

Error Generated

TypeError: Cannot read properties of undefined (reading 'symbols')

  Message=
  Source=
  Arborescence des appels de procédure :
  at Module.settingsOfRendering (http://localhost:57406/_content/LeafletForBlazor/RealTime/Map.js:1:6338)
    at http://localhost:57406/_framework/blazor.webassembly.js:1:2878
    at new Promise (<anonymous>)
    at b.beginInvokeJSFromDotNet (http://localhost:57406/_framework/blazor.webassembly.js:1:2835)
    at Object.vn [as invokeJSJson] (http://localhost:57406/_framework/blazor.webassembly.js:1:58849)
    at http://localhost:57406/_framework/dotnet.runtime.8.0.8.ml6rl4oyrq.js:3:178428
    at Ll (http://localhost:57406/_framework/dotnet.runtime.8.0.8.ml6rl4oyrq.js:3:179262)
    at wasm://wasm/00b21c96:wasm-function[349]:0x1f99d
    at wasm://wasm/00b21c96:wasm-function[245]:0x1be41
    at wasm://wasm/00b21c96:wasm-function[238]:0xf00e

Nuggets Version : 2.2.2

razor.cs

public partial class InteractiveMap : ComponentBase
{
    RealTimeMap? leafletMap;
    private RealTimeMap.LoadParameters parameters;
    private bool afficherMap = false;

    protected override void OnInitialized()
    {
        base.OnInitialized();
    }
    private async Task AddMarker()
    {        
        
        leafletMap.Geometric.Points.Appearance(item => item.type == "Station 1", true).pattern = new RealTimeMap.PointSymbol
        {
            radius = 10,
            color = "blue",
            fillColor = "yellow",
            fillOpacity = 0.8,
            opacity = 1.0,
            weight = 2  
        };

        double latitude = 43.6;
        double longitude = 3.8;
        var point = new RealTimeMap.StreamPoint
        {
            type = "Station 1",
            latitude = latitude,
            longitude = longitude,

        };
        await leafletMap.Geometric.Points.add(point);
    }

}

Razor
<RealTimeMap @ref="leafletMap" width="460px" OnAfterMapLoaded="AddMarker" height="460px" />

Error come when i use Apparence() Method..

Ty !

[ichim]

I am sorry, your code on 2.2.2 version does not generate error for me!

Sir, please run your code and after that copy the error by choosing "Copier les details" and then send me the message. Please!

I want to understand what is happening.