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

Styles

  • TECNativeMap
  • Glossaire
Vous êtes ici :TECNativeMap

Feuille de styles

Pour pouvoir afficher simplement toutes vos données, utilisez des styles.

TECNativeMap dispose pour cela de la propriété Styles

map.Styles.LoadFromFile(your_filename);
map.Styles.Rules := all_your_rules;
map.Styles.addRule(your_rule);

Une régle se décompose en un sélecteur et une liste de propriétés placées entre { }

Selecteur {prop1:value1;prop2:value2}

Sélecteur de style

Le sélecteur peut être le nom d'un Groupe, un type d'élement (marker, poi, line or polygone), le nom d'une propriété de l'élément ou un ensemble de Property:value

Vous pouvez associer ces diverses possibilités (groupe+type+property:value)

#Group_Name {} // for all element in the group
.Marker {} // for all TECShapeMarker
#Name_Of_Shape {} // only for this name
.property_name:property_value {} // for all items with this value
#Group_Name.Polygone {} // only for TECShapePolygone in this group
.Line.property_name:property_value {} // only for TECShapeLine with this value

Vous pouvez aussi différencier chaque type de TECShapePOI.

.Poi.Ellipse {}
.Poi.Star {}
.Poi.Rect {}
.Poi.Triangle {}
.Poi.Diamond {}
.Poi.Hexagon {}
.Poi.Text {}

Il est aussi possible de définir des régles si l'élément est survolé par la souris, si vous appuyé dessus, s'il a sélectionné ou s'il a le focus.

// all the elements hovered by the mouse are green
map.styles.addrule(':hover {color:green}');
// style applied if an element of the group is hovered by the mouse
map.Styles.addRule('#group_name:hover {color:white}');
// style applied if an element of the group is pressed
map.Styles.addRule('#group_name:pressed {color:red}');
// the border of the lines hovered by the mouse is 4 pixels
map.styles.addrule('.line:hover {bsize:4}');
// all shapes selected or focused is red
map.styles.addRule(':selected, :focused {color:red}');
// enlarge the selected markers
map.styles.addRule('.marker:selected {scale:1.2}');
map.styles.addRule('.marker:pressed {scale:2}');

Vous pouvez appliquer les mêmes propriétés à plusieurs sélecteurs en les séparant par une virgule

1

Select1 , Select2, Select3 {...}

Utilisez ClearSelector pour supprimer l'ensemble des régles associées à un sélecteur.

map.styles.clearSelector('#G.line');

Les éléments déjà modifiés par un style que vous supprimez gardent leur apparence !

1

Propriété de style

Vous pouvez utiliser les propriétés :

bcolor (BorderColor)
bsize
BrushStyle (vcl Clear|Cross|DiagCross|BDiagonal|Horizontal|FDiagonal|Vertical|Solid) ( fmx Graphic )
Color
FontItalic (true|false)
FontBold (true|false)
Fontsize
FontFamily
FontColor
fcolor (fill color)
fopacity (0-100)
graphic (url|base64,data_png_in_base64, index ImageList)
hbcolor (hover border color)
hcolor (hover color)
height
level
opacity (0-100)
penStyle (solid|dash|dot|dashdot)
unit (pixel|meter)
visible (true|false|[text])
weight
width
zindex
StyleIcon (3D,Flat,FlatNoBorder,Svg,OwnerDraw) (TECShapeMarker)
Scale (double) (TECShapeMarker & TECShapePoi);


Vous pouvez définir les couleurs avec la syntaxe #RRGGBB ou $int_value ou leur nom (red, black, green etc.)

1

Vous pouvez aussi composer une couleur a partir de deux et d'un pourcentage de mélange, ou assombrir / éclairicir avec dark(color) et light(color)

2
// create a color by mixing
map.styles.addRule('.line {color:gradient(Red,Yellow,0.6)');
// dark with a force index of 128 (max 255)
map.styles.addRule('.line {color:dark(Red,128)');
// light default (force index = 32 )
map.styles.addRule('.line {color:light(Red)');

Exemple d'une feuille de styles

