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


you are here :TECNativeMap

To use the shapes you need to add the unit uecNativeShape


All the elements positioned on the map are accessible through the property Shapes type TECShapes, they descend all the class TECShape

when you add several items, use BeginUpdate / EndUpdate, otherwise the map is redrawn after each addition.


// for optimisation



Instead of manually decorate each element you can define rules to apply a style

Groups ( TECShapes )

A group maintains a set of elements, the Shapes property is the default group, you go to a group by the Group ['name'] property

You can also be accessed by an index through the property Groups


for i:=0 to map.groups.count-1 do

// or by iterator

Group : TECShapes;

for Group in map.Groups do

procedure Clear
empty group
procedure BeginUpdate
blocks the drawing of the map, ensures best performance
procedure EndUpdate
Authorizes a repaint of the map

// for optimisation


procedure fitBounds
Displays the map so that all the elements of the group are visible in the best zoom

Pois, markers, lines and polygons properties also have a fitBounds procedure

procedure SaveToFile(const Filename: string)
Saves the group to a file, the format is determined by the extension .gpx, .kml or own to TECNativeMap text format
function LoadFromFile(const Filename: string): boolean
Charge the group with the contents of a file, the format is determined by the extension .osm, .olt, .gpx, .kml or own to TECNativeMap text format

The OnLoad event is raised when the content is fully available

function LoadFromOSMStream(const Stream: TStream): boolean;

Charge the group with a stream that contains data in the OSM XML format or olt

function LoadFromOSMString(const data: string): boolean;

Charge the group with a string containing data at the OSM XML format or olt

property Clusterable : boolean

Active support of Clusters, This allows you to group markers and pois who are near for better visibility

Fig. 98 Clustering

property ClusterManager : TECClusterManager
property Pois: TECShapePOIList
List of elements of type TECShapePOI
property Markers: TECShapeMarkerList
List of elements of type TECShapeMarker
property Lines: TECShapeLineList
List of elements of type TECShapeLine
property Polygones: TECShapePolygoneList
List of elements of type TECShapePolygone
Liste des éléments de type TECShapePolygone
property InfoWindows: TECShapeInfoWindowList
Liste des éléments de type TECShapeInfoWindow

The lists have an iterator as groups


// Iterator for all list of shapes (markers, pois, lines, polygones and infowindows )

var poly : TECShapePolygone;

for poly in map.shapes.polygones do
poly.color := clRed;

property MaxZoom: byte
Maximum zoom level for which the items are displayed, above the group is not displayed
property MinZoom: byte
Minimum zoom level for which the items are displayed below the group does not appear
property Zindex : integer
Groups are displayed in ascending their ZIndex
function TopZindex : longint;
Returns the highest ZIndex of all the elements in the Group

TECNativeMap.TopGroupZindex Returns the highest ZIndex of all groups

property Clickable : boolean
Indicates whether all the elements meet the click of the mouse

The elements also have a clickable property

property Serialize : boolean
Indicates whether the Group should be saved when you save the entire map

Does not apply if we directly backup group


map.Group['group1'].Serialize := true;
map.Group['group2'].Serialize := false;

map.SaveToFile(filename); // group2 not save

property Visible: boolean
Display/Hide group
property Show: boolean
Show/Hide group but unlike visible items remain accessible to the mouse

Fig. 99 TECShapes.Show

property ShowHint: boolean
Allows the display of the property Hint of the elements in the form of a bubble when hovering the mouse over
property Name: string
name of the group read-only
property ToTxt: string;
Import/Export in native format
property ToGpx: string;
Import/Export to Gpx format
property ToKml: string;
Import/Export to KML

Add Shapes

You can use the following shortcuts to add your items

function TNativeMapControl.AddPOI(const Lat, Lng: double; const GroupName: string = ''): TECShapePOI;

function TNativeMapControl.AddMarker(const Lat, Lng: double; const GroupName: string = ''): TECShapeMarker;

