Composant Delphi / Google Maps / OpenStreetMap / Leaflet  / Mappilary / Native Maps 100% Delphi 0% WebBrowser 0% Javascript


you are here :TECNativeMap

API Keys

TECNativeMap uses OpenStreetMap.

If you want to use these services of MapQuest you must obtain a key from MapQuest.

Do the same to use the services of MapZen and MapBox.

Offline mode

If you specify a directory in the LocalCache property, all datas will be cached and can be reused in offline mode.


Managing Routes and turn by turn navigation.

procedure Request(const StartAdress, EndAdress: string;const params: string = '';const FutureRoute:TECShapeline=nil); overload;

procedure Request(const dLatLngs: array of double;const params: string = '';const FutureRoute:TECShapeLine=nil); overload;

Calculate a route between addresses or points
map.Routing.routeType := rtCar;
// get data road between Tarbes and Paris
// get data road between Tarbes and Lourdes via Aureilhan
// you can also pass a array of coordinate pairs
Params allows you to pass additional parameters to the routing engine

Attention for OpenStreetMap and OSRM you must make sure to pass valid settings, see the documentation (identical for both because the engine is the same)

FutureRoute is an empty line that will be initialized with the data returned by the routing engine, this allows you to attach parameters that can be used when the route is finalized in OnAddRoute;

property routeType: TMQRouteType

Type of route ( rtCar, rtFastest, rtShortest , rtPedestrian, rtBicycle )

property OptimizeRoute : boolean

Calculation optimization, only MapBox and MapQuest engines support this feature

property GroupName : string

Name of the group which will own the new road (TECShapeLine), default empty

function FutureRoute:TECShapeLine;

returns an empty line that you can pass to Request
We will directly pass a line to the routing engine
so that we can attach parameters to it
that will be used when the route is calculated,
here we store the speed of our mobile according to the type of route desired

RouteLine := map.routing.futureRoute; // return a empty line

if rbWalking.ischecked then
map.Routing.RouteType := rtPedestrian ;
else if rbBicycling.ischecked then
map.Routing.RouteType := rtBicycle ;
map.Routing.RouteType := rtCar;

// then empty string is for optionnal params, here none
map.Routing.Request(RouteStart.Text, RouteEnd.Text,'',RouteLine);

property Color : TColor

Color of the road

property Weight: integer

Thickness of the road

property StartMarkerFilename: string

Image used to mark the start, default

property EndMarkerFilename: string

Image used to mark the arrival, by default

property RouteDrawingTime: integer

Time (in MS) to display the route, allows to realize an animation for a progressive display.
Default 0, the road appears only once.

property EditRoute: TECShapeLine

To edit the route with the mouse

property EditOnClick : boolean

By default a click on a route makes switch to edit mode, simply click on the points A or B to exit this mode

Routing engine

procedure Engine(value:TRoutingEngine;const ApiKey:string='');

Allows you to choose a routing engine, OpenStreetMap (default choice), MapQuest (only one engine available before), MapZen, OSRM or MapBox


Use EngineValidUrl to change the url before is sent to the engine

procedure doUrl(sender:TECThreadDataRoute);
// Here you can change the url
// ! your are not in main thread
sender.Url := ...;

procedure TFDemoNativeRoute.FormCreate(Sender: TObject);
// setup routing
// intercept url before engine
map.Routing.EngineValidUrl := doUrl;


Define its own engine

Use EngineUrl and EngineExcute to edit your own engine.

property EngineUrl : TECThreadRoutingUrl

property EngineExecute : TECThreadRoutingExecute

procedure TFForm.FormCreate(Sender: TObject);
map.Routing.EngineName := yourRouting_Name;
map.Routing.EngineUrl := YourRoutingUrl;
map.Routing.EngineExecute := YourRoutingExecute;

// build url here
procedure YourRoutingUrl(sender:TECThreadDataRoute);
// sender:TECThreadDataRoute content all necessary info

sender.url := ...

// build route here
procedure YourRoutingExecute(sender:TECThreadDataRoute; var valid:boolean);
// sender.RequestResult content data
// see source of engine supported in uecNativeMapShape.pas

EngineUrl and EngineExecute are executed in another thread !


property EngineName : string

Gives a name to the engine, used for local storage

property EngineKey : string

Key to use the engine, you get yours from MapQuest, MapZen or MapBox

property TurnByTurn: TECTurnByTurn

The turn by turn navigation management

4 events are available

property OnAddRoute : TOnAddRoute
Raised when the road has been created
property OnChangeRoute : TOnChangeRoute
Raised when the road has changed
property OnErrorRoute : TOnErrorRoute
Raised if the road has not been created
property OnDrawRoute : TOnDrawRoute
Raised when the road was fully displayed (useful if RouteDrawingTime > 0)
map.Routing.OnAddRoute := doOnAddRoute;
map.routing.OnErrorRoute := doOnErrorRoute ;
map.Routing.OnChangeRoute:= doOnChangeRoute;

procedure TFDemoNativeRoute.doOnAddRoute(sender: TECShapeLine;const params:string);
// sender is the route (TECShapeLine)
// params this is the URL sent to the routing engine

procedure TFDemoNativeRoute.doOnErrorRoute(sender: TObject;const params:string);
// sender is a TECThreadDataRoute
ShowMessage('Route not found !');

procedure TFDemoNativeRoute.doOnChangeRoute(sender: TECShapeLine;const params:string);
if not assigned(sender) then exit;

