HERE Developer Community Insights: HERE API’s

Introduction

With over 180+ questions asked this year about HERE APIs, the Slack developer community has become a vital resource for developers building location-based applications.  On average, questions receive a response in 15 hours, underscoring the community’s high level of engagement.  The most popular services discussed include the Geocoding API, Routing API, Raster Tile API, Destination Weather API and Tour Planning API.

The questions and answers shared by developers highlight real-world challenges and solutions, often revealing insights that aren’t documented, making this community an invaluable resource. If you're working with HERE SDKs or APIs, this collection will give you a peek into common questions and expert answers, many of which involve workarounds and best practices not found in official documentation.

Top HERE API's questions this year

1. How can I optimize performance when creating custom SVG icons with labels for clustering in the HERE JavaScript API, especially when dealing with a large number of markers?
To improve performance, you can create a global variable to cache your icons, such as icons = {};, instead of calling new H.Map.Icon() for each label. Generate your icons outside of the customTheme() function to reuse them for multiple markers. This approach significantly reduces the cost of creating icons. For more details, check out these performance examples:

• Marker Performance
• DOM Marker Performance

If your icons are all unique, unfortunately, there isn't a way to further enhance performance.

2. How can I ensure that my request to the v8/routes endpoint accurately reflects current traffic conditions?
To ensure your request accounts for current traffic, avoid using departureTime=any as this setting will ignore current traffic flow and time-dependent effects, only considering long-term closures. If you want to focus on real-time traffic, either leave the departureTime parameter unspecified (which defaults to 'now') or set it to a specific time. For traffic-related requests, you can disable time-aware routing by using departureTime=any, which also helps you stay within the free tier limits.

3. Is it expected behavior for the HERE Image API to return a "414 Request-URI Too Large" error when using a large polyline? Can the API handle long polylines exceeding 1000 km?
The "414 Request-URI Too Large" error can occur when the polyline being passed to the Image API is too large, especially for long distances. While the Image API itself may work well with shorter polylines, there are limitations with the length of the URI in GET requests.To mitigate this issue, you can try flexible polyline encoding, which reduces the size of the route geometry. Additionally, if flexible encoding does not sufficiently shorten the polyline, consider reducing the number of geopoints in your route geometry. There are algorithms available to simplify polylines, such as the one demonstrated here: Polyline Simplification Demo. 

This can help create a more compact representation of your route without significantly compromising the quality of the service.

4. How can I implement the vector.normal.litemap layer using the HERE platform without hosting a JSON style file online?
You can use the createDefaultLayers method to obtain the default map layers and directly instantiate the map with the vector.normal.lite layer. Here’s a simplified example:

        // Initiate and authenticate your connection to the HERE platform:
const platform = new H.service.Platform({
    'apikey': 'YOUR_HERE_API_KEY'
});
// Initialize the engine type:
const engineType = H.Map.EngineType['HARP'];
// Obtain the default map types from the platform object:
const defaultLayers = platform.createDefaultLayers({
    engineType: engineType
});
// Instantiate (and display) a map:
const map = new H.Map(
   document.getElementById("mapContainer"),
    defaultLayers.vector.normal.lite, {
        engineType: engineType,
        zoom: 10,
        center: { lat: 52.5, lng: 13.4 }
    });
  

This code directly uses the vector.normal.lite layer without needing an external JSON file. Make sure your HTML includes a <div> with the id mapContainer to display the map.

5. How can I retrieve data for only major cities and their corresponding countries using the Geocoding API, instead of including smaller towns with the same name?To get data for major cities and their countries using the Geocoding API, you can adjust your query to focus on relevancy. For example, when searching for "Cairo," set the limit parameter to 1 to ensure the most relevant, globally recognized city is returned first. You can use the following endpoint:
https://geocode.search.hereapi.com/v1/geocode?q=cairo&lang=en-US&limit=1

This will prioritize returning results for Cairo, Egypt, while excluding smaller towns with the same name.

6. Can I add map controls like zoom and drag features to my map when using the Map Image API v3 for displaying a static map?
No, the Map Image API v3 is designed for generating static map images and does not support interactive features like zooming and dragging. To implement these controls, you would need to use the Maps API for JavaScript, which allows for dynamic and interactive map functionalities.

7. Is it possible to configure a single fleet type in the Tour Planning API to accommodate vehicles with two different compartments, each having its own capacity and skills?
Yes, it is possible to use a single fleet type with different capacity configurations and skills for vehicles with multiple compartments. The suggested approach involves defining your fleet with skills such as "general" and "special," along with their respective capacities. When planning routes, you can check if there are special products in the invoice and adjust the vehicle selection accordingly. This method allows for effective control over the capacity and skills required for different products during transportation.

8. How can I display route information on a static map with the HERE Routing API and HERE Map Image API when multiple waypoints result in a long URL?
You can simplify your polylines to reduce the length of the URL. Check out this demo: Spatial Tools Demo. It provides an algorithm for simplifying polylines, which can significantly shorten the polyline string. It's a good idea to test it before implementing it in your application.

