How LINK Transport Powers Just-In-Time Logistics with HERE WeGo Pro
Mohini Todkari — 11 June 2025
6 min read
25 May 2023
Are you getting inspired by our samples? If you have started utilizing the HERE Maps API for JavaScript, starting with our demos and samples, and found success, you are now ready to scale up your application to an enterprise-level solution. HERE Maps API for JavaScript makes it easy to add interactive maps, geocoding, routing, and other location-based services to your web application. In this blog post, we’ll highlight some best practices – small changes that can yield significant impact on performance, maintainability, and scalability of your application:
In most of our samples, we add the API key directly in the script as:
//Initialize the Platform object:var platform = new H.service.Platform({ 'apikey': '{YOUR_API_KEY}'});
However, once the application is published, the source code becomes accessible in the browser, exposing the API key. So it is important to link the API key to the application in a more secure way. Few ways of handling this are:
Create a central file, such as config.js or test-credentials.js, in a secure location within your project.
In this file, define a constant or variable to store your API key, e.g.: const apiKey = 'your_api_key_here';
Save the file.
In your JavaScript code files where you need to access the API key, import the central file and use the variable or constant to access the API key:
import { apiKey } from './path/to/test-credentials.js';
// Use the apiKey variable in your code to make API requests
or within the html file as:
<script type="text/javascript" src='../test-credentials.js'></script>
You can find this style used on our github.
Create a '.env.local' file in the root directory of your project.
Add a new line to the file with the format API_KEY=your_api_key_here. Replace your_api_key_here with your actual API key.
Save the file.
In your JavaScript code, you can access the API key using environment variables. Here's an example of how to access it:
const apiKey = process.env.API_KEY;// Use the apiKey variable in your code to make API requests
This is done by creating a second API key for your application and deleting the original key when it is no longer required.
You can also limit access the API key by granting access only to authorized personnel or services; and document guidelines for usage and distribution among the development team.
Combine multiple requests into a single request to reduce network overhead and improve performance. Some ways of achieving this are:
If the route calculation involves multiple waypoints, it is a good idea to optimize the order of waypoints and reduce the number of waypoints, to reduce the requests to the Routing API.
Use batch geocoding instead of sending individual requests to the Geocoding API.
Implement map tile caching mechanism to minimize redundant requests
If you are animating a transition such as changing map center or changing zoom level, it’s better to use the built-in animation capabilities. Map instance methods as setZoom(), setCenter(), and setViewBounds() accept an optional second argument for applying animation, e.g.:
/** * Assumption: 'map' is initialized and available */// Call getZoom() with an optional second parameter,// indicating that an animation is to be performed:map.setZoom(map.getZoom() + 3, true);
H.map.Icon class represents a reusable visual map marker. Instead of creating a new icon object for each marker, reuse the single H.map.Icon instance for all H.map.Marker instances to reduce the memory footprint:
// Array of anchor points for markersvar points = [...], markers = [], // Create single Icon instance icon = new H.map.Icon('graphics/SchoolIcon.png');
for (var i = 0; i < points.length; i++) { markers.push(new H.map.Marker(points[i], { // Reuse the Icon instance: icon: icon }));}
Be mindful of the number of overlays and markers added to the map. You can cluster markers that are close together into a single cluster. As you zoom in, individual markers are dynamically retrieved.
// create an array of DataPoint objects for the ClusterProvidervar dataPoints = data.map(function (item) { return new H.clustering.DataPoint(item.latitude, item.longitude); });
var clusteringProvider = new H.clustering.Provider(dataPoints, { clusteringOptions: { // minimum weight of points required to form a cluster minWeight: 2, // maximum radius of the neighborhood eps: 32 }});
// Create a layer that will consume objects from our clustering providervar clusteringLayer = new H.map.layer.ObjectLayer(clusteringProvider);
// Add layer to a map to make objects from clustering provider visiblemap.addLayer(clusteringLayer);
Along with the above mentioned best practices, larger applications need to be modular, support asynchronous loading, include error handling, testing and quality assurance, versioning, security considerations and more. Optimizing applications is a continuous process. As you venture into scaling up your application and integrating the HERE Maps APIs, we would love to stay connected and hear about what you're building and your progress. Join our Slack channel to engage with the community and share your coding journey. Happy coding!
Mohini Todkari
Sr. Developer Evangelist
Share article
Why sign up:
Latest offers and discounts
Tailored content delivered weekly
Exclusive events
One click to unsubscribe