UI components
The HERE SDK provides a comprehensive collection of UI building blocks to help you seamlessly incorporate mapping features into your application. These components are designed to support many common tasks, such as navigation, geovisualization, and user interaction, while still allowing you to shape the interface to fit your unique design goals. The HERE Icon Library provides additional options for visual customization.
UI building blocks
The MapView is the core component for displaying interactive maps in your application. It provides the foundation for rendering map data, handling user interactions, and visualizing various map elements. Embedded POIs can be selected, and multiple pre-configured map schemes can be enabled with one line of code. On top, the map view can be decorated with map features, for example, to visualize traffic incidents or to show truck restriction icons on the map.
Building highlights enable the visualization of 3D buildings on the map, providing a more realistic and immersive map experience. This feature helps users identify landmarks and better understand their surroundings in urban environments.
Customize the appearance of your maps with the HERE Style Editor, which allows you to adjust colors, icons, and other visual elements to match your application's branding and user experience.
Use the VisualNavigator to access real-time, on-screen navigation guidance, including turn-by-turn directions and visual cues to assist users in reaching their destinations. VisualNavigator is provided by the HERE SDK with the following out-of-the-box visual features: It will render the current user location, traffic on the route, maneuver arrows, the route including route progress (often also called route eat-up) and traffic lights on the map itself. Additional UI components such as maneuver panels or speed limit indicators are not part of this component. However, implementation examples can be found on the app-side for selected example apps such as TruckGuidance and Rerouting.
The navigation camera provides dynamic camera control during turn-by-turn navigation. The VisualNavigator works together with CameraBehavior to automatically adjust the camera position, tilt, and zoom to provide optimal viewing angles during route guidance. Different default camera behaviors are available, and customization is also possible.
The route line visualizes the planned path on the map using MapPolyline. This visual representation helps users understand their route at a glance, showing the complete path from origin to destination.
The HERE SDK enables 3D route visualization to create an immersive navigation experience. By tilting the camera to a 45° angle, the map transitions from a top-down bird's-eye view to a realistic 3D perspective. It dynamically renders your route in three dimensions, showing elevation, perspective, and real-time progress as you travel. This feature helps users better understand their surroundings and follow routes more intuitively during navigation. Note that this is automatically enabled when using the VisualNavigator with camera behaviors.
Route arrows, also known as map arrows, are visual indicators displayed on the map by the VisualNavigator to show upcoming turns and maneuvers. These arrows help users prepare for upcoming navigation actions. They are also available as MapArrows accessible for visualization independent of a navigation context.
Maneuver instructions provide textual and visual guidance for navigation actions. A reusable app-side maneuver panel implementation example can be found in the Rerouting example app (only available for Navigate).
Voice instructions provide audio guidance during navigation using Text-to-Speech (TTS). This allows drivers to receive turn-by-turn directions without looking at the screen, enhancing safety and convenience. Note that the HERE SDK does not include a TTS engine, but the example apps show how to make use of the default platform engine.
Speed limit displays show current road speed restrictions to help drivers maintain legal speeds. The TruckGuidance example app features reusable speed limit panel building blocks (only available for Navigate).
Signboards display realistic road sign information, including highway shields and signpost details, to assist drivers during navigation. Using the IconProvider, you can render these icons to closely match real-world road signage and improve route guidance clarity.
Junction Views display realistic 3D visualizations of complex intersections and highway exits using RealisticViews. These renderings replicate real-world signposts and road layouts, helping users understand upcoming maneuvers and navigate complex junctions with confidence.
With the RealisticViewWarningListener you can receive SVG string data for signpost shields and complex junction views in 3D. The RealisticViewWarning event contains SVG data for both, signposts and junction views.
The IconProvider provides road shields and other navigation icons used for signboards and route guidance, maintaining visual consistency across the map interface.
HERE SDK Units are small, reusable building blocks packaged as Android libraries (AARs). They demonstrate ways to modularize your UI and use the HERE SDK - for example, for switching map schemes or showing simple overlays. Note that HERE SDK Units are currently only available for Android.
The "HERESDKUnits" app is available on GitHub and demonstrates possible implementation approaches. More information can be found in the example app's README on GitHub.
HERE SDK Units help you add functionality with minimal effort and keep your app code lean. They are intended as examples and starting points, not drop-in production components. Adapt the code to your needs, and review and test any unit you plan to use in a production app. The "HERESDKUnits" example app is only available for the Navigate license. If you use the Explore license, remove or adapt any unit code that relies on Navigate-only APIs.
Visual features vs headless usage
The modular structure of the HERE SDK allows for flexibility in how you utilize its components, such as search or routing, independently of displaying a map view. This means you can integrate various functionalities into your app without showing a map or even use a map view from a different vendor. For instance, you can build a headless application that leverages the HERE SDK's search and routing capabilities or combine its routing features with maps from other providers.
Reference applications
- The open source reference application for the HERE SDK for Flutter (Navigate) shows more ways for custom UI in a demo application. This app is currently only available for Flutter.
- The HERE WeGo Pro app provides turn-by-turn navigation for commercial vehicle drivers designed to improve efficiency, safety and compliance. More information can be found in the HERE WeGo Pro Developer Guide.
How to use the HERE Icon Library
You can use the icons from the open-source HERE Icon Library, based on the provided license, in your own commercial and non-commercial applications.
You can clone the repository with:
git clone https://github.com/heremaps/here-icons.gitAlternatively, you can directly download the individual assets from GitHub, as per your needs. Note that the library is just a collection of images, so no app-integration is offered.
Most icons are available in different formats such as PNG and SVG, and in various resolutions.
Additionally, the icons come in both solid and outline formats.
Updated yesterday