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. 1 Loading images


You can assign a TImageList ( or a TVirtualImageList in the VCL version ) 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;

Use the icons of your imageList in your styles.

map.icons := your_imageList;

map.styles.addRule('.marker.amenity:restaurant {graphic:0}'); // icon 0
map.styles.addRule('.marker.amenity:cafe {graphic:1}'); // icon 1
map.styles.addRule('.marker.amenity:bar {graphic:2}'); // icon 2
You can also directly assign a TPngImage to the Graphic property from the TECShapeMaker

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

Images are shared between markers, if you assign the same file to several markers, there will only be one instance of the image, this limits memory consumption.


By default when you directly assign a TGraphic to the property Graphic it is automatically released when the marker is destroyed.

To prevent this, set the property OwnsGraphic of the marker to false.

But then you'll be responsible for destroying it when it's no longer in use.

You'll have to make sure you don't share the TGraphic you assign with other markers that also have OwnsGraphic set to true !


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. 2 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. 3 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, indicate 360 for a full circle.

An angle of 0 corresponds to the North.


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

You can change the transparency of the cone with the FovOpacity property.

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

Fig. 4 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. 5 automatic scale

Adjust size to Zoom

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

Fig. 6 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. 7 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. 8 GroundOverlay

go to page
Réalisé avec la version gratuite pour les particuliers d'Help&Web