showMessage ( doubleToStrDigit(sender.Distance, 2) + 'km - ' +
doubleToStrDigit(sender.Duration / 3600, 2)+'h' ) ;


property line: TECShapeLine

The way ahead

function Position(const Lat, Lng: double):boolean

Specify your GPS position

property AlertDistance: integer

By default 300 meters

property ExecutionDistance: integer

Default 100 meters

property ErrorDistance: integer

Default 30 meters

property NextInstruction:string

Next statement to follow

Available in the OnInstruction event


property NextManeuver: string ;

List of operations (in the form of a json string containing various parameters depending on the engine used)

Available in the OnInstruction event


property NextInstructionInKm: double ;

Distance in KM for the next instruction

Available in the OnInstruction event


property NextInstructionPosition: TLatLng ;

Geographical position of the next instruction

Available in the OnInstruction event


available events

property OnAlert: TOnTurnByTurnAlert

Triggered when you arrive less than AlertDistance meters from the target

property OnInstruction: TOnTurnByTurnInstruction

Triggered when you arrive less than ExecutionDistance meters from the target

property OnArrival: TNotifyEvent

property OnError: TOnTurnByTurnError

property OnAfterInstruction: TOnTurnByTurnInstruction

property OnConnectRoute: TNotifyEvent

Triggered by a road connection

property OnDeconnectRoute: TNotifyEvent

Triggered by the disconnection of a road
map.Routing.TurnByTurn.OnInstruction := doOnTurnByTurnInstruction;
map.Routing.TurnByTurn.OnAfterInstruction := doOnTurnByTurnInstruction;
map.Routing.TurnByTurn.OnAlert := doOnTurnByTurnAlert;
map.Routing.TurnByTurn.OnArrival := doOnTurnByTurnArrival;
map.Routing.TurnByTurn.OnError := doOnTurnByTurnError;

procedure TFDemoNativeRoute.doOnTurnByTurnAlert(sender : TECTurnByTurn;const Instruction:string;const Distance:double);
// alert is fired before OnInstruction

procedure TFDemoNativeRoute.doOnTurnByTurnInstruction(sender : TECTurnByTurn;const Instruction:string;const Distance:double);
// execute instruction in Distance (km)

Fig. 87 DemoNativeRoute

The DemoNativeRoute demo has been rewritten to use the new feature.


Old methods, use new features available since version 2.7


Search for routes

You have at your disposal 4 routines (2 synchronous et 2 asynchronous) to calculate a route.

function GetRoutePathByAddress(const StartAdress, EndAdress: string;const routeType:TMQRouteType = rtFastest const params: string = '' ): TECRoutePath

function GetRoutePathFrom(const dLatLngs: array of double;const routeType:TMQRouteType = rtFastest ;const params: string = '' ): TECRoutePath

procedure GetASyncRoutePathByAddress(const StartAdress, EndAdress: string;const routeType:TMQRouteType = rtFastest ;const params: string = '' )

procedure GetASyncRoutePathFrom(const dLatLngs: array of double;const routeType:TMQRouteType = rtFastest ;const params: string = '' )

These functions allow to obtain information from a route without trace, asynchronous procedures will run in background and raise the OnRoutePath event when the data are available.

See for the parameter Params


If you do not release the TECMapRoutePath obtained, it will be automatically during the destruction of TECNativeMap


Display the route

You can create a TECShapeLine from one TECMapRoutePath with the function AddRoute

// Delphi map component ECMap

var line : TECShapeLine;
// ge data road between Tarbes and Lourdes via Aureilhan
routePath := map.GetRoutePathByAddress('Tarbes','Aureilhan|Lourdes');
// draw polyline from routePath
if routePath<>nil then

Line := map.AddRoute(routePath);
// see the entire route

You can also directly edit a TECShapeLine with the procedure setRoutePath

// Delphi map component ECMap

var line : TECShapeLine;
// ge data road between Tarbes and Lourdes via Aureilhan
routePath := map.GetRoutePathByAddress('Tarbes','Aureilhan|Lourdes');
// draw polyline from routePath
if routePath<>nil then

// change line 0 with new data
if map.shapes.lines.count>0 then
// see the entire route

Edit the road with the mouse

For this you will need to add the unit uecEditNativeLine (FMX.uecEditNativeLine under FireMonkey)

You can then use the TecNativeLineToRoute class to be able to dynamically change the route.

property Line : TECShapeLine
TECShapeLine to modify
property RouteType : TMQRouteType
type of road ( rtFastest, rtShortest, rtPedestrian, rtBicycle )
property Modified : boolean
Indicates if the road was amended
property OnClick : TOnShapeMousePoint
To respond to the click on the road
property OnMouseOver : TOnShapeMousePoint
Can respond to the overview of the road
property OnChange : TNotifyEvent
Triggered event has each modification of the road

Example of use

// Delphi map component ECMap

var ecNativeLineToRoute : TecNativeLineToRoute;
ecNativeLineToRoute := TecNativeLineToRoute.create;

// edit route
ecNativeLineToRoute.Line := map.shapes.Lines[0];

// end edit route
ecNativeLineToRoute.Line := nil;


A demonstration is available to understand the management of roads.

Fig. 88 DemoNativeRoute

go to page
© 2016 ESCOT-SEP Christophe - Made width Help&Web - RSS - Google+