Heatmap Visualization

FNC TMS FNC Maps
1

Hi,

Is there a way to create a heat map from geojson data layer for either the Mapbox, HERE, or TomTom maps? I need to visualize some data and wanted to make a cross platform tool that worked on mobile and as a windows standalone tool with the FMX framework.

I know it is possible if I do it on native Kotlin/Java for Android, but then I am trying to use my Delphi skills on it.

Thank you,
-Alessandro

2

Currently, it's not possible for Mapbox, HERE or TomTom, we have to further investigate what is possible. I wrote a blog a while back related to Google if that can be of any help, customizing the JavaScript for the other services

3

I tried it and it worked with Google maps, now I am wondering if this map customization through javascript is it available for all map providers? if so, would it be possible for me to use the following javascript code to add a heatmap layer on a HERE map?

// 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': 'yellow',
  '1': 'red'
  }, true),
  opacity: 0.6,
  // Paint assumed values in regions where no data is available
  assumeValues: true
});

// Add the data:
heatmapProvider.addData([
  {lat: 52, lng: 1, value: 1},
  {lat: 53, lng: 2, value: 2}
]);

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

At this moment not because the layer functionality isn't available at the level of each mapping service provider. We watch this and will add it when this would become available from other service providers.

5

Based on the code snippet from Here, you can now do this by adding the data script link and converting the JavaScript to a Delphi string:

uses
  FMX.TMSFNCMaps.Here;

procedure TForm1.TMSFNCMaps1CustomizeHeadLinks(Sender: TObject;
  AList: TTMSFNCMapsLinksList);
begin
  AList.Add(TTMSFNCMapsLink.CreateScript('https://js.api.here.com/v3/3.1/mapsjs-data.js', 'text/javascript', 'utf-8'));
end;

procedure TForm1.TMSFNCMaps1CustomizeMap(Sender: TObject;
  var ACustomizeMap: string);
begin
  ACustomizeMap :=
  '// Create a provider for a semi-transparent heat map:' + LB +
  'var heatmapProvider = new H.data.heatmap.Provider({' + LB +
  '  colors: new H.data.heatmap.Colors({' + LB +
  '  ''0'': ''blue'',' + LB +
  '  ''0.5'': ''yellow'',' + LB +
  '  ''1'': ''red''' + LB +
  '  }, true),' + LB +
  '  opacity: 0.6,' + LB +
  '  // Paint assumed values in regions where no data is available' + LB +
  '  assumeValues: true' + LB +
  '});' + LB +
  '' + LB +
  '// Add the data:' + LB +
  'heatmapProvider.addData([' + LB +
  '  {lat: 52, lng: 1, value: 1},' + LB +
  '  {lat: 53, lng: 2, value: 2}' + LB +
  ']);' + LB +
  '' + LB +
  '// Add a layer for the heatmap provider to the map:' + LB +
  'map.addLayer(new H.map.layer.TileLayer(heatmapProvider));';
end;
2 Likes