BlazorizedMapbox 1.0.0

BlazorizedMapbox

A Blazor wrapper for Mapbox GL JS.

Live Demo: https://agreeable-moss-06035d810.3.azurestaticapps.net/

Setup

1. Add the Mapbox GL JS CSS and Script to your index.html or App.razor (for Blazor Server/Web):

<link href="https://api.mapbox.com/mapbox-gl-js/v3.1.2/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.1.2/mapbox-gl.js"></script>

2. Add the BlazorizedMapbox namespace to _Imports.razor:

@using BlazorizedMapbox
@using BlazorizedMapbox.Models

3. Register the service in Program.cs (Optional, but recommended for global Access Token):

builder.Services.AddBlazorizedMapbox(options =>
{
    options.AccessToken = builder.Configuration["Mapbox:AccessToken"];
});

Usage

<MapboxMap @ref="map" 
           Id="my-map" 
           Style="height: 500px; width: 100%;"
           Options="@mapOptions" 
           OnMapLoaded="OnMapLoaded" 
           OnMapClick="OnMapClick"
           OnZoomEnd="OnZoomEnd"
           OnGeoJsonHover="OnGeoJsonHover" />

@code {
    private MapboxMap map = null!;

    private MapOptions mapOptions = new()
    {
        // AccessToken is optional here if configured in Program.cs
        Center = new[] { 69.2401, 41.2995 }, // Tashkent
        Zoom = 12,
        Pitch = 45,
        Style = MapboxStyles.Standard,
        LightPreset = LightPreset.Night,
        ColorTheme = ColorTheme.Default,
        Fog = new FogOptions
        {
            Range = new[] { 0.5, 10.0 },
            Color = "rgb(186, 210, 235)",
            HighColor = "rgb(36, 92, 223)",
            SpaceColor = "rgb(11, 11, 25)",
            StarIntensity = 0.35
        }
    };

    private async Task OnMapLoaded()
    {
        Console.WriteLine("Map loaded!");

        // Add a GeoJSON layer
        await map.AddGeoJsonLayerAsync(new GeoJsonLayerConfig
        {
            Id = "uzbekistan_layer",
            Url = "https://raw.githubusercontent.com/georgique/world-geojson/main/areas/uzbekistan/uzbekistan.json",
            FillColor = "#2e1500",
            FillOpacity = 0.35,
            BorderColor = "#de6902",
            BorderWidth = 2.0
        });

        // Add a Marker
        await map.AddMarkerAsync(new MarkerOptions
        {
            Lng = 69.2401,
            Lat = 41.2995,
            Color = "red",
            Popup = new PopupOptions { Html = "<h3>Tashkent</h3><p>Capital of Uzbekistan</p>" }
        });
    }

    private void OnMapClick(MapClickEvent e)
    {
        Console.WriteLine($"Clicked at {e.Lat}, {e.Lng}");
    }

    private void OnZoomEnd(MapMoveEvent e)
    {
        Console.WriteLine($"Zoom ended at level: {e.Zoom}");
    }

    private void OnGeoJsonHover(GeoJsonHoverEvent e)
    {
        if (e.Properties != null && e.Properties.TryGetValue("name", out var name))
        {
            Console.WriteLine($"Hovered region: {name}");
        }
    }
    
    private async Task RemoveLayer()
    {
        await map.RemoveGeoJsonLayerAsync("uzbekistan_layer");
    }
}

Features

• Map Initialization: Easy setup with MapOptions.
• Themes & Styling: Support for MapboxStyles, LightPreset, ColorTheme, and Fog.
• GeoJSON Layers: Add and remove GeoJSON layers with custom styling (AddGeoJsonLayerAsync, RemoveGeoJsonLayerAsync).
• Markers: Add markers with popups (AddMarkerAsync).
• Events:
  • OnMapLoaded
  • OnMapClick
  • OnMapMoveEnd
  • OnZoomStart
  • OnZoomEnd
  • OnGeoJsonHover (returns properties of the hovered feature)
• Camera Control: FlyToAsync, JumpToAsync.