HERE heatmap uses url parameters but url is +7.000 chars and returns status 400 Bad Request

user_9607391 0
Viewed 54

I am using HERE for geocoding and generating heatmap.

Heatmap uses URL parameters but when there are many data points the URL can exceed 7.000 characters which is way over the browser limit of 2.048 which then throws a 400 error. The heatmap works fine when there are fewer data points.

As is I send the URL to the front-end and render the returning image in the browser.

Is there a way I can use anything else than URL params? Or call the HERE endpoint directly from the server and return the actual image to the front-end? Or any other solution to 'fix' this?
I would prefer not to have to change map provider!

I'm using NestJS and Angular latest versions.

URL example (which is short enough to work just fine) https://image.maps.ls.hereapi.com/mia/1.6/heat?apiKey=xxxxxxxxxxx&noblur=&w=2048&h=1024&a0=55.6059,12.99563&l0=2&rad0=1000&a1=55.61218,12.97896&l1=2&rad1=1000

Thank you

EDIT: I temporarily solved the issue by doing

if (this.heatUrl.length < 2000) {
  this.heatUrl += (this.getParams(i, partLoc[i].coordinates, partLoc[i].weight));
};

This cuts ~100 data points of ~150 but since they are chronologically sorted that equals only 10-15% of the elements.
Still looking for a proper solution.

here-api heatmap
1 Answers

Regarding documentation on https://developer.here.com/documentation/map-image/dev_guide/topics/request-format.html - "Note: The method POST is not supported except for the route resource and it is limited to payloads of 8K maximum."

In this case you can achieve your target only to utilize JS API with a heat map using below code like:

// Create a provider for a semi-transparent heat map:
  var heatmapProvider = new H.data.heatmap.Provider({
    colors: new H.data.heatmap.Colors({
      '0': 'blue',
      '0.5': 'red',
      '1': 'yellow'
    }, true),
    opacity: 0.7,
    // Paint assumed values in regions where no data is available
    assumeValues: false
  });

  // Add the data:
  heatmapProvider.addData([
    {lat: 52, lng: 13, value: 3},
    {lat: 52, lng: 13.5, value: 1},
    {lat: 52, lng: 14, value: 3}
  ]);


  // Add a layer for the heatmap provider to the map:
  map.addLayer(new H.map.layer.TileLayer(heatmapProvider));

Above example in JS Fiddle: https://jsfiddle.net/po5r0w3b/1/
Documentation: https://developer.here.com/documentation/maps/3.1.30.7/api_reference/H.data.heatmap.Provider.html

Other examples:

user_35056950
Related