Blog

All Blog Posts  |  Next Post  |  Previous Post

TMS FNC Maps v2.1: Introducing OverlayViews

Tuesday, September 21, 2021

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 <font color="red">World</font>!<br>This is an <b>OverlayView</b>.');

  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 := '' +
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'sandstone rock formation in the southern part of the '+
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;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.</p>'+
      '<img src="https://www.tripsavvy.com/thmb/XHi4Ec428VJFk_bsvNtv6fx5-bE=/2000x1500/filters:fill(auto,1)/GettyImages-675746097-5a8b94a427364afc89f054f71ceda86f.jpg" width="200"></img>' +
      '<p>Attribution: Uluru, <a target="_blank" href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2021).</p>'+
      '</div>';

  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 := '<img src="https://storage.googleapis.com/geo-devrel-public-buckets/newark_nj_1922-661x516.jpeg" style="position:absolute;width:100%;height:100%;">';
  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!




Bart Holvoet




This blog post has received 2 comments.


1. Monday, September 27, 2021 at 6:51:29 PM

Hello
Does OverlayView work for Android applications???
If it is where can I find an example of use???
I''ve been trying to use it but always receive an exception and I cannot see the message down the marker.
With many thanks in advance??
Rafael

Rafael Hurtado


2. Tuesday, September 28, 2021 at 11:24:20 AM

Please contact us via support email with detailed description of the error you experience. The samples + code snippets are available in the installation directory.

Pieter Scheldeman




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