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

TECShapeInfoWindow

Vous êtes ici :TECNativeMap > Shapes

TECShapeInfoWindow vous permet d'afficher un panneau contenant du texte et des images.

Les fenêtres sont gérés par une liste de type TECShapeList accessible au travers de la propriété InfoWindows des groupes TECShapes

Fig. 1 InfoWindow

TECShapeInfoWindow

Les propriétés suivantes sont disponibles

property Color : TColor
Couleur de fond de la fenêtre
property FontColor : TColor
Couleur du texte, par défaut noir
property BorderColor : TColor
Couleur de la bordure, par défaut un gris léger
property HoverBorderColor : TColor
Couleur de la bordure au survol de la souris

La couleur de la bordure fixe aussi la couleur de la croix de fermeture.

1

property BordeSize : integer

Épaisseur de la bordure, par défaut 1

Fig. 2 BorderSize = 4

property Style : TECInfoWindowStyle
Style de la fenêtre : iwsTransparent, iwsRectangle ou iwsRoundRect (par defaut)

property XCurve : integer;

property YCurve : integer;

Gestion des rayons de courbure du style iwsRoundRect (défaut 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 affiche un triangle pointant sur la position géographique.

La longueur et la position horizontale ou verticale de celui-ci dépendent des propriétes XAnchor et YAnchor qui fixent le décalage en pixels par rapport à la position réelle.

property ArrowLX : integer;

Largeur de la base du triangle du coté gauche

property ArrowRX : integer

Largeur de la base du triangle du coté droit

Fig. 3 InfoWindow

property Draggable : boolean

Permet de déplacer l'élément à la souris ou au doigt (défaut false)

ATTENTION si PeakLink = iwpArrowHead ce sont XAnchor et YAnchor qui sont modifiées et pas la position géographique.

Basculez sur iwpNone pour repositionner géographiquement votre fenêtre.

property Visible : boolean

Affiche / Cache la fenêtre

property CloseButton : boolean

Affiche / Cache le bouton de fermeture

property ContentCenter : boolean

Centrer le texte horizontalement

property Width : integer;

Largeur en pixel
property Height : integer;
Hauteur maximale, si le contenu prend moins de place alors la hauteur est automatiquement ajustée

property Content : string
Texte à afficher

Vous pouvez utiliser un sous ensemble de HTML pour enrichir l'affichage

2

Les balises <img>,<a>, <h>, <tab>, <b>, <i>, <u>, <s>, <font>, <br>,<center> et <PlainText> sont supportées

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

Si vous avez assigné une TImageList à votre carte, vous pouvez utiliser la balise image pour afficher vos icones, il suffit d'indiquer le numéro dans le paramètre src

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

Si vous utilisez la balise center avec du texte vous ne pouvez pas y inclure d'autre balise.

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

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

Vous pouvez ajuster la hauteur du passage à la ligne

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

property OnOpen : TOnInfoWindowOpen;

Cet événement est déclenché juste avant que le fenêtre ne soit visible, vous pouvez changez le contenu ou annuler l'ouverture

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;

Lorsqu'une fenêtre est fermée en cliquant sur sa croix l'évenement OnCloseInfoWindow de TECNativeMap est déclenché et une TECShapeInfoWindow lui est passé en paramètre.

OnCloseInfoWindow ne se déclenche pas si on ferme en utilisant la propriété visible

1

Fermeture automatique

En utilisant une animation de type TECAnimationAutoHide vous pouvez fermer automatiquement la fenêtre après quelques secondes.

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;

Lien

Vous pouvez définir un lien à l'aide de la balise <a>, pour intercepter le click branchez-vous sur l'événement OnBeforeUrl de votre carte, ou sur le OnLink de la fenêtre.


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;

Vous avez la possibilité de définir un lien spécial qui vous permet de vous déplacer sur la carte, il est de la forme #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;

Ouverture automatique par un click sur un élément

En basculant la propriété UseInfoWindowDescription de votre carte à true, le champ Description des éléments s'affichera sous la forme d'une infoWindow lors d'un click sur ceux-ci.

Vous pouvez accéder a l'infoWindow globale au travers de la propriété InfoWindowDescription.

map.UseInfoWindowDescription := true;
map.InfoWindowDescription.minHeight := 300;
...
marker1.Description := '<h1>Marker 1</h1>';
line1.Description := '<h1>Line 1</h1>';
Aller à la page
Réalisé avec la version gratuite pour les particuliers d'Help&Web