Map

Interactive slippy map with tile servers, markers, shapes, GeoJSON layers, and BptMapDatapoints for plotting timestamped data with canvas rendering, viewport culling, timeline scrubber, and bar graph drill-down filtering.

Map Parameters

Tile Provider

Zoom Control

Scroll Wheel Zoom

Offline Storage

Dragging

Marker Draggable

Click to Add Marker

Show Shapes

Marker Icon

Custom GeoJSON

Popup Background Color

Popup Border Color

Popup Max Width

Popup Border Width: 1px

0 10

Popup Border Radius: 6px

0 10

Datapoints Parameters

Show Datapoints

Map State

Center: 62.0000, 15.0000

Zoom: 4

Added markers: 0

Current Configuration

📋 [+]

<BptMap Center="new BptLatLng(62.0, 15.0)"
        Zoom="4"
        Height="600px">
    <BptMapMarker Position="new(59.91, 10.75)" Title="Oslo"
                  IconCssClass="bi bi-geo-alt-fill" IconColor="#e74c3c"
                  >
        <BptMarkerTestPopupContent Title="Oslo" Description="Capital of Norway" />
    </BptMapMarker>
</BptMap>

@code {
    private BptMap? map;

    // Load GeoJSON from URL
    await map.LoadGeoJsonFromUrl("https://example.com/data.geojson",
        new BptGeoJsonOptions
        {
            FillColor = "#2ecc71",
            LabelProperty = "name",
            FitBounds = true,
        });

}