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

TECShapeInfoWindow

  • Shapes
  • Glossary
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. 1 InfoWindow

TECShapeInfoWindow

The following properties are available

property Color : TColor
Background color window
property FontColor : TColor
Text color, default is black
property BorderColor : TColor
Border color, by default a light grey
property HoverBorderColor : TColor
Border color on mouse over

The color of the border also sets the color of the closing cross.

1

property BordeSize : integer

Border thickness, default 1

Fig. 2 BorderSize = 4

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

property XCurve : integer;

property YCurve : integer;

Management of the radius of curves of the iwsRoundRect style (default 10)
// default group, first window
map.Shapes.InfoWindows[0].XCurve := 5;
map.Shapes.InfoWindows[0].YCurve := 5;
// group XYZ
map[XYZ].InfoWindows[0].XCurve := 10;
map[XYZ].InfoWindows[0].YCurve := 10;

property PeakLink : TInfoWindowPeakLink (iwpNone, iwpArrowHead)

iwpArrowHead displays a triangle pointing to the geographical position.

The length and the horizontal or vertical position of this one depend on the properties XAnchor and YAnchor which fix the offset in pixels compared to the real position.

property ArrowLX : integer;

Width of the base of the triangle on the left side

property ArrowRX : integer

Width of the base of the triangle on the right side

Fig. 3 InfoWindow

property Draggable : boolean

Allows to move the element with the mouse or the finger (default false)

ATTENTION if PeakLink = iwpArrowHead it is XAnchor and YAnchor that are modified and not the geographical position.

Switch to iwpNone to reposition your window geographically.

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

2

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 :=
'<h2><center>Titre</center></h2>'+
'<tab="32"><b>Bold</b><br>'+
'<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="http://maps.google.com/mapfiles/ms/icons/orange-dot.png" width=32 height=32>';


Fig. 4 Html content

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

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

If you use the center tag with text you cannot include any other tag.

1
// ok
<h1><center>your text</center></h1>
<center><img src=xxx></center>

// not ok
<center><h1>your text</h1></center>

You can adjust the height of the line break

3
normal line break <br>
10 pixels line break <br=10 >

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);
begin
// set cancel to true for not open then infowindow (default false)
// cancel := true;

infoWindow.Content := 'change content here';

end;

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

1

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;

Link

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


win := map.shapes.AddInfoWindow('<a href="#your_data"> link </a>');
win.OnLink := doOnInfoWindowLink;
win.setPosition(lat,lng);
win.visible := true;
...

procedure TForm.doOnInfoWindowLink(sender: TECShapeInfoWindow; const url:string);
begin
// here url = '#your_data'
end;

// global event if OnLink not assigned
Procedure TForm.mapBeforeUrl (Sender: TObject; var Url: string);
Begin
// here url = '#your_data'
End;

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

win := map.shapes.addWindow('<a href="#16/43.094089/-0.046520"> goto here </a>');
// the move is automatic when processed in OnBeforeUrl,
// in OnLink you must add map.Url := url
win.OnLink := doOnLink;
...
procedure TForm.doOnLink(sender: TECShapeInfowWindow;const url:string);
begin
// this will trigger the OnBeforeUrl
map.Url := url;
end;

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
Réalisé avec la version gratuite pour les particuliers d'Help&Web