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


you are here :TECNativeMap > Shapes

TECShapeInfoWindow allows you to display a panel containing text.

Windows are managed by an TECShapeList list accessible through the property InfoWindows groups TECShapes

Fig. 80 InfoWindow


The following properties are available

property Color : TColor

Color window

property Style : TECInfoWindowStyle

The window style : iwsTransparent, iwsRectangle or iwsRoundRect (by default)

property Visible : boolean

show / hide window

property CloseButton : boolean

show / hide close button

property ContentCenter : boolean

Center text horizontally

property Width : integer;

Width in pixels

property Height : integer;

Maximum height, if the text takes up less space then the height is automatically adjusted

property Content : string

Text to display

You can use a subset of HTML to enrich the display


Tags <img>,<h>, <a> ,<b>, <i>, <u>, <s>, <font>, <br>,<tab> and <PlainText> are supported

map.Shapes.InfoWindows.add(map.latitude,map.longitude, 'content');
// html content
map.Shapes.InfoWindows[0].Content :=
'<tab="32"><font face="Times New Roman" size=14 bkcolor=FF0000 color=FFFFFF>Font</font><br>'+
'<tab="32"><a href="#16/43.094089/-0.046520">Link Lourdes</a> <img src="" width=32 height=32>';

Fig. 81 html Content InfoWindow

If you have assigned a TImageList to your map, you can use the image tag to display your icons, just enter the number in the parameter src

map.icons := imageList;
mrk := map.addMarker(lat,lng);
mrk.infoWindow('<img src=2 width=48 height=48>');

property OnOpen : TOnInfoWindowOpen;

This event is raised just before the window display, you can change the contents or cancel opening

win.OnOpen := doOnOpenWindow;
procedure TForm.doOnOpenWindow(const infoWindow: TECShapeInfoWindow; var cancel: boolean);
// set cancel to true for not open then infowindow (default false)
// cancel := true;

infoWindow.Content := 'change content here';


When a window is closed by clicking on his cross the event OnCloseInfoWindow of TECNativeMap is raised and a TECShapeInfoWindow is passed as a parameter.

OnCloseInfoWindow does not occur if you close by using the property visible


Automatic closing

Using an animation of type TECAnimationAutoHide you can close the window automatically after a few seconds.

var win: TECShapeInfowindow;
win: = map. addInfoWindow (lat, lng);

// automatically close the window after 15 seconds
win.Animation := TECAnimationAutoHide.Create;
TECAnimationAutoHide (win.Animation).MaxTiming := 1000 * 15;


You can set a link by using the <a> tag, to intercept the click Connect on the OnBeforeUrl event of your map.

s := '<a href="#your_data"> link </a>';
OpenInfoWindow (s, Item.Latitude, Item.Longitude);


Procedure TForm.mapBeforeUrl (Sender: TObject; var Url: string);
// here url = '#your_data'

You have the option to set a special link that allows you to move around the map, it is of the form #zoom/latitude/longitude

'<a href="#16/43.094089/-0.046520"> goto here </a>'

Automatic opening by clicking on an element

By switching the property UseInfoWindowDescription of your map to true, the field Description of the elements will be displayed as an infoWindow when you click on them.

You can access a global infoWindow through the InfoWindowDescription property.

map.UseInfoWindowDescription := true;
map.InfoWindowDescription.minHeight := 300;
marker1.Description := '<h1>Marker 1</h1>';
line1.Description := '<h1>Line 1</h1>';
go to page
© 2016 ESCOT-SEP Christophe - Made width Help&Web - RSS - Google+