REST client for HERE Platform APIs (Geocoding, Routing, Places, Traffic, Transit, Isoline, Matrix)
Get Started
$ dotnet add package HerePlatform.NET.RestClientReadme
HerePlatform.NET
.NET libraries for the HERE Platform APIs. Includes Blazor components for the HERE Maps JS API and a REST client for routing, geocoding, traffic, and more — all targeting .NET 8, 9, and 10.
Feature highlights:
- Interactive map components with two-way binding (center, zoom, tilt, heading)
- Markers (standard and DOM-based) with drag, click events, and InfoBubbles
- Shapes: polylines, polygons, circles, rectangles — all draggable and styleable
- Routing with car, truck, pedestrian, bicycle, scooter, and EV support
- Geocoding and reverse geocoding
- Traffic incidents and flow data
- Marker clustering with custom SVG templates
- Heatmap visualization
- Autosuggest search component with customizable templates
- GeoJSON, KML, custom tile layers, and image overlays
- Isoline (isochrone), matrix routing, waypoint optimization, geofencing, places, and public transit services
- Utility classes: WKT parser, GeoJSON exporter, flexible polyline codec
- Blazor Server and Blazor WebAssembly support
Prerequisites
- A HERE Developer account and API key
- .NET 8.0, 9.0, or 10.0
Installation
dotnet add package HerePlatform.NET.Blazor
Getting Started
1. Register services
In Program.cs, register HerePlatform.NET.Blazor with your API key:
builder.Services.AddHerePlatformBlazor("YOUR_HERE_API_KEY");
For advanced configuration, use HereApiLoadOptions:
builder.Services.AddHerePlatformBlazor(new HereApiLoadOptions("YOUR_HERE_API_KEY")
{
LoadClustering = true, // Enable marker clustering
LoadData = true, // Enable GeoJSON/KML support
Language = "en"
});
All required JavaScript is loaded automatically — no manual <script> tag needed.
2. Add a map
Place a map component in any Razor page:
<AdvancedHereMap Id="myMap" Height="400px" Options="@(new MapOptions { Zoom = 12 })">
<MarkerComponent Lat="52.52" Lng="13.405">
<b>Hello Berlin!</b>
</MarkerComponent>
</AdvancedHereMap>
3. Blazor Server: increase SignalR message size
Blazor Server apps must increase the SignalR maximum receive message size to handle map data:
builder.Services.AddServerSideBlazor()
.AddHubOptions(options => options.MaximumReceiveMessageSize = 1024 * 1024);
Map Components
HereMap
Minimal map component. Provides programmatic access via InteropObject after initialization.
<HereMap Id="basic" Height="400px" Options="@_options" OnAfterInit="OnMapReady" />
@code {
private MapOptions _options = new() { Zoom = 10 };
private void OnMapReady()
{
// Map is ready for programmatic interaction
}
}
Use ReInitializeAsync() to rebuild the map when options like UiLocale change at runtime.
AdvancedHereMap
Full-featured declarative wrapper around HereMap. Supports child components, two-way binding, and a rich event model.
<AdvancedHereMap Id="advanced"
Height="500px"
Options="@_options"
@bind-Center="_center"
@bind-Zoom="_zoom"
Animate="true"
OnClick="HandleMapClick">
@* Child components: markers, shapes, clusters, etc. *@
</AdvancedHereMap>
@code {
private MapOptions _options = new() { LayerType = MapLayerType.VectorNormalMap };
private LatLngLiteral _center = new(52.52, 13.405);
private double _zoom = 12;
private void HandleMapClick(MapPointerEventArgs e)
{
if (e.Position is { } pos)
_center = pos;
}
}
Two-way bindable: @bind-Center, @bind-Zoom, @bind-Tilt, @bind-Heading
Key parameters:
| Parameter | Type | Description |
|---|---|---|
Animate | bool | Animate programmatic view changes |
DisabledBehaviors | BehaviorFeature | Disable interactions (Panning, WheelZoom, Tilt, etc.) |
ViewportPadding | Padding | Viewport padding applied after init |
OnClick | EventCallback<MapPointerEventArgs> | Map background clicked |
The component also exposes OnDoubleClick, OnLongPress, OnContextMenu, drag events, view change events, and pointer events. See IntelliSense for the full list.
MapOptions
| Property | Type | Default | Description |
|---|---|---|---|
Center | LatLngLiteral? | null | Initial map center |
Zoom | double | 10 | Initial zoom level |
LayerType | MapLayerType | VectorNormalMap | Base layer type |
EnableInteraction | bool | true | Enable user interaction |
EnableUI | bool | true | Show built-in UI controls |
UiLocale | string? | null | UI locale (e.g. "de-DE", "fr-FR") |
Tilt | double? | null | Tilt angle in degrees |
Heading | double? | null | Map rotation in degrees |
MinZoom / MaxZoom | double? | null | Zoom constraints |
PixelRatio | double? | null | High-DPI pixel ratio |
Switching Layers
Change the base layer at runtime:
// Switch to satellite
advancedMap.MapRef.Options.LayerType = MapLayerType.RasterSatelliteMap;
await advancedMap.MapRef.ReInitializeAsync();
Add or remove overlay layers (e.g. traffic):
await advancedMap.AddLayerAsync("vector.normal.traffic");
await advancedMap.RemoveLayerAsync("vector.normal.traffic");
Markers
MarkerComponent
Standard HERE marker with optional InfoBubble via ChildContent.
<AdvancedHereMap Id="markerDemo" Height="400px" Options="@(new MapOptions())">
<MarkerComponent @bind-Lat="_lat" @bind-Lng="_lng"
Draggable="true"
Clickable="true"
OnTap="HandleTap"
IconUrl="/images/custom-pin.svg">
<div style="padding: 8px;">
<strong>Draggable marker</strong><br/>
Position: @_lat.ToString("F4"), @_lng.ToString("F4")
</div>
</MarkerComponent>
</AdvancedHereMap>
@code {
private double _lat = 52.52;
private double _lng = 13.405;
private void HandleTap(MapPointerEventArgs e) { /* ... */ }
}
Key parameters: Lat/Lng (two-way), Draggable, Clickable, Opacity, MinZoom/MaxZoom, IconUrl, Visible, Title, ZIndex
DomMarkerComponent
Custom HTML marker rendered as a DOM element. The ChildContent defines the static HTML template for the marker icon.
<DomMarkerComponent Lat="52.52" Lng="13.405">
<div style="background: #0066FF; color: white; padding: 4px 8px; border-radius: 4px;">
Custom HTML
</div>
</DomMarkerComponent>
Note: ChildContent is rendered as static HTML. Blazor interactivity (event handlers, binding) inside DomMarker content is not supported.
Shapes
All shape components support Draggable, Clickable, Visible, ZIndex, and Data. Drag updates are reflected via two-way binding.
PolylineComponent
<PolylineComponent Path="@_path"
StrokeColor="#0066FF"
LineWidth="4"
Arrows="true"
LineDash="@(new double[] { 10, 5 })" />
Key parameters: Path (two-way), StrokeColor, LineWidth, LineCap, LineDash, Arrows, Extrusion/Elevation (3D with HARP engine)
PolygonComponent
<PolygonComponent Path="@_polygon"
FillColor="rgba(0, 102, 255, 0.3)"
StrokeColor="#0066FF"
LineWidth="2" />
Supports Holes for interior cutouts and Extrusion/Elevation for 3D buildings.
CircleComponent
<CircleComponent @bind-CenterLat="_lat"
@bind-CenterLng="_lng"
Radius="500"
FillColor="rgba(255, 0, 0, 0.2)"
StrokeColor="red"
Draggable="true" />
RectComponent
<RectComponent @bind-Top="_top" @bind-Left="_left"
@bind-Bottom="_bottom" @bind-Right="_right"
FillColor="rgba(0, 255, 0, 0.2)"
Draggable="true" />
InfoBubbles
Declarative (via MarkerComponent)
Place HTML inside a MarkerComponent's ChildContent — the InfoBubble opens on marker tap:
<MarkerComponent Lat="52.52" Lng="13.405" Clickable="true">
<div>This appears in an InfoBubble on click.</div>
</MarkerComponent>
Standalone InfoBubbleComponent
For InfoBubbles independent of markers:
<InfoBubbleComponent Lat="52.52" Lng="13.405" @bind-IsOpen="_isOpen" AutoPan="true">
<div style="padding: 8px;">Standalone InfoBubble</div>
</InfoBubbleComponent>
@code {
private bool _isOpen = true;
}
Note: ChildContent is rendered as static HTML.
Groups
GroupComponent groups map objects together. Toggle Visible to show/hide all children at once.
<GroupComponent Visible="@_showPois">
<MarkerComponent Lat="52.52" Lng="13.405" />
<MarkerComponent Lat="52.53" Lng="13.41" />
<CircleComponent CenterLat="52.52" CenterLng="13.405" Radius="200" />
</GroupComponent>
@code {
private bool _showPois = true;
}
Use GetBoundsAsync() to get the bounding rectangle of all objects in the group.
Clustering
Requires LoadClustering = true in HereApiLoadOptions.
<AdvancedHereMap Id="clusterMap" Height="400px" Options="@(new MapOptions())">
<MarkerClusterComponent DataPoints="@_points"
Eps="32"
MinWeight="2"
OnClusterTap="HandleClusterTap"
OnNoiseTap="HandleNoiseTap" />
</AdvancedHereMap>
@code {
private List<ClusterDataPoint> _points = new()
{
new(52.52, 13.405),
new(52.521, 13.406),
new(52.53, 13.41, weight: 3),
};
private void HandleClusterTap(ClusterTapEventArgs e) { /* Zoom into cluster */ }
private void HandleNoiseTap(ClusterTapEventArgs e) { /* Show detail */ }
}
Customize cluster visuals with ClusterSvgTemplate and NoiseSvgTemplate using {count} and {color} placeholders.
Data Visualization
HeatmapComponent
<HeatmapComponent DataPoints="@_heatData"
Opacity="0.6"
Colors="@(new Dictionary<double, string>
{
{ 0.0, "blue" },
{ 0.5, "yellow" },
{ 1.0, "red" }
})" />
@code {
private List<HeatmapDataPoint> _heatData = new()
{
new(52.52, 13.405, 0.8),
new(52.53, 13.41, 1.0),
};
}
GeoJsonReaderComponent
Requires LoadData = true in HereApiLoadOptions.
<GeoJsonReaderComponent Url="/data/districts.geojson"
DefaultStyle="@(new StyleOptions { FillColor = "rgba(0,102,255,0.3)", StrokeColor = "#0066FF" })"
OnLoaded="e => Console.WriteLine($"Loaded {e.ObjectCount} objects")" />
Alternatively, pass inline GeoJSON via the GeoJsonString parameter.
KmlReaderComponent
Requires LoadData = true.
<KmlReaderComponent Url="/data/route.kml" />
CustomTileLayerComponent
Overlay third-party XYZ tile layers:
<CustomTileLayerComponent UrlPattern="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
Opacity="0.5"
Min="0"
Max="18" />
ImageOverlayComponent
Pin an image to geographic bounds:
<ImageOverlayComponent ImageUrl="/images/overlay.png"
Top="52.55" Left="13.35"
Bottom="52.50" Right="13.45"
Opacity="0.7" />
HERE REST Services
All services are registered automatically via AddHerePlatformBlazor() and can be injected with standard DI.
| Service | Methods | Description |
|---|---|---|
IRoutingService | CalculateRouteAsync | Route calculation (car, truck, pedestrian, bicycle, scooter, EV) |
IIsolineService | CalculateIsolineAsync | Isochrone/isodistance polygons |
IMatrixRoutingService | CalculateMatrixAsync | Many-to-many distance/duration matrix |
IGeocodingService | GeocodeAsync, ReverseGeocodeAsync | Address lookup and reverse geocoding |
IPlacesService | DiscoverAsync, BrowseAsync, LookupAsync | Place search, category browse, ID lookup |
ITrafficService | GetTrafficIncidentsAsync, GetTrafficFlowAsync | Real-time traffic data |
IPublicTransitService | GetDeparturesAsync, SearchStationsAsync | Public transit departures and station search |
IWaypointSequenceService | OptimizeSequenceAsync | Optimal waypoint ordering (TSP) |
IGeofencingService | CheckPositionAsync | Check position against geofence zones |
Routing Example
Programmatic:
@inject IRoutingService RoutingService
@code {
private async Task CalculateRoute()
{
var result = await RoutingService.CalculateRouteAsync(new RoutingRequest
{
Origin = new LatLngLiteral(52.52, 13.405),
Destination = new LatLngLiteral(48.8566, 2.3522),
TransportMode = TransportMode.Car,
RoutingMode = RoutingMode.Fast,
Avoid = RoutingAvoidFeature.Tolls | RoutingAvoidFeature.Ferries,
ReturnInstructions = true
});
var route = result.Routes?.FirstOrDefault();
var summary = route?.Sections?.FirstOrDefault()?.Summary;
// summary.Duration (seconds), summary.Length (meters)
}
}
Declarative (RouteComponent):
<AdvancedHereMap Id="routeMap" Height="400px" Options="@(new MapOptions())">
<RouteComponent Origin="@(new LatLngLiteral(52.52, 13.405))"
Destination="@(new LatLngLiteral(48.8566, 2.3522))"
TransportMode="TransportMode.Car"
StrokeColor="#0066FF"
LineWidth="5"
OnRouteCalculated="HandleResult" />
</AdvancedHereMap>
Truck routing supports TruckOptions (height, width, length, gross weight, hazardous goods) and EV routing supports EvOptions (battery charge, consumption tables, charging curves).
Autosuggest
Address search component with keyboard navigation and customizable design.
<HereAutosuggest Placeholder="Search address..."
Options="@(new AutosuggestOptions { Limit = 5, Lang = "en", In = "countryCode:DEU" })"
OnItemSelected="HandleSelection"
Design="AutosuggestDesign.Outlined"
DebounceMs="300" />
@code {
private void HandleSelection(AutosuggestItem item)
{
// item.Title, item.Position, item.Address
}
}
Design variants: Default, Compact, Filled, Outlined, Rounded
Customize rendering with SuggestionItemTemplate, SuggestionListTemplate, and InputTemplate render fragments. CSS custom properties from here-autosuggest.css can be overridden for further styling.
UI Controls
Place these inside AdvancedHereMap to add interactive tools.
DistanceMeasurementComponent
<DistanceMeasurementComponent Active="true"
Alignment="UIAlignment.TopRight"
OnMeasured="d => _distance = d" />
OverviewMapComponent
<OverviewMapComponent Alignment="UIAlignment.BottomRight" ZoomDelta="4" />
ZoomRectangleComponent
<ZoomRectangleComponent Active="true" Alignment="UIAlignment.TopRight" />
UIAlignment options: TopLeft, TopCenter, TopRight, LeftTop, LeftMiddle, LeftBottom, RightTop, RightMiddle, RightBottom, BottomLeft, BottomCenter, BottomRight
Context Menu
Add a right-click context menu to the map:
<AdvancedHereMap Id="ctxMap" Height="400px" Options="@(new MapOptions())">
<ContextMenuComponent OnItemClick="HandleMenuItem">
<ContextMenuItem Label="Add Marker" />
<ContextMenuItem Label="Measure Distance" />
<ContextMenuItem Label="Disabled Item" Disabled="true" />
</ContextMenuComponent>
</AdvancedHereMap>
@code {
private void HandleMenuItem(ContextMenuEventArgs e)
{
// e.ItemLabel, e.Position, e.ViewportX, e.ViewportY
}
}
Utilities
WktParser
Parse Well-Known Text (WKT) geometry strings:
LatLngLiteral? point = WktParser.ParsePoint("POINT(13.405 52.52)");
List<LatLngLiteral> line = WktParser.ParseLineString("LINESTRING(13.4 52.5, 13.5 52.6)");
List<List<LatLngLiteral>> polygon = WktParser.ParsePolygon("POLYGON((13.4 52.5, 13.5 52.5, 13.5 52.6, 13.4 52.5))");
List<LatLngLiteral> multi = WktParser.ParseMultiPoint("MULTIPOINT(13.4 52.5, 13.5 52.6)");
GeoJsonExporter
Export coordinates to GeoJSON:
string pointJson = GeoJsonExporter.ToGeoJsonFeature(new LatLngLiteral(52.52, 13.405));
string lineJson = GeoJsonExporter.ToLineStringFeature(coordinates);
string polygonJson = GeoJsonExporter.ToPolygonFeature(ring, holes);
string collection = GeoJsonExporter.ToFeatureCollection(new[] { pointJson, lineJson });
FlexiblePolyline
Decode and encode HERE's flexible polyline format (used in routing responses):
List<LatLngLiteral> decoded = FlexiblePolyline.Decode(encodedString);
string encoded = FlexiblePolyline.Encode(coordinates, precision: 5);
Advanced Configuration
HereApiLoadOptions
| Property | Type | Default | Description |
|---|---|---|---|
ApiKey | string | (required) | HERE API key |
Version | string | "3.1" | HERE Maps JS API version |
LoadMapEvents | bool | true | Load map events module |
LoadUI | bool | true | Load UI module |
LoadClustering | bool | false | Load clustering module |
LoadData | bool | false | Load data module (GeoJSON/KML) |
UseHarpEngine | bool | true | Use HARP rendering engine (WebGL) |
Language | string? | null | Default language |
Single API key per page
The HERE Maps JS API is loaded once per page with a single API key. Multiple keys on the same page are not supported.
License
MIT