function TNativeMapControl.AddLine(const Lat, Lng: double; const GroupName: string = ''): TECShapeLine;

var line : TECShapeLine;
// create line
line := map.addLine(lat,lng);
// use this syntax for add line in group
// line := map.addLine(lat,lng,'your group');

// don't free ! or use remove
// line.remove

// to find your item in the list use indexof
// map.shapes.lines[line.indexof]
//['your group'].lines[line.indexof]

// block repaint
// add more points in line
// now of for repaint
function TNativeMapControl.AddLine(const dLatLngs: array of double; const GroupName: string = ''): TECShapeLine;

var line : TECShapeLine;
// create line
line := map.addLine([lat,lng,lat2,lng2,lat3,lng3]);
// use this syntax for add line in group
// line := map.addLine([lat,lng,lat2,lng2],'your group');

// block repaint, no need with addline but now yes
// add more points in line
// now of for repaint
function TNativeMapControl.AddPolygone(const Lat, Lng: double; const GroupName: string = ''): TECShapePolygone;

function TNativeMapControl.AddPolygone(const dLatLngs: array of double; const GroupName: string = ''): TECShapePolygone;

function TNativeMapControl.AddInfoWindow(const Lat, Lng: double; const GroupName: string = ''): TECShapeInfoWindow;

Do not destroy this shapes, they are kept in their respective group lists



The following properties allow you to change the display of the clusters

property Color : TColor
property TextColor : TColor
property BorderColor : TColor
property BorderSize : integer
property FontSize : integer
property Opacity : byte
property WidthHeight : integer

property MaxPixelDistance : integer

Items that are less than MaxPixelDistance of a cluster are grouped, 60 pixels by default

property DrawWhenMoving : boolean

Displays the clusters while moving the map defaults to true

property MaxZoom : byte

If the zoom is greater than MaxZoom elements are not grouped, default 18

property OnAddShapeToCluster : TOnAddShapeToCluster (sender : TECCluster; const Shape:TECShape;var cancel:boolean)

Raised when an item is added in a cluster, you can refuse by toggling cancel to true, default false

property OnColorSizeCluster : TOnColorSizeCluster (const Cluster : TECCluster;
var Color:TColor;var BorderColor:TColor;var TextColor:TColor,
var WidthHeight,FontSize:integer)

Raised before the display to allow you to adjust properties

property OnDrawCluster : TOnDrawCluster (const Canvas : TECCanvas; var rect : TRect; Cluster : TECCluster)

If you connect on this event you are supporting fully the cluster design

property OnMouseOverCluster : TOnNotifyEventCluster (const Cluster : TECCluster)

Triggered by the entry of the mouse on the cluster

property OnMouseOutCluster : TOnNotifyEventCluster (const Cluster : TECCluster)

Triggered by the release of the mouse in the cluster

example, change color depending on the number of elements contained by the cluster

map.Shapes.Clusterable := true;
map.Shapes.ClusterManager.OnColorSizeCluster := doOnColorSizeCluster;

