RAD Studio 10.4.1 is now available! Learn more. Looking for discounts? Visit our Special Offers page!
Delphi

Working with TMapView on iOS and Android with RAD Studio XE8

The new maps component in RAD Studio XE8 makes it easy to add mapping functionality to your mobile applications. TMapView provides access to map APIs for iOS and Android. On Android, it uses the Google Maps Android API and on iOS, it uses the Map Kit Framework.

The key features of the TMapView component are:

  • Four Types of Maps: Normal, Satellite, Hybrid and Terrain (Android only) 
  • Gesture Control: Intuitive tilt, rotate and zoom gesture controls
  • Control the Map View: Ability to control the map properties such as the map center coordinates, the map orientation and so on
  • Custom markers: Ability to add markers to the maps

If you are using TMapView on Android, you will need to obtain a Google Maps API key.

 

RAD Studio XE8 ships with two maps sample applications for Object Pascal and C++.

Object Pascal:

  • C:\Users\Public\Documents\Embarcadero\Studio\16.0\Samples\Object Pascal\Mobile Samples\Device Sensors and Services\Maps
  • C:\Users\Public\Documents\Embarcadero\Studio\16.0\Samples\Object Pascal\Mobile Samples\Device Sensors and Services\Map Type Selector 

C++:

  • C:\Users\Public\Documents\Embarcadero\Studio\16.0\Samples\CPP\Mobile Samples\Device Sensors and Services\Maps
  • C:\Users\Public\Documents\Embarcadero\Studio\16.0\Samples\CPP\Mobile Samples\Device Sensors and Services\Map Type Selector 

I created a small demo project that uses the Spitcast REST API, REST component framework, FDMemTable and TMapView to display surf locations on my map based on the longitude, latitude and spot name information returned from the REST service. A custom marker graphic in the shape of a surfboard fin is used to indicate the locations on the map. 

You can download my demo project here. 

Here is a code snippet from the demo project:

procedure TForm26.FormCreate(Sender: TObject);
var
  LongitudeField: TField;
  LatitudeField: TField;
  MyLocation: TMapCoordinate;
  Descr: TMapMarkerDescriptor;
  SpotName : TField;
begin
  RESTRequest1.Execute;
begin
  LongitudeField := FDMemtable1.FieldByName('longitude');
  LatitudeField := FDMemtable1.FieldByName('latitude');
  SpotName := FDMemTable1.FieldByName('spot_name');
  FDMemTable1.First;
   while not FDMemTable1.EOF do
    begin
      MyLocation := TMapCoordinate.Create(StrToFloat(LatitudeField.AsWideString),StrToFloat(LongitudeField.AsWideString));
      MapView1.Location :=  MyLocation;
      Descr := TMapMarkerDescriptor.Create(MyLocation, SpotName.AsWideString);
      Descr.Icon := BitmapSource.Bitmap;
      BitmapSource.Visible := True;
      Descr.Draggable := True;
      MapView1.AddMarker(Descr);
      MapView1.Zoom := 8;
      FDMemTable1.Next;
  end;
end;
end;

Here is the app running on my iPad:

mapsgraphicipadsurf_5f00_zpsec1pm7je-5177400

 

Here is a quick code snippet on how to clear the markers on the map:

unit Markers;

interface

uses
System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs, System.Generics.Collections, FMX.Controls.Presentation,
FMX.StdCtrls, FMX.Maps, FMX.Layouts;

type
TForm2 = class(TForm)
GridPanelLayout1: TGridPanelLayout;
MapView1: TMapView;
ButtonAdd: TButton;
ButtonUndo: TButton;
ButtonClear: TButton;
ButtonToggle: TButton;
procedure ButtonAddClick(Sender: TObject);
procedure ButtonUndoClick(Sender: TObject);
procedure ButtonClearClick(Sender: TObject);
procedure ButtonToggleClick(Sender: TObject);
private
{ Private declarations }
FMarkers : TList<TMapMarker>;
FShowMarkers: Boolean;
procedure CenterMap;
public
{ Public declarations }
constructor Create(Owner: TComponent); override;
end;

var
Form2: TForm2;

implementation

{$R *.fmx}

procedure TForm2.ButtonAddClick(Sender: TObject);
begin
FMarkers.Add(MapView1.AddMarker(TMapMarkerDescriptor.Create(TMapCoordinate.Create((Random(180) - 90) * 0.75, Random(360) - 180),
Format(’Marker Placed %d-%d’, [Random(42), Random(54124)]))));
CenterMap;
end;

procedure TForm2.ButtonClearClick(Sender: TObject);
var
Marker: TMapMarker;
begin
for Marker in FMarkers do
Marker.Remove;
FMarkers.Clear;
CenterMap;
end;

procedure TForm2.ButtonToggleClick(Sender: TObject);
var
Marker: TMapMarker;
begin
FShowMarkers := not FShowMarkers;
for Marker in FMarkers do
Marker.SetVisible(FShowMarkers);
end;

procedure TForm2.ButtonUndoClick(Sender: TObject);
begin
if FMarkers.Count > 0 then
begin
FMarkers.Last.Remove;
FMarkers.Delete(FMarkers.Count - 1);
end;
CenterMap;
end;

procedure TForm2.CenterMap;
begin
if FMarkers.Count > 0 then
MapView1.Location := FMarkers.Last.Descriptor.Position
else
MapView1.Location := TMapCoordinate.Zero;
end;

constructor TForm2.Create(Owner: TComponent);
begin
inherited;
FMarkers := TList<TMapMarker>.Create;
FShowMarkers := True;
end;

end.

 


Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder.
Design. Code. Compile. Deploy.
Start Free Trial   Upgrade Today

   Free Delphi Community Edition   Free C++Builder Community Edition

Deep Dive Webinar: Boost C++Builder Compile Speed with TwineCompile
About author

Director of Product Management, Developer Tools Idera, Inc.
Related posts
CodeDelphiRAD Studio

Learn About How To Redirect Inserting, Deleting And Updating Records In Delphi With FireDAC

C++DelphiRAD Studio

Manual uninstall of RAD Studio/Delphi/C++Builder 10.4 Sydney

CodeDelphiRAD Studio

Learn How To Send Arrays To A PostgreSQL Database Server Using FireDAC In Delphi On Windows

CodeDelphiRAD Studio

TFDBatchMove Is A Powerful Way To Move Data Between Text Files And Tables Using Datasets In Delphi

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

IN THE ARTICLES