HERE Maps API for JavaScript: Developer Insights & Best Practices

As web applications become increasingly map-centric, developers are moving beyond simple map rendering toward data-rich, interactive, and performance-sensitive web experiences. Throughout 2025, the HERE Slack Developer Community remained an active space where developers building with the HERE Maps API for JavaScript shared implementation patterns, clarified migration paths, and solved advanced technical challenges.

Many of these conversations surfaced useful tips, limitations, and best practices, making the community a vital extension of the Maps API itself. This post highlights some of the key discussions, along with practical solutions and guidance shared by the community and HERE engineers. If you’re building web mapping applications with HERE Maps API for JavaScript, these insights can help you avoid common pitfalls and accelerate development.

1. How should map resizing and responsive layouts be handled in modern web apps?

With responsive design now standard, developers asked how to ensure maps adapt correctly to layout changes. The Maps API provides mechanisms for handling viewport updates and resizing when containers or layouts change dynamically.

Relevant documentation:
Map Viewport
Responsive Map Handling

Key takeaway: Explicit resize handling ensures consistent map behavior across devices and layouts.

2. How can I customize map features and icons?

Developers asked how to adjust the appearance of map elements such as icons, labels, and points of interest to match their application’s design or highlight specific data.

Typical use cases included:
• Scaling or modifying icons (for example traffic cameras or POIs)
• Changing colors and visibility of map features
• Creating branded map styles for specific applications

Recommended approach: The preferred method for customizing map features is to use the HERE Style Editor, which provides a visual interface for modifying vector map styles. Using the Style Editor, you can:

• Customize map feature visibility
• Adjust icon size and styling
• Modify label appearance and map colors
• Export a style configuration that can be applied directly in the Maps API for JavaScript

Resources
• HERE Style Editor documentation
• Latest Style Editor release overview

3. How can I disable 3D buildings when using a custom style?

Developer disabled Building > Volume in the Style Editor preview, but after exporting and applying the style in the JS API, 3D buildings were still rendered.

Observations:
• Style Editor preview shows flat buildings
• Exported JSON contains no visible differences
• 3D buildings remain visible in the JS application
• style.getEnabledFeatures() returns undefined

Guidance:
• Import the custom style
• Call style.load()
• Wait until the style is fully loaded
• Then configure features using setEnabledFeatures(), more info here.

Tip: When working with HARP and custom styles, feature toggling (such as disabling 3D building volume) must be done after the style is loaded.

References:
• Style API reference
• Features and modes developer guide

4. How can I detect clicks on default POIs and retrieve bus stop names?

Developers sometimes want to retrieve additional information from default map features, such as public transport stops, when users interact with the map.

Common needs:
• Detect when a user taps a POI on the map
• Access the underlying feature metadata
• Display additional information such as stop names or details in the UI

Guidance: You can detect interaction with default POIs by listening for tap events on map features:

map.addEventListener('tap', e => {
if (e.target instanceof H.map.Feature) {
console.log(e.target.getData().properties);
}
});

This allows access to the feature’s properties, including available metadata. More info here.

Note: Not all POI categories display labels directly on the map by default, as label visibility depends on the active map style configuration. If additional details such as bus stop names are required in the UI, they can be retrieved from the feature metadata and displayed using a custom component (e.g., an info bubble).

5. Can I match HERE Maps API visuals exactly with HERE WeGo?

This question surfaced often and the answer requires a clear distinction.

Reality check:
• The map in wego.here.com uses the standard HERE base styles and is built using the HERE Maps API for JavaScript
• Map visuals (roads, labels, land use, traffic styling) can be reproduced using the available vector styles
• WeGo uses a custom-built UI layer (controls, buttons, panels) on top of the map
• Exact UI parity is not guaranteed, as those components are application-specific

Takeaway: You can replicate the map styling using the default vector styles and HERE Style Editor. The surrounding UI and interactions are custom to WeGo and need to be implemented separately.

6. How can I enable hillshade and contour features in the HERE Maps API for JavaScript?

Developers noticed that terrain and contour features worked in the Style Editor but did not appear at runtime in the JS API.

Observations:
• Hillshade and contours visible in Style Editor preview
• No effect when using vector.normal.map

Guidance:
• Use the predefined vector.normal.topo or vector.normal.toponight layers
• These layers request the required hillshade and contours tile content by default
• The default vector.normal.map layer does not include this terrain data

Tip: Hillshade and contour rendering depends on the tile content requested by the layer. Styling alone cannot enable these features if the underlying vector tile layer does not include the required terrain data.

References: Vector tile layers documentation

7. How can I configure primary and secondary map label languages ?

A developer asked how to declare primary and secondary languages when initializing default map layers.

Guidance: You can define label languages directly when creating default layers:

const platform = new H.service.Platform({ apikey: "YOUR_API_KEY" });
const defaultLayers = platform.createDefaultLayers({
lg: "de", // primary language
lg2: "en" // secondary language
});

Tip: If you need multilingual map labeling, configure lg and lg2 when creating the default layers during map initialization. Language settings are applied at layer creation time and should be defined before the map is rendered. More information here.

