Extras
Map
Bit.BlazorUI.ExtrasGeoMapMaps
BitMap is a provider-pluggable interactive map. One API drives markers, vector shapes, GeoJSON and tile overlays across seven backends - Leaflet, MapLibre GL, Mapbox GL, OpenLayers, ArcGIS, Azure Maps and CesiumJS - and adds what they leave out, uniformly: two-way camera binding, marker clustering, Blazor-rendered popups, cooperative gestures, a keyboard and screen-reader story, loading states and theming that follows the app.
Notes
To use this component, install the
Bit.BlazorUI.Extras(opens in a new tab)
nuget package.
BitMap<TMapProvider> is generic: the type argument picks the backend and Provider
configures it. The provider is compared by reference - assign a new instance to apply changed options.
Imperative methods need a @ref and throw until OnReady has fired.
AdditionalOptions on a provider is passed straight to the library's map constructor (Leaflet,
MapLibre and Mapbox), for anything this component does not model.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
A Leaflet map with the default OpenStreetMap tiles. Leaflet ships inside the package, so it needs no token
and no CDN. The map fills its container: give that container a height, or set --bit-Map-height.
Use the arrow keys to pan the map, plus and minus to zoom, and Escape to leave the map.
Loading map…
Markers
Add, move and remove markers by id once OnReady has fired. Alt is the accessible name,
PopupText is escaped (PopupHtml is not - never pass user data to it), and a tooltip shows on
hover and on keyboard focus. OpenMarkerPopup / CloseMarkerPopup drive the popup, which Escape
also closes. SyncMarkers replaces the whole set in one interop call.
Use the arrow keys to pan the map, plus and minus to zoom, and Escape to leave the map.
Loading map…
Click, hover or drag a marker.
Data binding
@bind-Center and @bind-Zoom make the camera ordinary state: assigning moves the map, panning
writes back. Markers takes the whole set as a collection; markers compare by value, so only the ones
that changed are touched.
Use the arrow keys to pan the map, plus and minus to zoom, and Escape to leave the map.
Loading map…
Centre 41.9028, 12.4964 - zoom 5.0 - 2 marker(s)
Marker icons
Every provider draws the same pin, in the theme's primary color or the marker's Color - any CSS color,
a theme variable included. IconUrl replaces it, sized by IconWidth/IconHeight;
IconAnchorX/IconAnchorY name the pixel that sits on the coordinate - the bottom centre by
default, right for a pin and wrong for a disc. The ring marks the true coordinate.
Use the arrow keys to pan the map, plus and minus to zoom, and Escape to leave the map.
Loading map…
Popup content
MarkerPopupTemplate renders a marker's popup as live Blazor markup - escaped, and able to hold
components and handlers. It is a dialog named after the marker: focus moves in on open, and Escape, a click
on the map or the close button dismisses it. It looks the same on every provider, and pans the map to fit
(PopupAutoPan).
Use the arrow keys to pan the map, plus and minus to zoom, and Escape to leave the map.
Loading map…
Click a marker, then the button in its popup.
Clustering
Clustering merges nearby markers into a bubble showing their count; a click zooms to fit them and
raises OnClusterClick. It runs inside BitMap, so it is the same on every provider, and the bubbles
take the theme's primary color unless Color is set.
Use the arrow keys to pan the map, plus and minus to zoom, and Escape to leave the map.
Loading map…
Click a bubble to zoom into it.
Vector layers
Polylines, polygons, circles (radius in metres), rectangles and GeoJSON, each under an id and styled by
BitMapVectorPathStyle - any CSS color, a theme variable included, or the theme's primary when unset.
A click raises OnVectorClick, or OnGeoJsonFeatureClick with the
feature's properties - treat those as untrusted data.
Use the arrow keys to pan the map, plus and minus to zoom, and Escape to leave the map.
Loading map…
Click a shape.
Layers
Switch the basemap with a new provider instance (credit the tile source in TileAttribution).
AddTileOverlay stacks another XYZ source on top. SetLayerVisible,
SetTileOverlayVisible, SetLayerStyle and SetTileOverlayOpacity change a layer while
keeping its definition - a hidden layer, unlike a transparent one, no longer swallows clicks.
Use the arrow keys to pan the map, plus and minus to zoom, and Escape to leave the map.
Loading map…
Switch the basemap, or change the area and the labels.
Camera & events
FlyTo animates and SetZoom/SetView/PanTo move the camera; under a reduced-motion
preference a flight jumps instead (RespectReducedMotion). Locate asks the browser for the
visitor's position. OnClick, OnDoubleClick and OnContextMenu report a coordinate;
OnViewChanged fires once a pan or zoom settles.
Use the arrow keys to pan the map, plus and minus to zoom, and Escape to leave the map.
Loading map…
Click, double-click or right-click the map, or pan it.
Interaction
The provider's toggles switch individual gestures off, add a scale bar or keep the view inside
MaxBounds. Disabled makes the whole map inert - out of the tab order and away from
the pointer - and dims it.
Use the arrow keys to pan the map, plus and minus to zoom, and Escape to leave the map.
Loading map…
Custom controls
ChildContent floats above the map; only its children take the pointer. Build controls from
ZoomIn, ZoomOut, PanBy and ToggleFullscreen - the pan buttons are the
single-pointer alternative to dragging WCAG 2.5.7 asks for, and fullscreen takes the overlay with it.
Use the arrow keys to pan the map, plus and minus to zoom, and Escape to leave the map.
Loading map…
Geographic helpers
BitMapLatLng measures (DistanceTo), travels (Offset) and frames a radius
(ToBounds); BitMapLatLngBounds builds, tests, grows and pads boxes, across the antimeridian too.
FitBounds takes a maxZoom ceiling, and Project gives a coordinate's pixel position in the
map. Click the map to drop a probe.
Use the arrow keys to pan the map, plus and minus to zoom, and Escape to leave the map.
Loading map…
Click the map to drop a probe.
Accessibility
The canvas is one tab stop on every provider: a region named by AriaLabel (RoleDescription
replaces "region") and described by KeyboardInstructions, shown while it has keyboard focus. Arrow
keys pan, plus and minus zoom - on all seven backends - and Escape leaves it (EscapeToExit).
AnnounceViewChanges reads the new view
out, worded by ViewAnnouncementFormatter. CooperativeGestures lets the page scroll past the map.
MarkerListMode renders the markers as a table - the only way a screen reader reaches them.
Arrow keys pan the map, plus and minus zoom, Escape leaves the map.
Loading map…
| Name | Latitude | Longitude | Show on map |
|---|
Loading and lifecycle
LoadState goes Idle, Loading, then Ready, Failed or Unsupported (no WebGL for a GL provider), each
reported by OnLoadStateChanged and replaceable by LoadingTemplate, ErrorTemplate and
UnsupportedTemplate. LazyLoad waits until the map scrolls into view; AutoResize follows
the container - drag its corner.
State: Idle
Use the arrow keys to pan the map, plus and minus to zoom, and Escape to leave the map.
Providers
The same markup on every backend - only the type argument and the provider change. MapLibre and Mapbox
render vector tiles on the GPU, OpenLayers handles arbitrary projections, Cesium draws a 3D globe.
BitMapboxMapProvider needs an AccessToken, BitAzureMapsMapProvider a
SubscriptionKey, and ArcGIS an ApiKey for non-OSM basemaps: ship only public keys restricted to
your domains, or short-lived tokens minted by your server.
Provider
Use the arrow keys to pan the map, plus and minus to zoom, and Escape to leave the map.
Loading map…
Cascading parameters
BitParams carries a BitMapParams to every map under it, whatever its provider - set the gestures,
the accessibility texts and the look of all of them once. These are defaults: a parameter a map sets itself
wins.
Arrows pan, plus and minus zoom, Escape leaves.
Loading map…
Style & Class
Style and Class land on the root; Styles and Classes reach each part by name. The
CSS variables inherit, so one set on
:root or an
ancestor restyles every map below it - the popups and tooltips of the providers and the cluster bubbles too.
--bit-Map-tile-filter filters the raster tiles alone (the second map mutes them, its bubbles stay
vivid); invert(1) hue-rotate(180deg) under a dark theme gives a dark basemap.
Use the arrow keys to pan the map, plus and minus to zoom, and Escape to leave the map.
Loading map…
Use the arrow keys to pan the map, plus and minus to zoom, and Escape to leave the map.
Loading map…
RTL
Dir="BitDir.Rtl" flips the map's own chrome - the keyboard instructions, the gesture hint, the overlay
content and the marker table. The canvas itself is direction-neutral.
Use the arrow keys to pan the map, plus and minus to zoom, and Escape to leave the map.
Loading map…
CSS variables
The public custom properties this component reads off its root, for what no parameter covers.
Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property:
set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it,
or on the Style of one instance to restyle it - and any instance nested inside it, which inherits the value too; a parameter changes one alone,
as does the real CSS property on the instance's Style / Styles when that property does not inherit (opacity: 1 keeps
one disabled instance undimmed without undimming a disabled one inside it), while an inherited one such as color or
font-family also reaches the nested instances that do not set it themselves. Leave a variable unset and the component
falls back to the theme token beside it.
BitMap CSS variables
| Name | Default value | Description |
|---|---|---|
| --bit-Map-height | 100% | Height of the map. A percentage needs a container with a height of its own. |
| --bit-Map-background | --bit-clr-bg-sec | What shows where no tile is drawn: before the tiles load, behind the loading cover and around a fullscreen map. |
| --bit-Map-tile-filter | none | CSS filter on the raster tiles of Leaflet and OpenLayers - never the vectors and markers on them. invert(1) hue-rotate(180deg) is a dark basemap. |
| --bit-Map-border | none | Border of the map. |
| --bit-Map-radius | --bit-shp-radius-none | Corner radius of the map, which clips the tiles too. |
| --bit-Map-focus-color | --bit-clr-pri-focus | Focus outline of the map canvas. |
| --bit-Map-disabled-opacity | --bit-opa-dis | Opacity of the canvas of a disabled map. |
| --bit-Map-popup-background | --bit-clr-bg-pri | Background of the popups (the providers' included) and the keyboard instructions. |
| --bit-Map-popup-color | --bit-clr-fg-pri | Text color of the popups and the keyboard instructions. |
| --bit-Map-popup-radius | --bit-shp-radius-popup | Corner radius of the popups, the tooltips and the keyboard instructions. |
| --bit-Map-popup-shadow | --bit-shd-popup | Elevation of the popups and the keyboard instructions. |
| --bit-Map-popup-padding | spacing(1) spacing(1.25) | Padding of the MarkerPopupTemplate popup. |
| --bit-Map-popup-max-width | 18rem | Widest the MarkerPopupTemplate popup gets before wrapping. |
| --bit-Map-tooltip-background | --bit-clr-tooltip-bg | Background of the marker tooltips. |
| --bit-Map-tooltip-color | --bit-clr-tooltip-fg | Text color of the marker tooltips. |
| --bit-Map-hint-background | --bit-clr-bg-overlay | Backdrop of the cooperative-gestures hint. |
| --bit-Map-hint-color | --bit-clr-ntr-white | Text color of the cooperative-gestures hint. |
| --bit-Map-marker-color | --bit-clr-pri | The default pin, on every provider, unless BitMapMarker.Color is set. |
| --bit-Map-vector-color | --bit-clr-pri | Stroke and fill of the shapes, on every provider, unless BitMapVectorPathStyle.Color is set. |
| --bit-Map-cluster-background | --bit-clr-pri | Fill of the cluster bubbles, unless BitMapClustering.Color is set. |
| --bit-Map-cluster-color | --bit-clr-pri-text | Count inside the cluster bubbles, unless BitMapClustering.TextColor is set. |
| --bit-Map-cluster-border-color | --bit-clr-ntr-white | Ring around the cluster bubbles. |
API
Every parameter, public member, sub-class and enum this component exposes.
BitMap parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| AnnounceViewChanges | bool | false | Announces the new centre and zoom through a polite live region after the user pans or zooms, throttled by ViewAnnouncementThrottle. |
| AutoResize | bool | true | Keeps the map sized to its container, which also recovers a map created inside a hidden tab. |
| Center | BitMapLatLng? | null | Two-way bindable centre: assigning it moves the map, panning writes it back. Unset, the provider's Center owns the camera. |
| ChildContent | RenderFragment? | null | Content floated above the map, such as custom controls. Only its children take the pointer, each sized to its content from the top-start corner. |
| Classes | BitMapClassStyles? | null | Custom CSS classes for different parts of the map. |
| Clustering | BitMapClustering? | null | Groups nearby markers into a bubble showing their count, the same way on every provider. Null draws every marker. |
| CooperativeGestures | bool | false | Requires ctrl/⌘ + wheel to zoom and two fingers to pan, so a bare gesture scrolls the page instead and shows a hint. |
| CooperativeGesturesTouchHint | string | Use two fingers to move the map | The hint shown when a one-finger drag is blocked. |
| CooperativeGesturesWheelHint | string | Use ctrl + scroll to zoom the map | The hint shown when a bare wheel gesture is blocked. |
| ErrorLabel | string | The map could not be loaded. | The text of the built-in failure message. |
| ErrorTemplate | RenderFragment<Exception?>? | null | Replaces the built-in failure message, receiving the exception when there is one. |
| EscapeToExit | bool | true | Moves the focus out of the canvas on Escape, so a focused map is never a keyboard trap. An open marker popup is closed first. |
| KeyboardInstructions | string | Use the arrow keys to pan the map, plus and minus to zoom, and Escape to leave the map. | The keyboard model, read by assistive technologies and shown while the canvas has keyboard focus. |
| LazyLoad | bool | false | Defers creating the map until its container is near the viewport. LoadState stays Idle until then. |
| LazyLoadRootMargin | string | 200px | How far outside the viewport the container still counts as visible for LazyLoad. |
| LoadingLabel | string | Loading map… | The text of the built-in loading indicator. |
| LoadingTemplate | RenderFragment? | null | Replaces the built-in loading indicator. |
| MarkerListActionHeader | string | Show on map | The label of the button bringing a marker into view, also the hidden column heading. |
| MarkerListCaption | string | Map markers | The caption of the marker table. Say what the markers are. |
| MarkerListLatitudeHeader | string | Latitude | The heading of the latitude column. |
| MarkerListLongitudeHeader | string | Longitude | The heading of the longitude column. |
| MarkerListMode | BitMapMarkerListMode | BitMapMarkerListMode.None | Renders the markers as a table of names and coordinates whose rows bring their marker into view - the text alternative a screen reader needs. |
| MarkerListNameHeader | string | Name | The heading of the name column. |
| MarkerListTemplate | RenderFragment<IReadOnlyList<BitMapMarker>>? | null | Replaces the built-in marker table. |
| MarkerListZoom | double? | 15 | The zoom a marker-list row brings its marker into view at. Null keeps the current zoom. |
| MarkerPopupTemplate | RenderFragment<BitMapMarker>? | null | The content of the popup a marker click opens, as live Blazor markup - escaped, and able to hold components and handlers. |
| Markers | IEnumerable<BitMapMarker>? | null | The markers as a collection. They compare by value, so only the changed ones are sent. It owns the set: imperative additions are reconciled away on its next change. |
| OnClick | EventCallback<BitMapLatLng> | Fires when the map is clicked away from a marker or a vector layer. | |
| OnClusterClick | EventCallback<BitMapClusterClickArgs> | Fires when a cluster bubble is clicked, instead of OnMarkerClick. | |
| OnContextMenu | EventCallback<BitMapLatLng> | Fires on a right-click or a long press, with the coordinate under the pointer. | |
| OnDoubleClick | EventCallback<BitMapLatLng> | Fires when the map is double-clicked. | |
| OnFullscreenChanged | EventCallback<bool> | Fires when the map enters or leaves fullscreen, however it did. | |
| OnGeoJsonFeatureClick | EventCallback<BitMapGeoJsonFeatureClickArgs> | Fires when a feature of a GeoJSON layer is clicked, with its properties. | |
| OnInteropError | EventCallback<BitMapInteropErrorArgs> | Fires when a call into the provider fails. The component swallows these failures, so this is where to log them. | |
| OnLoadStateChanged | EventCallback<BitMapLoadState> | Fires whenever LoadState changes. | |
| OnMarkerClick | EventCallback<string> | Fires when a marker is clicked, with its id. | |
| OnMarkerDragEnd | EventCallback<BitMapMarkerDragEndArgs> | Fires when a draggable marker is dropped. | |
| OnPopupClosed | EventCallback | Fires when the MarkerPopupTemplate popup closes. | |
| OnPopupOpened | EventCallback<BitMapMarker> | Fires when the MarkerPopupTemplate popup opens, with its marker. | |
| OnReady | EventCallback | Fires once the map can take imperative calls, and again after a swap to a provider with another backend. | |
| OnRenderContextLost | EventCallback | Fires when the browser drops the WebGL context the map renders into. | |
| OnRenderContextRestored | EventCallback | Fires when a lost WebGL context is restored. | |
| OnVectorClick | EventCallback<BitMapVectorClickArgs> | Fires when a vector layer is clicked. | |
| OnViewChanged | EventCallback<BitMapViewState> | Fires once a pan or zoom settles. | |
| PopupAutoPan | bool | true | Pans the map as the MarkerPopupTemplate popup opens, just enough to bring the whole popup into view. |
| PopupCloseLabel | string | Close | The accessible name of the popup's close button. |
| PopupLabel | string | Marker details | The accessible name of the popup when its marker has neither an Alt nor a Title. |
| Provider | TMapProvider? | null | The provider's configuration: centre, zoom, tiles, tokens and interaction toggles. Compared by reference - assign a new instance to apply changes. |
| ReplayStateOnProviderSwap | bool | false | Replays the imperatively added markers, layers and overlays after a swap to a provider with another backend. |
| RespectReducedMotion | bool | true | Makes every camera move - FlyTo, SetView, FitBounds, a cluster's zoom, the keyboard - jump under a reduced-motion preference, unless the move is essential or ForceAnimation is set. |
| RoleDescription | string | interactive map | What a screen reader calls the map canvas in place of "region". The canvas is named by AriaLabel. |
| ShowLoading | bool | true | Shows the built-in loading indicator while the map is being created. |
| Styles | BitMapClassStyles? | null | Custom CSS styles for different parts of the map. |
| TMapProvider | generic type | The provider type: BitLeafletMapProvider, BitMapLibreMapProvider, BitMapboxMapProvider, BitOpenLayersMapProvider, BitArcGisMapProvider, BitAzureMapsMapProvider or BitCesiumMapProvider. | |
| UnsupportedLabel | string | This browser cannot display the map (WebGL is unavailable). | The text of the built-in unsupported-browser message. |
| UnsupportedTemplate | RenderFragment? | null | Replaces the built-in unsupported-browser message. |
| ViewAnnouncementFormatter | Func<BitMapViewState, string>? | null | Builds the announced text - a place name beats a pair of coordinates. |
| ViewAnnouncementThrottle | TimeSpan | 2 seconds | The minimum interval between two view announcements. |
| Zoom | double? | null | Two-way bindable zoom level: assigning it zooms the map, zooming writes it back. |
BitMap public members
| Name | Type | Default value | Description |
|---|---|---|---|
| IsReady | bool | false | True after the map is ready for interop calls. |
| LoadState | BitMapLoadState | BitMapLoadState.Idle | Where the map is in its lifecycle: Idle, Loading, Ready, Failed, or Unsupported. |
| LoadError | Exception? | null | The exception behind a Failed LoadState, when one was captured. |
| MarkerIds | IReadOnlyCollection<string> | Ids of the markers currently on the map, in no guaranteed order. Read from the component's own snapshot, so it costs no interop round-trip. | |
| OpenPopupMarker | BitMapMarker? | null | The marker whose MarkerPopupTemplate popup is open, or null when none is. |
| OpenPopup | Func<string, ValueTask> | Opens the MarkerPopupTemplate popup for a marker. Does nothing when no template is set - use OpenMarkerPopup for the provider's own popup. | |
| ClosePopup | Func<bool, ValueTask> | Closes the MarkerPopupTemplate popup, if one is open. Pass true to return the focus to the map. | |
| OrderedMarkers | IReadOnlyList<BitMapMarker> | The markers currently on the map, in no guaranteed order. Costs no interop round-trip. | |
| LayerIds | IReadOnlyCollection<string> | Ids of the vector layers currently on the map, in no guaranteed order. Costs no interop round-trip. | |
| TileOverlayIds | IReadOnlyCollection<string> | Ids of the tile overlays currently on the map, in no guaranteed order. Costs no interop round-trip. | |
| GetView | Func<ValueTask<BitMapViewState>> | Returns a snapshot of the current viewport. | |
| SetView | Func<BitMapLatLng, double?, bool, bool, ValueTask> | Pan and optionally zoom to the given center (center, zoom, animate, essential). Animation is skipped under a reduced-motion preference unless the move is marked essential. | |
| FlyTo | Func<BitMapLatLng, double?, bool, ValueTask> | Animated pan/zoom to the given center (center, zoom, essential). Becomes an instant jump under a reduced-motion preference unless marked essential. | |
| SetZoom | Func<double, bool, bool, ValueTask> | Set an absolute zoom level, keeping the current centre. | |
| ZoomIn | Func<double, bool, bool, ValueTask> | Zoom in by a number of levels (default 1) around the current centre. | |
| ZoomOut | Func<double, bool, bool, ValueTask> | Zoom out by a number of levels (default 1) around the current centre. | |
| ZoomBy | Func<double, bool, bool, ValueTask> | Change the zoom by a relative number of levels. Negative values zoom out. | |
| PanBy | Func<double, double, bool, bool, ValueTask> | Pan by a pixel offset. This is what pan buttons are built from, and shipping those matters: WCAG 2.2 SC 2.5.7 requires a single-pointer alternative to dragging the map. | |
| Locate | Func<BitMapGeolocationOptions?, ValueTask<BitMapGeolocationResult?>> | Asks the browser for the visitor's position and, unless turned off, pans there. Returns null when the browser denies the permission prompt or times out. | |
| PanTo | Func<BitMapLatLng, bool, bool, ValueTask> | Move the centre while keeping the current zoom. | |
| Project | Func<BitMapLatLng, ValueTask<BitMapPoint?>> | Where a coordinate currently sits inside the map container, in CSS pixels from its top-left corner. Null when it is not on screen. Only valid for the viewport it was read at. | |
| FitBounds | Func<BitMapLatLngBounds, int, double, bool, bool, ValueTask> | Fit the view to the given bounding box (bounds, padding, maxZoom, animate, essential); the maxZoom ceiling (default 18) keeps a box around a single place from dropping to street level. | |
| FitBoundsToMarkers | Func<int, double, bool, bool, ValueTask> | Fit the view to include every marker currently drawn, with the same arguments as FitBounds. | |
| InvalidateSize | Func<ValueTask> | Recalculate map size after a container resize. | |
| AddMarker | Func<BitMapMarker, ValueTask> | Add a marker to the map. | |
| RemoveMarker | Func<string, ValueTask> | Remove a marker by id. | |
| ClearMarkers | Func<ValueTask> | Remove all markers. | |
| SetMarkerPosition | Func<string, BitMapLatLng, ValueTask> | Move a marker to a new position. | |
| OpenMarkerPopup | Func<string, ValueTask> | Open a marker's popup. | |
| CloseMarkerPopup | Func<ValueTask<bool>> | Close the provider's open marker popup; true when one was open. ClosePopup closes the MarkerPopupTemplate one. | |
| SyncMarkers | Func<IEnumerable<BitMapMarker>, ValueTask> | Replace all markers in one batch. | |
| AddPolyline | Func<string, IReadOnlyList<BitMapLatLng>, BitMapVectorPathStyle?, ValueTask> | Add a polyline. | |
| AddPolygon | Func<string, IReadOnlyList<BitMapLatLng>, BitMapVectorPathStyle?, ValueTask> | Add a polygon. | |
| AddCircle | Func<string, BitMapLatLng, double, BitMapVectorPathStyle?, ValueTask> | Add a circle (radius in meters). | |
| AddRectangle | Func<string, BitMapLatLngBounds, BitMapVectorPathStyle?, ValueTask> | Add a rectangle. | |
| AddGeoJson | Func<string, string, BitMapVectorPathStyle?, ValueTask> | Add a GeoJSON layer. | |
| RemoveLayer | Func<string, ValueTask> | Remove a vector layer by id. | |
| ClearVectorLayers | Func<ValueTask> | Remove all vector layers. | |
| AddTileOverlay | Func<BitMapTileOverlay, ValueTask> | Add a tile overlay above the base map. | |
| IsFullscreen | bool | false | Whether the map is currently displayed fullscreen. |
| RequestFullscreen | Func<ValueTask<bool>> | Takes the map's container fullscreen - not the page - so overlay content and custom controls go with it. Call it from a user gesture: browsers only honour the request inside the short activation window a click opens. Returns whether the browser granted it. | |
| ExitFullscreen | Func<ValueTask<bool>> | Leaves fullscreen, if this map is the element currently displayed fullscreen. | |
| ToggleFullscreen | Func<ValueTask<bool>> | Enters fullscreen, or leaves it if the map is already fullscreen. | |
| SetLayerVisible | Func<string, bool, ValueTask> | Shows or hides a vector layer while keeping its definition. Unlike a zero opacity, a hidden layer stops hit-testing rather than swallowing clicks meant for what is underneath it. | |
| IsLayerVisible | Func<string, bool> | Whether a vector layer is currently drawn. Unknown ids report false. | |
| SetLayerStyle | Func<string, BitMapVectorPathStyle?, ValueTask> | Restyles an existing vector layer, keeping its geometry. A hidden layer keeps the new style for when it is shown again. | |
| SetTileOverlayVisible | Func<string, bool, ValueTask> | Shows or hides a tile overlay while keeping its definition. | |
| IsTileOverlayVisible | Func<string, bool> | Whether a tile overlay is currently drawn. Unknown ids report false. | |
| SetTileOverlayOpacity | Func<string, double, ValueTask> | Changes a tile overlay's opacity, which is how a raster overlay is blended against the basemap underneath it. | |
| ClearTileOverlays | Func<ValueTask> | Remove every tile overlay, leaving the base map alone. | |
| RemoveTileOverlay | Func<string, ValueTask> | Remove a tile overlay by id. |
BitComponentBase parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| AriaLabel | string? | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | BitDir? | null | Gets or sets the text directionality for the component's content. |
| Disabled | bool | false | Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction. |
| ForceAnimation | bool | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. An attribute written on the component wins over an entry of the same name. |
| Id | string? | null | Gets or sets the unique identifier for the component's root element. |
| Style | string? | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | string? | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | BitVisibility | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
BitComponentBase public members
| Name | Type | Default value | Description |
|---|---|---|---|
| UniqueId | Guid | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | ElementReference | Gets the reference to the root HTML element associated with this component. |
BitMapClassStyles properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Root | string? | null | Custom CSS classes/styles for the root element of the BitMap. |
| Canvas | string? | null | Custom CSS classes/styles for the focusable canvas the provider draws the map into. |
| Overlay | string? | null | Custom CSS classes/styles for the layer holding the ChildContent above the map. |
| Instructions | string? | null | Custom CSS classes/styles for the keyboard instructions shown while the canvas has keyboard focus. |
| GestureHint | string? | null | Custom CSS classes/styles for the hint shown while a gesture is blocked by the cooperative gestures. |
| Status | string? | null | Custom CSS classes/styles for the cover shown while the map is loading, has failed, or is unsupported. |
| Spinner | string? | null | Custom CSS classes/styles for the spinner of the built-in loading indicator. |
| Popup | string? | null | Custom CSS classes/styles for the popup the MarkerPopupTemplate is rendered in. |
| PopupCloseButton | string? | null | Custom CSS classes/styles for the close button of the popup. |
| PopupBody | string? | null | Custom CSS classes/styles for the body of the popup, holding the MarkerPopupTemplate content. |
| MarkerList | string? | null | Custom CSS classes/styles for the container of the marker list rendered next to the map. |
| MarkerListButton | string? | null | Custom CSS classes/styles for each "Show on map" button of the built-in marker table. |
BitMapMarker properties
A record, compared by value. Each property is honoured by every provider unless it says otherwise.
| Name | Type | Default value | Description |
|---|---|---|---|
| Id | string | Unique identifier of the marker within the map. Required. | |
| Position | BitMapLatLng | The coordinate of the marker. Required. | |
| Alt | string? | null | The accessible name of the marker, and its name in the marker table. |
| Title | string? | null | The native tooltip of the marker, and its accessible name when Alt is not set. |
| PopupText | string? | null | Plain text shown in the provider's popup on click. Escaped - safe for user data. |
| PopupHtml | MarkupString? | null | Raw HTML shown in the provider's popup on click. Not escaped - never pass user data. |
| TooltipText | string? | null | Plain text shown on hover and on keyboard focus (not on ArcGIS and Cesium). |
| TooltipHtml | MarkupString? | null | Raw HTML shown on hover and on keyboard focus. Not escaped. |
| TooltipPermanent | bool | false | Keeps the tooltip open instead of only on hover and focus. |
| TooltipPlacement | BitPlacement? | null | Where the tooltip opens against the marker. Only Top, Bottom, Left, Right and Center are honoured; any other value, or none, leaves the provider to choose. |
| Focusable | bool | true | Makes the marker a tab stop that Enter or Space opens. Turn off for decorative pins. |
| Draggable | bool | false | Lets the user move the marker, reported by OnMarkerDragEnd. |
| Color | string? | null | The color of the default pin - any CSS color, a theme variable included. Null takes --bit-Map-marker-color. |
| IconUrl | string? | null | The image drawn instead of the default pin. |
| IconWidth | int? | null | The width of the icon in pixels. Null takes 25 for the pin, 32 for an IconUrl. |
| IconHeight | int? | null | The height of the icon in pixels. Null takes 41 for the pin, 32 for an IconUrl. |
| IconAnchorX | int? | null | The pixel of the icon, from its left, that sits on the coordinate. Null is the horizontal centre. |
| IconAnchorY | int? | null | The pixel of the icon, from its top, that sits on the coordinate. Null is the bottom edge. |
| Opacity | double | 1 | The opacity of the marker, 0 to 1. |
| RiseOnHover | bool | false | Brings the marker above the others under the pointer (Leaflet). |
| ZIndexOffset | int | 0 | Stacks the marker above or below the others (Leaflet). |
BitMapClustering properties
| Name | Type | Default value | Description |
|---|---|---|---|
| RadiusPixels | int | 60 | How close, in screen pixels, markers have to be to join one bubble: a larger radius gives fewer, denser bubbles. |
| MaxZoom | double | 16 | The zoom at and above which every marker is drawn individually. |
| MinPoints | int | 2 | The fewest markers a bubble stands for. |
| Color | string? | null | The fill of the bubbles. Null takes --bit-Map-cluster-background, which falls back to the primary color. |
| TextColor | string? | null | The color of the count. Null takes --bit-Map-cluster-color, which falls back to the text color of the primary color. |
| CullOffscreen | bool | true | Keeps the markers outside the viewport off the map - most of the performance win. |
| MaxRenderedMarkers | int | 2000 | The most individual markers drawn at once past MaxZoom. |
| ExpandPaddingPixels | int | 48 | The padding of the zoom a bubble click makes to fit its markers. |
| AriaLabelFormat | string | Cluster of {0} markers | The accessible name of a bubble; {0} is its count. |
| ZoomOnClick | bool | true | Zooms to fit a bubble's markers on click. Turn off to handle OnClusterClick yourself. |
BitMapVectorPathStyle properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Color | string? | null | The stroke color - any CSS color, a theme variable included. Null takes --bit-Map-vector-color. |
| Weight | double | 3 | The stroke width in pixels. |
| Opacity | double | 1 | The stroke opacity, 0 to 1. |
| Fill | bool | true | Whether a closed shape is filled. Unlike a zero FillOpacity, no fill also takes no clicks. |
| FillColor | string? | null | The fill color. Null takes Color. |
| FillOpacity | double | 0.2 | The fill opacity, 0 to 1. |
| DashArray | string? | null | The dash pattern of the stroke, such as "6 4". |
| DashOffset | string? | null | Where the dash pattern starts. |
| LineCap | BitMapLineCap | BitMapLineCap.Round | The shape of the stroke's ends: Round, Butt or Square. |
| LineJoin | BitMapLineJoin | BitMapLineJoin.Round | The shape of the stroke's corners: Round, Bevel or Miter. |
BitMapTileOverlay properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Id | string | Unique identifier of the overlay within the map. Required. | |
| UrlTemplate | string | The XYZ template with {z}, {x}, {y} and optional {s} placeholders. Required. | |
| Attribution | string? | null | The credit the tile source requires, shown in the attribution control. |
| Opacity | double | 1 | The opacity of the overlay, 0 to 1. |
| ZIndex | int | 100 | The stacking order of the overlay. |
| MinZoom | int | 0 | The lowest zoom the source publishes tiles for. |
| MaxZoom | int | 19 | The highest zoom the source publishes tiles for. |
| Subdomains | string | abc | The values {s} takes, for sources that shard their tiles across hostnames. |
BitMapProviderBase properties
What every provider shares. Each one adds its own options - tiles, style URLs, tokens - documented on its type.
| Name | Type | Default value | Description |
|---|---|---|---|
| Center | BitMapLatLng | 51.505, -0.09 | The initial centre. |
| Zoom | double | 13 | The initial zoom. |
| MinZoom | int? | null | The lowest zoom the user can reach. |
| MaxZoom | int? | null | The highest zoom the user can reach. |
| ZoomControl | bool | true | Shows the provider's +/- buttons. |
| AttributionControl | bool | true | Shows the attribution - often a licence term of the tiles. |
| ScrollWheelZoom | bool | true | Zooms with the mouse wheel. |
| DoubleClickZoom | bool | true | Zooms on a double click. |
| BoxZoom | bool | true | Zooms to a shift-dragged box (Leaflet, OpenLayers, MapLibre, Mapbox). |
| Dragging | bool | true | Pans by dragging. |
| KeyboardNavigation | bool | true | Pans and zooms with the keyboard while the canvas has focus. |
| SuppressBrowserContextMenu | bool | false | Keeps the browser's own menu from opening on a right-click. Only with a menu of your own in its place. |
| MaxBounds | BitMapLatLngBounds? | null | Keeps the view inside a rectangle (Leaflet, MapLibre, Mapbox). |
| AdditionalOptions | Dictionary<string, object?> | Passed straight to the library's map constructor (Leaflet, MapLibre, Mapbox). |
BitMapMarkerListMode enum
| Name | Value | Description |
|---|---|---|
| None | 0 | No list is rendered. |
| ScreenReaderOnly | 1 | The list is hidden visually but reachable by assistive technologies, and printed. |
| Visible | 2 | The list is rendered below the map for everyone. |
BitMapLoadState enum
| Name | Value | Description |
|---|---|---|
| Idle | 0 | Not started yet: prerendering, or waiting to scroll into view under LazyLoad. |
| Loading | 1 | The provider's assets are loading or the map is being created. |
| Ready | 2 | The map is live and every method can be called. |
| Failed | 3 | Creating the map failed; LoadError holds the exception. |
| Unsupported | 4 | The browser cannot run this provider - no WebGL for a GL-backed one. |
BitPlacement enum
| Name | Value | Description |
|---|---|---|
| Top | 0 | The top edge. |
| Bottom | 1 | The bottom edge. |
| Start | 2 | The edge the reading direction starts from - the left in LTR, the right in RTL. On the vertical axis, which does not turn around, it is the top. |
| End | 3 | The edge the reading direction ends at - the right in LTR, the left in RTL. On the vertical axis, which does not turn around, it is the bottom. |
| Left | 4 | The left edge, in both reading directions. |
| Right | 5 | The right edge, in both reading directions. |
| Center | 6 | The middle of the axis, against neither edge. |
| TopAndBottom | 7 | Both edges of the block axis at once. |
| StartAndEnd | 8 | Both edges of the inline axis at once, following the reading direction the way Start and End do. |
BitVisibility enum
| Name | Value | Description |
|---|---|---|
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
BitDir enum
| Name | Value | Description |
|---|---|---|
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
Feedback
Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.