procedure TForm.doOnColorSizeCluster(const Cluster : TECCluster;
var Color:TColor;var BorderColor:TColor;var TextColor:TColor;
var WidthHeight,FontSize:integer

if Cluster.Count< 10 then
Color := clGreen;


if Cluster.Count< 100 then
Color := clBlue;


Color := clRed;


Element TECShape

All displayable elements are descended from TECShape, they share the following properties

property Clusterable

allows not group this elements, true by default

map.shapes.markers[10].Clusterable := false;

property Address: string

Returns the address of the element, research is blocking
procedure Location

Geolocated the element, equivalent to Address but is not blocking

Raises OnShapeLocation(item:TECShape,GeoResult:TECGeoResult;const Valid:boolean);

If the TECShape is not OnShapeLocation event is the OnShapeLocation of its Group that is raised.

Valid is true if the current position of the element is the same as that at the research.

map.shapes.OnShapeLocation := doShapeLocation;
// Asynchronous search address for Markers[0],
// when it is found map.shapes.OnShapeLocation is triggered
procedure TForm1.doShapeLocation(item:TECShape;const GeoResult:TECGeoResult;const Valid:boolean);

if assigned(item) and Valid then
// address


function DistanceTo(Shape:TECShape)

Returns the distance in kilometres between the two elements

procedure InfoWindow(const content:string);

procedure InfoWindow(window:TECShapeInfoWindow);

Add an infoWindow to the element, it appears when you click on the element.

my_marker.InfoWindow('content for my marker');
// you can also use one infoWindow for many shapes
id := map.shapes.infoWindows.add(0,0,'the same for all');
// for delete use nil

procedure Remove

You can directly delete element

procedure SetPosition(const dLat, dLng: double)

Moves the item to latitude and longitude
procedure SetDirection(const dLat, dLng: double)
Moves the item to latitude and longitude, changes its angle of rotation so that it rotates in the right direction
procedure CenterOnMap
Move the map so that the element is at the centre

function IndexOf: integer

Index of the item in its list (Pois, Markers, Lines ou Polygones)

function ShowOnMap: boolean

Indicates whether the item is in the visible part of the map

property Animation : TECShapeAnimation

Lets animate shape see Animation
property Latitude: double
Latitude of the element

property Longitude: double

Longitude of the element

property Altitude: double

Altitude of the element, you must have plugged a TECGeolocalise for your TECNativeMap component

property Color: TColor

Color of the item

property HoverColor: TColor

Color on hover

property Tag: longint

You can use it freely

property Visible : boolean

Displays or hides the element
property TrackLine : TECShapeLine

If TrackLine is set the track of the movement of the element will be generated

To activate it, simply use the property, you can also directly assign a line

FTracker := map.AddMarker(Latitude,Longitude) ;
// To activate the trace just access TrackLine
// line is created in the same group as FTracker
FTracker.TrackLine.visible := true;

// You can also pass a line
FTracker.TrackLine := your_line;

// for stop tracking set to nil , the line is free
FTracker.TrackLine := nil

Fig. 100 Trackline

property isTrackLineActive : boolean
Lets you know if a TrackLine is enabled.

If you test directly TrackLine it is automatically created if it does not exist !


property Serialize : boolean

Specify whether the item can be saved to a file (default yes)

property Clickable

Makes the reactive element to the mouse

property ZIndex

The items are displayed in ascending their ZIndex

Show element in foreground regardless of ZIndex

A single item at a time may be in the foreground, BringToFront does not change the display order which remains dependent of the ZIndex

Return to the normal display order

property Draggable

Makes a draggable element with the mouse
property XAnchor and YAnchor
Allows you to set the exact point inside the area of the element representing the Latitude and Longitude
property Angle
Angle of rotation in degrees (0-360)

Available for TECShapeMarker and TECShapePOI


property Hint: string

The text displayed in the bubble when the mouse hovers over the element, the parent group ShowHint property must be tripped to true

The text may be enriched with some html tags see TECShapeInfoWindow

property EnabledHint
Enables / disables the display of the ToolTip information for the item
property MaxShowHint
indicates the number of times the information bubble will be displayed, you can reactivate it with EnabledHint or reloading MaxShowHint
property PropertyValue[Name]
allows you to access the value of the property Name

You can use PropertyValue to store your own data, this property is also used by vector tiles, the OpenStreetMap data is saved.

property Properties
List of Property/Value in the format "name: value", each pair is separated by a carriage return.

property Group:TECShapes

Group to which the item belongs
property Selected

Selects item, selected item appears as if it was over

The Selected property of the map contains all selected items

// you can use Iterator

var shape:TECShape

for shape in map.Selected do


Type of the list of selected items, gives you access to

function ByArea(const NEALat,NEALng,SWALat,SWALng :double):integer;
Selects elements within the area bounded by NEALat, NEALng (top-right corner) and SWALat, SWALng (bottom-left corner)
function ByKMDistance(const FLat,FLng,FKMDistance :double):integer;
Selects elements within KMDistance (distance in km) to the point FLat,FLng
procedure UnSelectedAll
Cleared all elements without deleting
procedure Clear
Clears all selected items of the map

function count : integer;

procedure SaveToFile(const filename:string);

property Item[index: integer]: TECShape
Returns the element whose is the index
property ToTxt:string
Returns the selected items in the internal text format of TECNativeMap (read-only)
property GroupFilter : TStringList
Allows you to filter based on the groups of elements, leave empty to select items regardless of his group
property OnChange:TNotifyEvent ;
Triggered by adding/removing an item to the list of selected


You have several functions to search in your items

function FindShapeByArea(const SWALat, SWALng, NEALat, NEALng: double;
                        const ShapeList: TList<TECShape>;
                        const FilterShapes : TNativeShapes = [];
                        Filter:TOnShapeFilter=nil): integer;

ShapeList filled with items in a rectangular area which indicates the Southwest corners and Northeast

FilterShapes allows you to filter the wanted elements, by default all, example [nsMarker,nsPoi] to search only for TECShapeMarker and TECShapePOI

Filter allows to add a procedure to filter the search

// find the cafes located less than 2km
map.FindShapeByKMDistance(map.Latitude,map.Longitude, 2.0,liste,[nsMarker,nsPoi],FilterCafe);

procedure FilterCafe(const Shape: TECShape; var cancel: boolean);
cancel := shape.PropertyValue['kind']<>'cafe' ;

function FindShapeByKMDistance(const FLat, FLng, FKMDistance: double;
                                const ShapeList: TList<TECShape>;
                                const FilterShapes : TNativeShapes = [];
                                Filter:TOnShapeFilter=nil): integer;
ShapeList filled with items that are less than FKMDistance km from the point FLat,FLng
function FindShapeByFilter(const ShapeList: TList<TECShape>;
                                const FilterShapes : TNativeShapes;
                                Filter:TOnShapeFilter): integer;

All these functions return the number of items found.


For Delphi versions that do not support generics ShapeList is a simple TList



Forms trigger the following events :

property OnShapeMove : TOnShapeMove

property OnShapeDrag : TOnShapeMove

property OnShapeDragEnd : TNotifyEvent

property OnShapeMouseOver : TOnShapeMouseEvent

property OnShapeMouseOut : TOnShapeMouseEvent

property OnShapeMouseDown : TOnShapeMouseEvent

property OnShapeMouseup : TOnShapeMouseEvent

property OnShapeClick : TOnShapeMouseEvent

property OnShapeRightClick: TOnShapeMouseEvent

property OnShapeDblClick : TOnShapeMouseEvent

property OnShapeDblClick : TNotifyEvent

property OnShapeLocation : TOnShapeLocation

Events can be assigned individually to each element, in this case they are not passed to the level of TECNativeMap



// connect directly to the event
// OnshapeClick of TECNativeMap will not be triggered for marker 0
map.shapes.markers[0].OnShapeClick := MarkerShapeclick;

Snap markers on a line or a polygon

You can set the TECShapeMarker and TECShapePOI which will automatically gravitate towards a TECShapeLine or a TECShapePolygone if the drop has some distance from these.

Fig. 101 SnapDrag

Manage you this through the SnapDrag of type TECSnapDrag of the mapping component TECNativeMap property.

procedure ClearMarker;
Removes all the snaping markers
function AddMarker(const Marker: TECShape): boolean;
Adds a TECShapeMarker or TECShapePOI in the list of the snaping markers.
Returns true if the element is added.
procedure RemoveMarker(const Marker: TECShape);
Deletes the marker from the list of the snaping markers
procedure ClearGuide;
Remove all the TECShapeLine and TECShapePolygone of the list of guides
function AddGuide(const Guide: TECShapeLine): boolean;
Adds a TECShapeLine or a TECShapePolygone in the list of guides.
Returns true if the element is added.
procedure RemoveGuide(const Guide: TECShapeLine);
Removes the element from the list of guides
procedure CancelSnap;
Cancel the move and puts the marker to its point of origin
property MeterDistance: boolean ;
Selects the unit for distance triggering the magnetization.
true to meters, false (default) to pixels.
property SnapDistance: integer ;
Distance of attraction of the markers to a guide
property SnapShape: TECShape ;
Returns the marker that comes to be attracted.
property SnapGuide: TECShape;
Returns the guide coming to snap a marker
property TargetLine:boolean;
If true draws a line between the marker and the point target on the guide
property OnSnap: TNotifyEvent;
The event is raised when the a marker is attracted by a guide.
property OnNoSnap: TNotifyEvent;
The event is raised when the a marker is drop outside the catchment area of a guide.


map.SnapDrag.MeterDistance := true;
map.SnapDrag.SnapDistance := 50; // 50 meters

map.SnapDrag.MeterDistance := false;
map.SnapDrag.SnapDistance := 50; // 50 pixels

The property _snap_ of the guides is set to true when it attracts a marker, you can use to define a style that will visually report the status.

// double the size of line when targeted
map.Styles.addRule('.line._snap_:true {scale:2}') ;
map.Styles.addRule('.polygone._snap_:true {scale:2}') ;
// default size
map.Styles.addRule('.line._snap_:false {scale:1}') ;
map.Styles.addRule('.polygone._snap_:false {scale:1}') ;
// doted target line

If you want that markers are attracted to specific lines, you can create your own variable of type TECSnapeDrag

var MySnapDrag : TECSnapDrag;
MySnapDrag := TECSnapDrag.create;



Drawing and free hand selection

FreeHand allows you to define lines, which can become polygons, to mouse, for it simply activate FreeHand.Draw

Fig. 102 Draw lines and polygons

// event triggered when the drawing is finished
map.FreeHand.OnDraw := doFreeHandDraw;
// activate the hands-free drawing
map.FreeHand.Draw := true;
procedure TForm.doFreeHandDraw(Sender: TObject);
// save the line to your map
// convert the drawn line into a polygon and add it to the map

You can also activate the free hand selection tool, allows you to choose items simply by surrounding

Fig. 103 Sélection main libre

// trigger after selection
map.FreeHand.OnSelection := doOnSelection;
// start sélection mode
map.Selection := true;
procedure TForm21.doOnSelection(Sender: TObject);
ShowMessage(inttostr(TECNativeFreeHand(sender).SelectionList.count)+ ' selected elements');

property AutomaticMapMovement : boolean ;

Allows the automatic card moving when the drawing cursor approaches an edge, default True

property Draw: boolean ;

The drawing mode.

property Selection: boolean ;

The mode Selection.

Do not disable Draw after enabling Selection, Selection also active Draw !


property MouseButton: TMouseButton ;

The mouse button used to draw, by default mbRight.

If you use the left button, it map may be moved by holding down the CTRL key.


property Cursor: TECShape ;

Drawing slider, by default a TECShapePOI in the shape of a cross.

property Line: TECShapeLine;

The line that represents your drawing, you can adjust its properties either directly or by style.

// style for draw line
map.Styles.addRule('#TECNativeFreeHand.Line {color : green;penStyle:Dash;weight:2}') ;

Fig. 104 Style FreeHand Line

property PolygoneSelection: TECShapePolygone ;

Accessible in the OnSelection event, it represents the area of your selection.

property SelectionList: TECShapesList;

Accessible in the OnSelection event, this list contains selected items.

property SelectionFilter: TOnShapeFilter

Can set a filter for selection.

map.FreeHand.SelectionFilter := FilterCafe;
// select only cafe
procedure FilterCafe(const Shape: TECShape; var cancel: boolean);
cancel := shape.PropertyValue['kind']<>'cafe' ;
go to page
© 2016 ESCOT-SEP Christophe - Made width Help&Web - RSS - Google+