TMS FNC Maps v2.1: Introducing OverlayViews

The new TMS FNC Maps update includes support for OverlayViews. This is a heavily improved equivalent of the Marker Labels functionality in TMS VCL WebGMaps and TMS FMX WebGMaps. OverlayViews are a Google Maps API specific functionality and therefore currently only available in TTMSFNCGoogleMaps. OverlayViews can be positioned anywhere on the map and support HTML tags.

3 ways to use OverlayViews

1. Connected to a Marker

The OverlayView is automatically displayed below an existing Marker and functions as a Marker Label. 

TMS Software Delphi  Components

In code, adding a call to AddOverlayView on an existing Marker with the text that goes in to the OverlayView as a parameter value is all that is needed.

var
  m: TTMSFNCGoogleMapsMarker;
begin
  TMSFNCGoogleMaps1.BeginUpdate;

  m := TTMSFNCGoogleMapsMarker(TMSFNCGoogleMaps1.AddMarker(TMSFNCGoogleMaps1.Options.DefaultLatitude, TMSFNCGoogleMaps1.Options.DefaultLongitude));
  m.AddOverlayView('Hello World!
This is an OverlayView.'); TMSFNCGoogleMaps1.EndUpdate;

2. Positioned at a fixed Coordinate

The OverlayView is positioned at a fixed coordinate on the map. The size of the OverlayView remains fixed regardless of the map’s zoom level.

TMS Software Delphi  Components

In code, setting the Latitude and Longitude coordinates will position the OverlayView at that exact location on the map.

var
  ov: TTMSFNCGoogleMapsOverlayView;
begin
  TMSFNCGoogleMaps1.BeginUpdate;

  ov := TMSFNCGoogleMaps1.AddOverlayView;
  ov.CoordinatePosition := cpCenterCenter;
  ov.Coordinate.Latitude := TMSFNCGoogleMaps1.Options.DefaultLatitude;
  ov.Coordinate.Longitude := TMSFNCGoogleMaps1.Options.DefaultLongitude;
  ov.Padding := 5;
  ov.Width := 500;

  ov.Text := '' +
      '

Uluru

'+ '
'+ '

Uluru, also referred to as Ayers Rock, is a large ' + 'sandstone rock formation in the southern part of the '+ 'Northern Territory, central Australia. It lies 335 km (208 mi) '+ 'south west of the nearest large town, Alice Springs; 450 km '+ '(280 mi) by road. Kata Tjuta and Uluru are the two major '+ 'features of the Uluru - Kata Tjuta National Park. Uluru is '+ 'sacred to the Pitjantjatjara and Yankunytjatjara, the '+ 'Aboriginal people of the area. It has many springs, waterholes, '+ 'rock caves and ancient paintings. Uluru is listed as a World '+ 'Heritage Site.

'+ '' + '

Attribution: Uluru, '+ 'https://en.wikipedia.org/w/index.php?title=Uluru '+ '(last visited June 22, 2021).

'+ '
'; TMSFNCGoogleMaps1.EndUpdate;

3. Positioned between preset Bounds

The OverlayView is positioned between fixed Bounds coordinates on the map and the size changes depending on the map’s zoom level.

TMS Software Delphi  Components

When the map is zoomed out, the size of the OverlayView image automatically adapts to keep it inside the Bounds coordinates.

TMS Software Delphi  Components

In code, set the OverlayView Mode to omBounds to keep it positioned and sized between the Bounds coordinates.
In this example an image is used to display a different style of map at that location. To make sure the image fills the entire available space,  it’s width and height must be set to 100%. Optionally the Padding, BackgroundColor, BorderColor and other configuration settings can be added.

var
  ov: TTMSFNCGoogleMapsOverlayView;
begin
  TMSFNCGoogleMaps1.BeginUpdate;

  ov := TMSFNCGoogleMaps1.AddOverlayView;
  ov.Mode := omBounds;
  ov.Text := '';
  ov.Bounds.NorthEast.Latitude := 40.773941;
  ov.Bounds.NorthEast.Longitude := -74.12544;
  ov.Bounds.SouthWest.Latitude := 40.712216;
  ov.Bounds.SouthWest.Longitude := -74.22655;
  ov.Padding := 0;
  ov.BackgroundColor := gcNull;
  ov.BorderColor := gcNull;

  TMSFNCGoogleMaps1.EndUpdate;

Available now

The TMS FNC Maps v2.1 update is available now. You can download the latest version and start using the new OverlayViews feature right away!