Heat map does not appear

[Stephan_Hennekens]

Hi - I just upgraded TMSFNCMaps to the latest 4.3.0.1. to be able to create heat maps. I encounter two issues.

1. The function StrToFloat() sometime ignores the decimal point (check the second value derived from json stream)
2. No heat map appears on the map.

Below my code:

unit Unit17;

interface

uses
   System.SysUtils, System.Classes, JS, Web, WEBLib.Graphics, WEBLib.Controls, WEBLib.JSON,
   WEBLib.Forms, WEBLib.Dialogs, VCL.TMSFNCTypes, VCL.TMSFNCUtils, VCL.TMSFNCGraphics, VCL.TMSFNCGraphicsTypes,
   VCL.Controls,
   VCL.TMSFNCCustomControl, VCL.TMSFNCWebBrowser, VCL.TMSFNCMaps, VCL.TMSFNCOpenLayers, VCL.TMSFNCMapsCommontypes,
   WEBLib.REST, VCL.StdCtrls, WEBLib.StdCtrls, WEBLib.ExtCtrls;

type
   TForm1 = class(TWebForm)
      GIS: TTMSFNCOpenLayers;
      WebHttpRequest: TWebHttpRequest;
      WebPanel1: TWebPanel;
      WebButton1: TWebButton;
      [async]
      procedure ShowHeatMap;
      procedure WebButton1Click(Sender: TObject);
   private
      { Private declarations }
   public
      { Public declarations }
   end;

var
   Form1: TForm1;

implementation

{$R *.dfm}

procedure TForm1.ShowHeatMap;
var
   ca: TTMSFNCMapsCoordinateRecArray;
   hm: TTMSFNCMapsHeatMap;
   request: TJSXMLHttpRequest;
   JS: TJSON;
   ja: TJSONArray;
   jo: TJSONObject;
   url, lng_, lat_: String;
   i, n: Integer;
   lng, lat: Double;
   formatSetting: TFormatSettings;
begin
   formatSettings.DecimalSeparator := '.';
   url := 'https://www.synbiosys.alterra.nl/lvd2/lvddata.aspx?&meta=verspreidingsyntaxon&syntaxon=r16AA02';
   WebHttpRequest.url := url;
   request := TAwait.ExecP<TJSXMLHttpRequest>(WebHttpRequest.Perform);
   JS := TJSON.Create;
   ja := TJSONArray(JS.Parse(request.ResponseText));
   SetLength(ca, ja.Count);
   // ShowMessage(ja.Count.ToString);
   if ja.Count > 0 then
   begin
      n := 0;
      for i := 0 to ja.Count - 1 do
      begin
         jo := TJSONObject(ja.Items[i]);
         lng_ := jo.GetJSONValue('lng');
         lat_ := jo.GetJSONValue('lat');
         lng := StrToFloat(lng_, formatSettings);
         lat := StrToFloat(lat_, formatSettings);
         Console.log(lng_ + '/' + lng.ToString); // + ' | ' + lat_ + '/' + lat.ToString);
         ca[n].Latitude := lat;
         ca[n].Longitude := lng;
         ca[n].Weight := 1;
         Inc(n);
      end;
   end;
   GIS.BeginUpdate;
   hm := GIS.AddHeatMap(ca);
   // hm.Opacity := 1;
   hm.GradientStartColor := gcGreen;
   hm.GradientMidColor := gcYellow;
   hm.GradientEndColor := gcRed;
   GIS.SetCenterCoordinate(53, 6);
   GIS.SetZoomLevel(7);
   GIS.EndUpdate;
end;

procedure TForm1.WebButton1Click(Sender: TObject);
begin
   ShowHeatMap;
end;

end.

[Stephan_Hennekens]

Just found out that a heatmap appears when using Firefox, but doesn't appear when using Chrome or Edge. Didn't test other browsers.

[Bart]

Hi,

I'm not sure what is going wrong on your side. The sample code is working as expected in both Chrome and Edge when tested here.

[Stephan_Hennekens]

I wonder if visitors could test on there computers with various browsers if the heatmap appears. To test visit TMS Web Project
I have tested various browsers on my iphone and ipad (even Firefox), but without a positive result. It's rather puzzling.

[Bart]

In which place in your code are you adding the heatmap in the test project? Can you please ensure this happens after the map has been fully initialized? You can use the OnMapInitialized event to check this.

If the problem persists, please provide full source for your test project so I can further investigate this.

[Stephan_Hennekens]

The call for the heatmap was put in the Form OnShow event. This is now changed to the OnMapInitialized event. Still the problem persist.
Here is the download link to the test application:
https://www.synbiosys.alterra.nl/downloads/TestProject.zip

[Bart]

Your test project seems to be working as expected now. (Tested in Chrome, Firefox, Edge and iOS Safari).

Can you please ensure to correctly refresh your browser and/or clear your browser cache?

[Stephan_Hennekens]

Yes, I cleared the browser cache, but without possible result. I also tested on computers of some of my colleagues and in some case heat maps appears in Chrome, whereas in other cases it did not. Firefox is never a problem, including my own computer.

[Bart]

The test project is working as expected in Chrome as well.
I'm not sure what is going wrong as we are unable to reproduce an issue here.
Can you please provide more information about the environment where the test project is not working?

• Which version of Windows, Delphi, TMS WEB Core, Chrome are you using?
• Do you see any JavaScript errors in the browser console?
• Can you add Markers and/or Polylines on the map without problems?
• Can you check if the coordinates are correctly added to the heatmap when stepping through your code?

[Stephan_Hennekens]

I am using Win11, Delhi 11, and the latest versions of TMS Web Core, Chrome and Edge.

In Chrome (and Edge) the console shows the lng/lat values as follows (complete nonsense):

whereas in Firefox the console shows the lng/lat values correctly:

On my web server (WIndows server 2019) I also installed Chrome and here I get the correct heat map.

On other computers I get sometimes mixed results: Chrome fails and Edge shows the heat map.

[Bart]

The issue is most likely related to your browser locale configuration.
In your code the DecimalSeparator is already assigned, but the ThousandSeparator is not.
Can you please add this in your code as well and try again?

Example:

   formatSettings.DecimalSeparator := '.';
   formatSettings.ThousandSeparator := ',';

[Stephan_Hennekens]

Bingo! The extra setting does the job.
Thanks a lot Bart!