.Polygone {weight:0;zindex:-1;}
.marker {zindex:11}
.marker:hover {scale:1.5}
.marker.kind:embassy{visible:true;graphic:base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAARCAYAAADtyJ2fAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAAB+SURBVDhPYxgY4Ln8yn8oEwNM23vuP0heac4NMA3iQ6WAYNItMAcmsfvcETBtt+Tqf7AcOoYDGAddAS4MBzAOugJcGA5gHHQFuDAcwDjoCnBhOIBx0BXgwnAA46ArAGJQyCKHNGrUgRQBAUwCe5xhA1CNpIOhoxE1pGgKGBgAbpXuX0CxebIAAAAASUVORK5CYII='}
.kind:rail {bcolor:#0C0D0D;color:white;weight:1;bsize:3;penStyle:dash;}
.kind:river {color:#54b4eA;weight:4;}

Fig. 1 show vector tiles

Définir un style à l'aide des propriétés

Vous pouvez librement attribuer des propriétés à vos élements, elles sont de la forme "name":"value"

var M:TECShapeMarker;
...
M := Map.addMarker(map.latitude,map.Longitude);
M.PropertyValue['my_tag']:='value_tag';
// you can also use
M['my_tag']:='value_tag';
// groups can also have them
map.shapes['tag']:='value';
map['group']['tag']:='value';

// appliquée à tous les éléments ayant une propriété "name"="value"

.name:value {color:red};

// uniquement aux markers ayant une propriété "name"="value"

.marker.name:value {color:blue};

// pour tous les éléments ayant une propriété "name" quelque soit sa valeur (sauf vide)

.name:* {color:indigo};

Propriété conditionnelle

Vous pouvez appliquer une régle en fonction de la valeur d'une propriété, pour cela utilisez la syntaxe if:property

Avec les régles suivantes, les villages avec une population de moins de 5000 habitants apparaissent en vert, ceux avec une population supérieure à 6000 en bleu.

.kind:village {if:population<5000;fontsize:12;color:green;}
.kind:village {if:population>6000;fontsize:12;color:blue}

Fig. 2 green < 5000 - blue > 6000

Les comparateurs = , !=, > et < sont disponibles.

Vous pouvez aussi tester des propriétés "spéciales"

RTL ( vcl ou fmx)


.Polygone {if:rtl=fmx;hcolor:green}

OS ( windows, mac ,android ou ios)


.marker:hover {if:os=windows;color:red}

HOLE (true ou false) permet de détecter si un polygone est un trou dans un autre polygone, TECNativeMap ne prend pas en charge les polygones à trous, ce test permet au minimum d'attribuer une couleur pour les trous.


.polygone.kind:building {if:hole=true;fcolor:silver;fopacity:100;zindex:0;}

Régle en fonction du Zoom

Vous pouvez définir le ou les zooms pour lesquels la règle s'applique, il suffit d'ajouter en fin de sélecteur [zoom valeur] ou [zoom valeur1,valeur2] , [zoom *] indique que la régle s'applique pour tous les zooms

.Poi.Text [zoom *]{if:kind=building;visible:false;}
.Poi.Text [zoom 18,19,20,21,22]{if:kind=building;visible:[text];}
.Poi.Text [zoom *]{if:kind=chapel;visible:false;}
.Poi.Text [zoom 19,20,21,22]{if:kind=chapel;visible:[text];}

Multiples valeurs en fonction du zoom

Pour les propriétés StyleIcon, FontSize, Scale et Weight vous pouvez définir plusieurs valeurs qui dépendent du niveau de zoom

La syntaxe est du type zoom_mini-zoom_max=value,zoom2=value

// fontsize = 6pt in zoom 17 , 8pt in zoom 18 , 10pt in zoom 19 & 20
#.poi {fontsize:17=6,18=8,19-20=10;}
// flat marker for zoom 0 to 17, siDirection for zoom 18 to 20
.marker {styleicon:0-17=flat,18-20=direction}

Définir un nom pour une valeur

Vous pouver nommer vos valeurs et utiliser le nom à la place de la valeur.

@dark {#404040}
@scale-suburb-village {0-11=0,12=1.2,13=1.5,14=1.6,15-16=1.9,17-20=2.5}

.poi {if:place=suburb;fontsize:12; scale:@scale-suburb-village;color:@dark;width:0;yanchor:0;}

L'unité uecOSMStyles_standard déclare la constante UEC_OSM_STYLESHEET, ce sont les styles utilisés dans la demo OSMViewer

// see uecOSMStyles_standard
map.styles.Rules := UEC_OSM_STYLESHEET;

Fig. 3 Demo OSMViewer

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