GeoJson PointToLayer example

[stevenhin]

Is it possible to add a sample for GeoJson's PointToLayer function in your ExampleApp?

[bjtrounson]

Yep can do, I'll try get one done tonight if I have time.

[stevenhin]

Thank you for doing so, looking forward to try out.

[bjtrounson]

Hi Steven,

Sorry for the late response here is a little example on using point to layer. I'll look at adding it to the repo when I'm free. Using the callback functions and calling JS from inside of them can be really tricky. You have to do most of JS calls as async which none of the callback are so you have to make them outside.

The below example is of returning a new marker using the described method above.

@using BlazorLeafletInterop.Models.Options.Map
@using BlazorLeafletInterop.Models.Basics
@using BlazorLeafletInterop.Components
@using BlazorLeafletInterop.Components.Layers.Raster
@using BlazorLeafletInterop.Components.Layers.Misc
@using BlazorLeafletInterop.Factories
@using BlazorLeafletInterop.Models.Options.Layer.UI
@using GeoJSON.Text.Feature
@using GeoJSON.Text.Geometry
@using Point = GeoJSON.Text.Geometry.Point

@inject ILayerFactory LayerFactory

<Map Class="map" MapOptions="Options">
    <TileLayer UrlTemplate="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
    <GeoJson
        Data="_featureCollection"
        PointToLayer="PointToLayer"
    />
</Map>

@code {
    private IJSObjectReference customMarker;
    private readonly FeatureCollection _featureCollection = new FeatureCollection {
        Features = new List<Feature> {
            new Feature {
                Geometry = new Point(new Position(0, 0))
            }
        }
    };
    private MapOptions Options = new() {
        Center = new LatLng(0, 0),
        Zoom = 13
    };

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);
        var options = new MarkerOptions
        {
            Opacity = 0.5,
            Title = "I'm a GeoJSON point!"
        };
        var latLng = new LatLng(0, 0);
        customMarker = await LayerFactory.CreateMarker(latLng, options);
    }

    private IJSObjectReference? PointToLayer(Feature? feature, LatLng latLng) {
        if (feature == null) {
            return null;
        }

        return customMarker;
    }
}

[stevenhin]

Thank you for putting together this example, I will try this out and let you know.