Scaling Up Applications with HERE Maps API for JavaScript

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:

1. Securely maintain the API key

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:

i. Centralized key storage 

1. Create a central file, such as config.js or test-credentials.js, in a secure location within your project.
2. In this file, define a constant or variable to store your API key, e.g.: const apiKey = 'your_api_key_here';
3. Save the file.
4. 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.

ii. Use environment variable

1. Create a '.env.local' file in the root directory of your project.
2. 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.
3. Save the file.
4. 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
  

iii. Key rotation

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.

2. Minimize API Requests

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

3. Use built-in animation capabilities

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);
  

4. Reuse the Icon object

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 markers
var 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
      }));
}
  

5. Limit the Number of Markers and Overlays

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 ClusterProvider
var 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 provider
var clusteringLayer = new H.map.layer.ObjectLayer(clusteringProvider);

// Add layer to a map to make objects from clustering provider visible
map.addLayer(clusteringLayer);

  

Summary

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!