Google Places and Polyline Symbols in TMS FNC Maps
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.
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.
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.
Here are a few examples that demonstrate how polyline symbols can be used in combination with Google Maps.
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;
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!