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


you are here :TECNativeMap > Shapes


The TECShapeMarker are represented by an image markers, You can load a picture in 3 ways

Specifying a .png through the property file Filename

map.Shapes.Markers[0].filename := '';

Filename also accepts local files


Alternatively, you can directly specify a Base64-encoded image (Data URI)

const Data_Uri = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA

map.Shapes.Markers[0].filename := Data_Uri;

By default an animation indicates that the image is to be downloaded, you can delete this effect by switching the property WaitAnimation to false

Fig. 95 Loading images

In the VCL version you can assign a TImageList with PNGs to the Icons property of the TECNativeMap, then indicate the index of the image in the Icon of the TECShapeMarker property.

map.Icons := myImageList;
// use icon number 1
map.Shapes.Markers[0].Icon := 1;

You can also directly assign a TPngImage to the Graphic property from the TECShapeMaker

map.Shapes.Markers[0].Graphic := MyPngImage;

You can specify the clickable area with the function SetHitBox(x,y,w,h)

X,Y indicates the top-left corner of the clickable area
W the width
H the height

The top-left corner of the marker is 0,0

Use the properties XAnchor and YAnchor to determine the specific point of the image corresponding to the latitude and longitude

Example to center the image on the geographical coordinates

map.Shapes.Markers[0].Graphic := MyPngImage;

// center on latitude,longitude
map.Shapes.Markers[0].XAnchor := map.Shapes.Markers[0].width div 2;
map.Shapes.Markers[0].YAnchor := map.Shapes.Markers[0].height div 2;

Default image

If you let Filename and Graphic empty, the marker is drawn using StyleIcon and the Color property.


There are 6 styles for the markers without images

Fig. 96 StyleIcon si3d - siFlat - siFlatNoBorder - siDirection

If you have several tens of thousands of items to display, use the siFlatNoBorder style, it is the fastest to display

var mrk3d,mrkFlat,mrkFlatNB,mrkDirection : TECShapeMarker;

mrk3d := map.addMarker(lat1,lng1);
mrk3d.StyleIcon := si3D;
mrk3d.color := claRed;

mrkFlat := map.addMarker(lat1,lng1);
mrkFlat.StyleIcon := siFlat;
mrkFlat.color := claBlue;

mrkFlatNB := map.addMarker(lat1,lng1);
mrkFlatNB.StyleIcon := siFlat;
mrkFlatNB.color := clagreen;

mrkDirection := map.addMarker(lat1,lng1);
mrkDirection.StyleIcon := siDirection;
mrkDirection.color := clagreen;
// angle indicates the direction ( 0 = North, 180 South )
mrkDirection.angle := 30;

You can change its color on hover of the mouse with the property HoverColor



With Firemonkey you can also use SVG images, only the most simple but it is enough to display the icons of the MAKI project for example.

Fig. 97 Maki icons

mrk.Filename := 'local_path_or_url\bicycle-15.svg';

// You can also directly inject the SVG data

mrk.StyleIcon := siSVG;
mrk.Filename := 'M7.49,15C4.5288,14.827,2.1676,12.4615,2,9.5C2,6.6,6.25'+

// you can style like this
map.styles.addRule('.marker {Graphic:HERE-SVG-DATA;StyleIcon:siSVG;color:red}');

You can also use siOwnerDraw to draw your self your marker


marker.StyleIcon := siOwnerDraw
marker.OnAfterDraw := doOwnerDraw;
procedure TForm1.doOwnerDraw(const canvas: TECCanvas; var rect: TRect; item: TECShape) ;
var s:string;
// draw hint

Field of view

If the Fov (Field of view) property is greater than 0, a cone appears in the direction defined by the angle of the marker.

An angle of 0 corresponds to the North.


You can change the length of the cone with the FovRadius property.

mrk.fov := 40;
mrk.FovRadius := 30;
mrk.Angle := 180;

Fig. 98 field of view


The Scale property change the size of the marker.

mrk.scale := 1.5; // increases by 50%
mrk.scale := 0.5; // decrease of 50%

You can use styles to increase the size of the markers when the mouse passes over

map.styles.addRule('.marker:hover {scale:1.5;}');

Fig. 99 automatic scale

Adjust size to Zoom

Use the ScaleMarkerToZoom property to set the marker size changes depending on the Zoom.

Fig. 100 ScaleMarkerToZoom

map.ScaleMarkerToZoom := true;


This event is raised before the drawing of your marker, you can use it to add a background

// sample, add a circle in the background of the marker
// for all markers of default group
map.shapes.markers.OnBeforeDraw := doCircleMarker;
procedure TForm1.doCircleMarker(const canvas: TECCanvas; var rect: TRect; item: TECShape) ;
// size border
Canvas.PenSize := 3;
// border color
canvas.pen.Color := $FFEDEDED;

if item.Hover or item.Selected then
canvas.Brush.Color := item.Color
canvas.Brush.Color := item.HoverColor;

canvas.Ellipse(rect.left - 8,rect.Top - 8,rect.Right+8,rect.Bottom+8);

Fig. 101 OnBeforeDraw


You can constrain an image to cover a certain area

The area is defined by SetBounds(NorthEastLatitude,NorthEastLongitude,SouthWestLatitude,SouthWestLongitude:double)

You enable the recovery by flipping the property fitBounds to true;

// groundoverlay
i := map.Shapes.Markers.Add(40.712216,-74.12544);

map.Shapes.Markers[i].Filename := '';
map.Shapes.Markers[i].fitbounds := true;

Fig. 102 GroundOverlay

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