9. How can I retrieve more than 100 restaurant results using the Browse endpoint of Geocoding API for Boston, MA, without duplicates?
The Browse endpoint has a limit of 100 results per request to ensure optimal performance. Unfortunately, there is no pagination support to navigate through additional results. To work around this limitation, you will need to change the location slightly for each request to gather more results, but this may lead to duplicates.

10. What does the negative elevation value in the Routing API response indicate, and is there any need for conversion of the received data?
The negative elevation values indicate heights below sea level. For example, a value of -26 cm means the location is 26 cm below mean sea level. The API uses the WGS84 ellipsoid height, which represents the difference between the WGS84 ellipsoid and a point on the Earth's surface. This means the elevation data may not always match sea level precisely. No additional conversion is necessary for the data received when decoding the polyline, but it's important to understand that similar elevation data can be obtained from a GPS receiver and can also yield negative values depending on the location and terrain.

11. How can I display an InfoBubble correctly on HERE Maps using Angular when clicking on a marker, as I am currently seeing an unexpected black cross instead?
To resolve the issue with the InfoBubble not displaying correctly on HERE Maps in Angular, you should ensure that the necessary CSS file is included in your project. Specifically, add the mapsjs-ui.css file to the styles array in your angular.json file. The path should be something like 'node_modules/@here/maps-api-for-javascript/bin/mapsjs-ui.css'. 
Once you add this CSS file, the InfoBubble should display correctly when clicking on a marker.

12. Why does using departureTime=anyin route requests return different results, even though it ignores traffic flow and other time-dependent effects? Is there a way to ensure consistent results?
The departureTime=any parameter still considers long-term traffic incidents, which can lead to varying results. To achieve consistent results, you should use traffic[mode]=disabled in your request.

13. How can I calculate the x and y coordinates for overlaying weather tiles onto a map using the HERE Weather API?
To calculate the x and y tile coordinates, you can use the following code snippet:

        // Code to calculate tile coordinates
var lat = 53.647; // Latitude
var lon = 9.977;  // Longitude
var z = 16;       // Zoom level
var latRad, n, xTile, yTile;

latRad = lat * Math.PI / 180;
n = Math.pow(2, z);
xTile = n * ((lon + 180) / 360);
yTile = n * (1 - (Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI)) / 2;

console.log(xTile);
console.log(yTile);
  

You can use the calculated xTile and yTile as parameters in the weather API URL format:
https://weather.hereapi.com/v3/tile/{zoom}/{x}/{y}/{imageType}
Note that the weather layer may not be available in all areas, so check the documentation for any restrictions.

14. How can we speed up map drawing in our Angular app using HERE Maps on computers with weaker graphic cards?
You can improve map drawing speed by adjusting the rendering settings. First, check whether you are using the HARP or the old WebGL rendering engine. Then, try the following adjustments:
Lower the PPI (pixels per inch) setting:

        const rasterTileService = platform.getRasterTileService({
  queryParams: {
    lang: 'en',
    ppi: 400, // Consider using 100 for lower resolution
    style: 'explore.satellite.day', // Choose a simpler style
    features: 'pois:all,environmental_zones:all,congestion_zones:all,vehicle_restrictions:active_and_inactive'
  },
});
  

Reduce the tile resolution:

        const rasterTileProvider = new H.service.rasterTile.Provider(rasterTileService, {
  tileSize: 512 // Consider using 256 for smaller tiles
});
  

Using a simpler style and lowering the resolution can help speed up map rendering on less powerful graphics cards.

15. Is there a way to obtain toll information using the HERE routing service with the /import endpoint?
Currently, the /import endpoint does not return toll information directly, which is a known limitation. As a workaround, you can issue two requests: first, use the /import service to obtain the routeHandle, and then use that routeHandle to request toll information from the routing service. Support for returning tolls directly with /import may be added in the future.

16. How can I display traffic information using the HERE Maps API for JavaScript, specifically to show/hide the traffic layer with one click and automatically update the traffic layer every 60 seconds?
To achieve the desired functionality with the HERE Maps API for JavaScript:

1. Show/Hide Traffic Layer with One Click:
   You can use the baselayerchangeevent. Add an event listener for this event to update the traffic layer manually whenever the base layer changes.
2. Automatically Update Traffic Layer Every 60 Seconds:
   By default, the traffic layer updates every three minutes. You can change this interval by instantiating your own traffic layer and setting the desired update interval in the constructor.

For sample code or further technical assistance, consider exploring HERE's support plans.

Conclusion

Whether you're dealing with complex routing challenges, optimizing large data sets, or enhancing user experience with custom maps, these questions reflect real-world problems and expert solutions.

If you're working with HERE APIs, joining the Slack community is an excellent way to tap into practical solutions, discover undocumented best practices, and stay connected with other developers solving similar challenges.