MeshWeaver.GoogleMaps 2.5.0

MeshWeaver Google Maps Integration

This library provides Google Maps integration for MeshWeaver applications, offering framework-agnostic map controls with Blazor Server rendering capabilities.

Projects

MeshWeaver.GoogleMaps

Core library containing the framework-agnostic Google Maps controls and data models.

MeshWeaver.Blazor.GoogleMaps

Blazor Server implementation providing the rendering layer for Google Maps integration.

Features

• Interactive Maps: Display Google Maps with customizable options
• Markers: Add clickable markers with titles, labels, and custom icons
• Circles: Display circular overlays with customizable styling
• Click Events: Handle marker and circle click events through MeshWeaver's message hub
• Responsive Design: Maps automatically adapt to container dimensions
• Dynamic Updates: Real-time marker and circle updates without page refresh

Quick Start

1. Configuration

Add Google Maps to your MeshWeaver hub configuration:

public static MessageHubConfiguration ConfigureHub(this MessageHubConfiguration config)
{
    return config.AddGoogleMaps();
}

Configure your Google Maps API key:

services.Configure<GoogleMapsConfiguration>(options =>
{
    options.ApiKey = "your-google-maps-api-key";
    options.Libraries = "places,visualization,drawing,marker"; // Optional
    options.Language = "en"; // Optional
    options.Region = "US"; // Optional
});

2. Creating a Map Control

public static UiControl CreateMap() =>
    new GoogleMapControl
    {
        Options = new MapOptions
        {
            Center = new LatLng(37.7749, -122.4194), // San Francisco
            Zoom = 12,
            MapTypeId = "roadmap"
        },
        Markers = new[]
        {
            new MapMarker
            {
                Position = new LatLng(37.7749, -122.4194),
                Title = "San Francisco",
                Label = "SF",
                Id = "sf-marker"
            }
        },
        Circles = new[]
        {
            new MapCircle
            {
                Center = new LatLng(37.7749, -122.4194),
                Radius = 5000, // 5km radius
                FillColor = "#FF0000",
                FillOpacity = 0.35,
                Id = "sf-circle"
            }
        }
    }.WithStyle("height: 400px; width: 100%;");

API Reference

GoogleMapControl

Main control for rendering Google Maps.

Properties:

• Options: Map configuration options
• Markers: Collection of map markers
• Circles: Collection of map circles

MapOptions

Configuration options for the map display.

Properties:

• Center: Map center coordinates (LatLng)
• Zoom: Zoom level (default: 15)
• MapTypeId: Map type - "roadmap", "satellite", "hybrid", "terrain" (default: "roadmap")
• DisableDefaultUI: Hide all default UI controls (default: false)
• ZoomControl: Show zoom controls (default: true)
• MapTypeControl: Show map type selector (default: true)
• ScaleControl: Show scale control (default: false)
• StreetViewControl: Show street view control (default: true)
• RotateControl: Show rotation control (default: false)
• FullscreenControl: Show fullscreen control (default: false)

MapMarker

Represents a clickable point on the map.

Properties:

• Position: Marker coordinates (LatLng)
• Title: Hover tooltip text
• Label: Single character marker label
• Draggable: Allow marker dragging (default: false)
• Icon: Custom marker icon URL
• Id: Unique identifier for click events
• Data: Additional data payload

MapCircle

Represents a circular overlay on the map.

Properties:

• Center: Circle center coordinates (LatLng)
• Radius: Circle radius in meters (default: 1000)
• FillColor: Interior fill color (default: "#FF0000")
• FillOpacity: Interior fill opacity (default: 0.35)
• StrokeColor: Border color (default: "#FF0000")
• StrokeOpacity: Border opacity (default: 0.8)
• StrokeWeight: Border width in pixels (default: 2)
• Id: Unique identifier for click events
• Data: Additional data payload

LatLng

Represents geographical coordinates.

Constructor:

• LatLng(double Lat, double Lng)

Event Handling

The GoogleMapView automatically handles marker and circle clicks, posting ClickedEvent messages through MeshWeaver's message hub:

public class MyHandler
{
    public IMessageDelivery HandleMapClick(MessageHub hub, IMessageDelivery<ClickedEvent> delivery)
    {
        var clickedId = delivery.Message.Payload; // Marker or circle ID
        // Handle the click event
        return delivery.Processed();
    }
}

Register the handler in your hub configuration:

config.AddHandler<ClickedEvent>(HandleMapClick)

GoogleMapsConfiguration

Configuration options for the Google Maps API integration.

Properties:

• ApiKey: Your Google Maps JavaScript API key (required)
• Libraries: Comma-separated list of additional libraries to load (optional)
• Language: Language for map labels and controls (optional)
• Region: Localization region (optional)

Requirements

• Google Maps JavaScript API Key: Required for map functionality
• Internet Connection: Maps require external API access
• .NET 9.0: Target framework
• Blazor Server: For rendering implementation

Dependencies

MeshWeaver.GoogleMaps

• MeshWeaver.Layout

MeshWeaver.Blazor.GoogleMaps

• MeshWeaver.Blazor
• MeshWeaver.GoogleMaps
• Microsoft.AspNetCore.Components.Web

Integration Example

public static class MyLayoutAreas
{
    public static void AddMapAreas(this LayoutConfiguration config)
    {
        config.AddLayoutArea("LocationMap", LocationMap);
    }

    public static UiControl LocationMap(LayoutAreaHost host, RenderingContext ctx)
    {
        var locations = GetLocations(); // Your data source

        return new GoogleMapControl
        {
            Options = new MapOptions
            {
                Center = new LatLng(locations.First().Latitude, locations.First().Longitude),
                Zoom = 10
            },
            Markers = locations.Select(loc => new MapMarker
            {
                Position = new LatLng(loc.Latitude, loc.Longitude),
                Title = loc.Name,
                Id = loc.Id.ToString()
            }).ToArray()
        }.WithStyle("height: 500px;");
    }
}

Styling

The map container automatically adapts to its parent's dimensions. Use CSS styling through the WithStyle() method:

var map = new GoogleMapControl { /* options */ }
    .WithStyle("height: 400px; width: 100%; border: 1px solid #ccc;");

Performance Notes

• Maps are rendered asynchronously after initial page load
• Marker and circle updates are batched and delayed to prevent excessive API calls
• JavaScript module loading is optimized with dynamic imports
• Component implements proper cleanup to prevent memory leaks