Blog

All Blog Posts  |  Next Post  |  Previous Post

Calculate square meters of an area in your favorite map service

Tuesday, March 1, 2022

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;


This will render the following polygon on the map. (map service used in the screenshot is MapBox)

TMS Software Delphi  Components


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;


TMS Software Delphi  Components


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;

TMS Software Delphi  Components


Excited?

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



Pieter Scheldeman




This blog post has received 3 comments.


1. Wednesday, March 2, 2022 at 8:22:10 PM

Hi, another much needed feature that is missing is Polygon.containsLocation that returns whether a coordinate is within a polygon or not.

xstef


2. Wednesday, March 23, 2022 at 9:46:13 AM

We are currently releasing an update that will contain a function ContainsPoint at Polygon collection item level. Update v3.0.3.0 will be available shortly.

Pieter Scheldeman


3. Thursday, March 28, 2024 at 10:52:05 AM

Thank you, this blog was really useful.

Brett Adam




Add a new comment

You will receive a confirmation mail with a link to validate your comment, please use a valid email address.
All fields are required.



All Blog Posts  |  Next Post  |  Previous Post