keyTMS ALL-ACCESS
local_offerOne money and time saving bundle
mouseCross Platform UI
bar_chartReporting
languageWeb
swap_horizCommunication
storageData
mouseWindows UI
  •  
  •  
  •  
  1. Home
  2. Blog

Blog

All Blog Posts  |  Next Post  |  Previous Post

Google Places and Polyline Symbols in TMS FNC Maps

Tuesday, December 7, 2021

Introducing Google Places and polyline symbols support in TMS FNC Maps v2.4.


Google Places

AutoComplete

The AutoComplete function provides suggestions based on a partial keyword search, usually provided by the end user. The results can be updated and displayed on the fly while the user is typing.
The following example uses the TTMSFNCEdit component, available separately in TMS FNC UI Pack, to display the AutoComplete results in a dropdown panel.

TMS Software Delphi Components


Thanks to the powerful combination of the TTMSFNCEdit and the synchronous GetAutoCompletSync call from TTMSFNCPlaces this can be achieved with a single line of code:

procedure TForm1.TMSFNCEdit1LookupNeedData(Sender: TObject; Value: string;
  List: TStrings; var ItemIndex: Integer);
begin
  List.Assign(TMSFNCPlaces1.GetAutoCompleteSync(Value));
end;

Note: The AutoComplete functionality from Azure, Bing, Here and GeoApify is supported as well.


Places Search

The TTMSFNCGooglePlaces nearby search allows to search for specific places near a given location.
This example displays a subset of the pharmacies found in the center of New York city.


TMS Software Delphi Components


This is how the code looks:

procedure TForm1.Button1Click(Sender: TObject);
var
  c: TTMSFNCMapsCoordinateRec;
begin
  c.Latitude := 40.7127753;
  c.Longitude := -74.0059728;
  TMSFNCGooglePlaces1.SearchNearby(c, 'pharmacy');
end;

procedure TForm1.TMSFNCGooglePlaces1SearchNearby(Sender: TObject;
  const ARequest: TTMSFNCPlacesRequest;
  const ARequestResult: TTMSFNCCloudBaseRequestResult);
var
  I: Integer;
begin
  for I := 0 to ARequest.Items.Count - 1 do
  begin
    m := TMSFNCGoogleMaps1.AddMarker(ARequest.Items[I].Coordinate.ToRec);
    m.AddOverlayView(ARequest.Items[I].Description);
    m.IconURL := ARequest.Items[I].Icon;
    m.DefaultIconSize := False;
    m.IconWidth := 32;
    m.IconHeight := 32;
  end;
end;



Polyline Symbols

Another often requested feature was to have an option to add a direction indicator to a polyline. Polyline symbols provide a fully customizable way to achieve this.

TMS Software Delphi Components


Here are a few examples that demonstrate how polyline symbols can be used in combination with Google Maps.

TMS Software Delphi Components

This example shows a red closed arrow repeated every 50 pixels on a blue polyline.


var
  ar: TTMSFNCMapsCoordinateRecArray;
  p: TTMSFNCGoogleMapsPolyline;
  ps: TTMSFNCGoogleMapsPolylineSymbol;
begin
  TMSFNCGoogleMaps1.BeginUpdate;
  SetLength(ar, 3);
  ar[0].Latitude := TMSFNCGoogleMaps1.Options.DefaultLatitude - 0.1;
  ar[0].Longitude := TMSFNCGoogleMaps1.Options.DefaultLongitude - 0.1;
  ar[1].Latitude := TMSFNCGoogleMaps1.Options.DefaultLatitude + 0.1;
  ar[1].Longitude := TMSFNCGoogleMaps1.Options.DefaultLongitude + 0.1;
  ar[2].Latitude := TMSFNCGoogleMaps1.Options.DefaultLatitude - 0.1;
  ar[2].Longitude := TMSFNCGoogleMaps1.Options.DefaultLongitude + 0.1;
  p := TMSFNCGoogleMaps1.AddPolyline(ar);
  p.StrokeColor := gcBlue;

  ps := p.Symbols.Add;
  ps.Path := spForwardClosedArrow;
  ps.StrokeColor := gcRed;
  ps.RepeatSymbol := 50;

  TMSFNCGoogleMaps1.EndUpdate;
end;


TMS Software Delphi Components

This example shows how to use multiple symbols simultaneously including a symbol defined with a custom SVG path.

var
  ar: TTMSFNCMapsCoordinateRecArray;
  p: TTMSFNCGoogleMapsPolyline;
  ps: TTMSFNCGoogleMapsPolylineSymbol;
begin
  TMSFNCGoogleMaps1.BeginUpdate;
  SetLength(ar, 3);
  ar[0].Latitude := TMSFNCGoogleMaps1.Options.DefaultLatitude - 0.1;
  ar[0].Longitude := TMSFNCGoogleMaps1.Options.DefaultLongitude - 0.1;
  ar[1].Latitude := TMSFNCGoogleMaps1.Options.DefaultLatitude + 0.1;
  ar[1].Longitude := TMSFNCGoogleMaps1.Options.DefaultLongitude + 0.1;
  ar[2].Latitude := TMSFNCGoogleMaps1.Options.DefaultLatitude - 0.1;
  ar[2].Longitude := TMSFNCGoogleMaps1.Options.DefaultLongitude + 0.1;
  p := TMSFNCGoogleMaps1.AddPolyline(ar);
  p.StrokeColor := gcBlue;

  ps := p.Symbols.Add;
  ps.Path := spCustom;
  ps.CustomPath := 'M -2,-2 2,2 M 2,-2 -2,2';
  ps.Scale := 3;
  ps.Offset := 50;
  ps.RepeatSymbol := 50;
  ps.StrokeOpacity := 0.5;

  ps := p.Symbols.Add;
  ps.Path := spCircle;
  ps.Offset := 0;
  ps.RepeatSymbol := 100;
  ps.RepeatSymbolUnits := unPercentage;
  ps.Scale := 10;
  ps.StrokeWidth := 2;
  ps.StrokeColor := gcRed;
  ps.FillColor := gcRed;
  ps.FillOpacity := 1;

  TMSFNCGoogleMaps1.EndUpdate;
end;

Note: Polyline symbols are currently only available for the Google Maps mapping service.


Available Now

The TMS FNC Maps v2.4 update is available now for Delphi & Visual Studio Code (with TMS WEB Core). You can download the latest version and start using the new features right away!

Bart Holvoet




This blog post has not received any comments yet.



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