8. How do I interpret the vehicle restriction icons in HERE Maps API for JavaScript?

Developers often asked what the various vehicle restriction [NH20] [PP21] symbols (e.g., truck/height/weight limits) actually mean.

Where documentation exists: In 2025, we have added 3 important new functionality with regard to vehicle restrictions:
• Vehicle profile and restriction details in the Maps API for JavaScript guide
• Time-based vehicle restrictions, which apply only during specific hours or days
• Truck preferred route display, indicating routes optimized for truck traffic
• Master list of restriction icons and their meanings in the Style Editor User Guide

Tip: Vehicle restriction icons may appear or change depending on the vehicle profile and active routing configuration, so their visibility can vary based on the context in which the map is used.

9. How can I display vehicle restriction icons on the map?

Developers following vehicle restriction guide example noticed that restriction icons were not appearing, even though the feature was enabled.

Observations:
• No vehicle restriction icons displayed
• Logs indicated the feature was enabled
• Example code appeared correct

Guidance:
• Use defaultLayers.vector.normal.logistics
• Wait for the style to be fully loaded (READY) before enabling restriction features

Tip: When visualizing vehicle restrictions, ensure you are using the logistics style and only activate features after the style initialization is complete. Otherwise, the icons will not render.

10. Can I dynamically switch between multiple map styles at runtime?

This question appeared frequently in apps with:
• Dark/light mode support
• Context-based styling (e.g., navigation vs exploration)

What worked best:
• Creating separate base layers configured with different styles (for example, day and night schemes)
• Switching between styles by setting the appropriate base layer on the map
• Preserving camera state manually when switching styles

Tip: Using separate layers for different styles (such as day and night modes) is generally more predictable than mutating style properties at runtime. This approach avoids partial style updates and allows applications to switch themes by simply updating the map’s base layer.

11. How should API keys and authentication be handled securely in JavaScript applications?

A topic for browser-based mapping applications, especially because API keys are exposed in client-side requests.

Common concerns:
• API keys visible in browser network calls
• Risk of copied keys being reused
• Manual key rotation requiring operational effort

Best practices highlighted:
• Restrict API keys by HTTP referrer in the HERE platform
• Monitor usage regularly
• Use OAuth 2.0 where appropriate for server-side workflows

Advanced recommendation: Automate API key rotation using the Identity and Access Management (IAM) Authentication API. More information in the article here

Key takeaway: Client-side applications should use restricted API keys, monitor usage, and consider automated rotation to minimize the impact of key exposure.

12. How can I specify the stroke colour and outline width of region overlay polygons?

Developers asked whether it was still possible to control the outline (stroke color and weight) of region overlay polygons.

Concern: Uncertainty whether outline styling was removed

Clarification from the community: As noted in the documentation, polygons are closed shapes that can include both fill and optional outline styling. More info here

13. How can I add or remove objects from an existing marker cluster without re-clustering everything?

A developer using clustering wanted to dynamically modify cluster contents without rebuilding the entire cluster.

Context:
• Clustering in the HERE Maps API applies to data points, not directly to map objects such as circles or polygons
• Developers sometimes attempt to dynamically add or remove clustered markers after initialization

Guidance:
• Clustering datasets can be updated incrementally using H.clustering.Provider.addDataPoint()
• However, clustering performs best when the full dataset is provided during initialization

Tip: While individual data points can be added dynamically, clustering is typically configured during initialization, and large dataset updates are often easier to manage by recreating the H.clustering.Provider.

Reference: Clustering API reference

14. How can I apply a custom SVG icon to GeoJSON markers when using HARP?

While working with GeoJSON in the JS API, a developer asked how to style markers using a custom SVG defined in a variable similar to how polygons can be styled. Polygon styling examples are documented, No clear example for styling GeoJSON markers.

Guidance: If you want to assign a custom icon to the markers, check for marker instances when processing GeoJSON objects and assign a custom icon explicitly. This can be done in the same style callback used to style other objects such as polygons:

const reader = new H.data.geojson.Reader(
"'/path/to/geojson/file.json'",
{
// This function is called each time parser detects a new map object

style: function (mapObject) {
// Parsed geo objects could be styled using setStyle method

if (mapObject instanceof H.map.Marker) {
// Do something with the marker instance, e.g. set a custom icon
}
},
});

Copy

References: API reference (H.data.geojson.Reader) API reference (H.map.Marker)

Conclusion:

The 2025 discussions in the HERE Slack Developer Community show that developers using the HERE Maps API for JavaScript are building increasingly sophisticated, data-driven web applications. The questions highlighted reflect real-world usage patterns and closely align with the documented capabilities of the Maps API.

Late 2025 marked an important milestone with the release of version 3.2, introducing major updates such as the HARP Engine becoming the default and only rendering engine, full integration with the HERE Style Editor, and HERE Platform services replacing legacy HLS services along with several other improvements.

The community remains one of the most valuable resources for building robust, modern web mapping applications with HERE. We encourage you to join the conversation, ask questions, and share your learnings. It continues to be one of the strongest assets in the HERE developer ecosystem

Resources:
Migration guide
Documentation
Examples