TMS FNC Maps v3.0 brings a major new feature (more about HTML/CSS element containers in this blog), but along with it, a lot of smaller fixes and improvements. Basically each update brings quality of life improvements. Moving forward from the legacy TMS WebGMaps & WebOSMaps, which were based on the deprecated Internet Explorer technology, we need to port features that were available in those products. We always ask ourselves the question whether those features were implemented in an easy and intuitive way and with TMS FNC Maps our goal is to strive towards a more complete experience by analyzing each feature and then implement it in a way that benefits your application and the developer behind it. One of those improvements is a function that allows polygon area calculation.

GeoJSON

Polygons in TMS FNC Maps can be displayed by adding a collection of coordinates. Typically, those coordinates come from a database, or a file, or requested from a REST service in GeoJSON format (https://geojson.org/). In this sample, we used the coordinates of Germany. The code below demonstrates how to load GeoJSON data from a file.

TMSFNCMaps1.BeginUpdate;
TMSFNCMaps1.LoadGeoJSONFromFile('germany.geojson');
TMSFNCMaps1.EndUpdate;

The polygon appearance can be changed. The code below demonstrates how to change the opacity of the polygon as well as fill and stroke color.

var
  p: TTMSFNCMapsPolygon;
begin
  p := TMSFNCMaps1.Polygons[0];
  p.FillOpacity := 0.4;
  p.FillColor := gcGreenyellow;
  p.StrokeOpacity := 0.4;
  p.StrokeColor := gcGreen;

Measuring the area

The purpose of this blog post is to show how to calculate the polygon area in square meters (or square kilometer in the demonstrated sample). In the unit *.TMSFNCMapsCommonTypes.pas there is a MeasureArea function that accepts an array of coordinates. We already loaded our polygon from a GeoJSON file and have the coordinates available.

var
  p: TTMSFNCMapsPolygon;
  m: Double;
begin
  p := TMSFNCMaps1.Polygons[0];

  //calculate area in square kilometers
  m := MeasureArea(p.Coordinates.ToArray) / 1000000;

Displaying the results

We now have the area in square kilometers of our polygon area. We can display it anywhere in our application, but this sample would not be complete without a demonstration of one of the most exciting features since TMS FNC Maps v3.0. For displaying the results, we chose the Element Containers feature (see this blog for more information). The complete code snippet can be found below as well as the final result.

procedure TMapForm.RenderPolygon;
var
  p: TTMSFNCMapsPolygon;
  m: Double;
  h: TStringList;
  e: TTMSFNCMapsElementContainer;
begin
  TMSFNCMaps1.BeginUpdate;
  TMSFNCMaps1.LoadGeoJSONFromFile('germany.geojson');
  TMSFNCMaps1.EndUpdate;

  p := TMSFNCMaps1.Polygons[0];
  p.FillOpacity := 0.4;
  p.FillColor := gcGreenyellow;
  p.StrokeOpacity := 0.4;
  p.StrokeColor := gcGreen;

  //calculate area in square kilometers
  m := MeasureArea(p.Coordinates.ToArray) / 1000000;

  h := TStringList.Create;
  try
    h.Add('<h2><span class="badge bg-secondary">The surface area of Germany is <br/> approximately ' + Format('%.0f km&sup2;', [m])  + '</span></h2>');
    e := TMSFNCMaps1.AddElementContainer(h, nil, nil, poTopRight);
    e.UseDefaultStyle := False;
  finally
    h.Free;
  end;
  TMSFNCMaps1.EndUpdate;
end;

procedure TMapForm.FormCreate(Sender: TObject);
begin
  TMSFNCMaps1.HeadLinks.AddStyleSheetLink('https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css');
  TMSFNCMaps1.HeadLinks.AddScript('https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js');
  TMSFNCMaps1.HeadLinks.AddScript('https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js');

  TMSFNCMaps1.ReInitialize;
end;

Excited?

Go ahead and download TMS FNC Maps. Explore the features and demos and feel free to leave a comment on this blog.