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

Vector Tiles

you are here :TECNativeMap

Support for vector tiles geoJSON

MapZen provides free vector tiles from the data of OpenStreetMap

You must obtain a free key and then populate the property VectorMapZenKey of your map.


ATTENTION: MapZen no longer exists, but TECNativeMap still support their formats because their tools are available as Open Source.


// connect your key for use vector tiles
map.VectorMapZenKey := 'vector-tiles-XXXXX';

TECNativeMap add a new Server tsVectorMapZen, the tiles will be in the format geoJSON

In this format the tiles can quickly be very heavy, 300 KB even + 500 KB, especially in the zoom <16

To limit the weight it selects layers based on zoom

Zoom 14 : 'water,roads'
Zoom 15 : 'places,water,roads'
Zoom 16,17 : 'places,water,roads,buildings,pois'
Zoom 18+ : 'landuse,places,water,roads,buildings,pois'

Of course this is not yet final, and you can always make another choice


Display and download of the tiles is not faster than bitmaps tiles, on the contrary, but the big advantage is that you can access a lot more data, some OSM tags are available in addition to the geometric data, for example the population of a city, the number of houses ...

Alternatively, you can use the layer XAPI to display data from OpenStreetMap.


In order to manage these new data Properties and PropertyValue are added to the TECShape

Properties is filled with the field "properties" tiles, in the format "nom:valeur", each pair is separated by a carriage return.

PropertyValue[Name] allows you to access the value of the property Name

You can freely use them to store your own data.


Style sheet

To be able to properly display all its vector data it becomes mandatory to use styles.

TECNativeMap therefore has the property Styles

map.Styles.Rules := all_your_rules;

A rule can decompose in a selector and a list of properties placed between { }

Selector {prop1:value1;prop2:value2}

Style selector

The selector can be the name of a Group, an element type (marker, poi, line or polygone), the name property of the element, a set Property:value

You can also aggregate these different possibilities (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

For the TECShapePOI you can also select depending on the type

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

It is also possible to define rules based on states hovered over by the mouse and selected.

// all the elements hovered by the mouse are green
map.styles.addrule(':hover {color:green}');
// the border of the lines hovered by the mouse is 4 pixels
map.styles.addrule('.line:hover {bsize:4}');
// all shapes selected is red
map.styles.addRule(':selected {color:red}');
// enlarge the selected markers
map.styles.addRule('.marker:selected {scale:1.2}');

You can apply the same properties to several selector separated by commas


Select1 , Select2, Select3 {...}

Use ClearSelector to remove all rules associated with a selector.


Items that have already been modified by a style you remove keep their appearance !


Style property

The properties available are :

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

For the colors you can use the syntax #RRGGBB or $int_value or directly a name (red, black, green etc.)


You can also create a color by specifying two colors and a percentage of mixture

// create a color by mixing
map.styles.addRule('.line {color:gradient(Red,Yellow,0.6)');

Using [text] It displays the item only if PropertyValue['name']<>'' ou PropertyValue['addr_housenumber']<>''


Excerpt from a style sheet

.Polygone {weight:0;zindex:-1;}
.marker {zindex:11}
.marker:hover {scale:1.5}
.kind:rail {bcolor:#0C0D0D;color:white;weight:1;bsize:3;penStyle:dash;}
.kind:river {color:#54b4eA;weight:4;}

Fig. 80 show vector tiles

Conditional property

To apply a rule based on a PropertyValue, use the if property

With the following rules the villages with a population of less than 5,000 inhabitants appear in green, those with a population > 6000 in blue.

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

Fig. 81 green < 5000 - blue > 6000

You can use as a comparator = , !=, >, >=, < et <=

You can test "special" properties

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) to detect if a polygon is a hole in another polygon, TECNativeMap does not support polygons with holes, This test at least to assign a color for holes.

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

Rule based on the Zoom

You can set the zooms for which the rule applies, just add at the end of selector [zoom valeur] or [zoom valeur1,valeur2] , [zoom *] indicates that the rule applies for all 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];}

Multiple values based on the zoom

For the StyleIcon, FontSize, Scale and Weight properties you can set several values that depend on the zoom level

The syntax is 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}

Define a name for a value

You can name your values and use the name instead of the value.

@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;}

You can use styles without using vector tiles, they apply to all your elements


The unit uecOSMStyles_standard declares the constant UEC_OSM_STYLESHEET, these are the styles used in the demo OSMViewer

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

Fig. 82 Demo OSMViewer

clickable items

Each element of the tiles is clickable, you can intercept the click with the same events for your own items (OnShapeClick, ShapeRightClick et OnShapeLongClick).

These events are not restricted to the level of the tiles, they are passed to your map, and you have an OnMapClick after an OnShapeClick !



You can use the same search functions than for your own items.

// find the road located less than 100 meters
map.FindShapeByKMDistance(map.Latitude,map.Longitude, 0.1,liste,[nsLine],FilterRoad);

procedure FilterRoad(const Shape: TECShape; var cancel: boolean);
cancel := pos('road',shape.PropertyValue['kind'])< 1 ;
if not cancel then
cancel := shape.PropertyValue['name']='';

Hide vector tiles

You can not display the vector tiles but continue to use the data (click and search)

// add vector tiles overlay
// hide the tiles but the data is always available
map.DrawVectorTiles := false;


To get an idea of the result you can download a demo for Windows and a for Android (unzip and install the apk)

Fig. 83 Vectors tiles

All the elements are not styled, it is just the minimum for this is readable (I did not say beautiful !)

go to page
© 2016 ESCOT-SEP Christophe - Made width Help&Web - RSS - Google+