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

Layers

  • Overlays
  • Glossary
you are here :TECMap > Overlays

TECNativeLayer is the base class of the layers that allow you to react to the displayed area, and mouse actions.

TECNativeLayer = class
private
FObserver : TNativeMapObserver;
FShapes : TECShapes;
FMap : TNativeMapControl;

FOnShapeRightClick,
FOnShapeClick : TOnShapeMouseEvent;

FOnMouseClick,
FOnMouseMove : TNotifyEvent;

function getMinZoom : byte;
function getMaxZoom : byte;

procedure setMinZoom(value:byte);
procedure setMaxZoom(value:byte);

function getVisible : boolean;

protected

procedure doOnMapEndMove(sender : TObject); virtual;
procedure doOnShapeClick(sender : TObject); virtual;
procedure doOnShapeRightClick(sender : TObject); virtual;
procedure doOnMapMouseMove(sender : TObject); virtual;
procedure doOnMapMouseClick(sender : TObject); virtual;
procedure doOnMapHiResChange(sender : TObject); virtual;


public


procedure setVisible(const value:boolean); virtual;



constructor Create(_FMap:TnativeMapControl;const Name:string); virtual;
destructor Destroy; override;

property OnShapeClick : TOnShapeMouseEvent read FOnShapeClick write FOnShapeClick;
property OnShapeRightClick : TOnShapeMouseEvent read FOnShaperightClick write FOnShapeRightClick;

property OnMouseMove : TNotifyEvent read FOnMouseMove write FOnMouseMove;
property OnMouseClick : TNotifyEvent read FOnMouseClick write FOnMouseClick;


property Map : TNativeMapControl read FMap;
property Shapes : TECShapes read FShapes;
property Visible : boolean read getVisible write setVisible;

property MaxZoom : byte read getMaxZoom write setMaxZoom;
property MinZoom : byte read getMinZoom write setMinZoom;

end;



You can either plug into OnMapHiResChange or overload the doOnMapHiResChange(sender: TObject) procedure so that your layer adapts to change resolution

39

Panoramio

Google closed Panoramio November 4, 2016, the service is no longer functional

39

A Panoramio layer is integrated into TECNativeMap through the property PanoramioLayer

// show panoramio layer
map.PanoramioLayer := true;




The event OnPanoramioClick(sender: TObject; const Item: TECShape; const ownerId, ownerName, PhotoId, PhotoDate, PhotoTitle, PhotoUrl, copyright: string) is raised when clicking a Panoramio item.

Fig. 148 Click sur un élément Panoramio

TECNativePlaceLayer


Allows you to automatically display the result of a search

To use this layer you must embed unit uecNativePlaceLayer or FMX.uecNativePlaceLayer depending on whether you use the VCL version or FireMonkey

106

Example: a layer that displays restaurants

// search Layer

FPlacesLayer := TECNativePlaceLayer.create(map,'PLACES_LAYER');
FPlacesLayer.OnPLaceClick := doOnPlaceClick;

FPlacesLayer.Visible := true;
FPlacesLayer.Search := 'node[amenity=restaurant]';
// standard image 32x32
FPlacesLayer.MarkerFilename := 'http://www.helpandweb.com/cake_32.png';
// lat,lng on center of image
FPlacesLayer.XAnchor := 16;
FPlacesLayer.YAnchor := 16;
// hi-res image 64*64
FPlacesLayer.MarkerHiResFilename := 'http://www.helpandweb.com/cake_64.png';
// lat,lng on center of image
FPlacesLayer.HiResXAnchor := 32;
FPlacesLayer.HiResYAnchor := 32;
...

// event click on place shape
procedure TForm1.doOnPlaceClick(sender : TECShape);
var
pResult : TECPlaceResult;
r,
n,
Content : string;
i : integer;
begin

// here Sender and Sender.Item are allway assigned, and Sender.Item is TECPlaceResult

pResult :=TECPlaceResult(Sender.item)


for i:=0 to pResult.CountResult-1 do
begin

n := pResult.NameResult[i];
r := pResult.Result[n];
if length(n)< 9 then
n := n+'<tab="65">';

content := content+'<b>'+n+'</b>: '+r+'<br>';

end;


if FPlacesLayer.Shapes.InfoWindows.Count=0 then
begin
FPlacesLayer.Shapes.InfoWindows.add(0,0,'');
FPlacesLayer.Shapes.InfoWindows[0].zindex := 100;
end;

FPlacesLayer.Shapes.InfoWindows[0].content := Content;
FPlacesLayer.Shapes.InfoWindows[0].SetPosition(Shape.Latitude,shape.Longitude);
FPlacesLayer.Shapes.InfoWindows[0].Visible := true;


end;


end;

Fig. 149 Click on an element TECNativePlaceLayer

By default the elements of layer are TECShapeMarker but you can change the type of TECShape by redefining TECNativePlaceLayer.doCreateShape(SearchResult : TECPlaceResult):TECShape;

XapiLayer

XapiLayer uses TECNativePlaceLayer and is directly integrated with TECNativeMap.

The search is performed in the area displayed by your map, it is updated on each move

property Shapes:TECShapes

The group that contains the items, it's name is 'XAPI'

property Search : string


Research is done by doing a query on a server XAPI

You can find all the tags OSM using a syntax like 'node[key=value]'

// search bus stop
map.XapiLayer.Search := 'node[highway=bus_stop]';

For nodes you can use simplified syntax.

// search bus stop
map.XapiLayer.Search := 'highway=bus_stop';

For the key amenity you can simplify even more.

// search all restaurant, bar and café
map.XapiLayer.Search := 'restaurant|bar|cafe';

property Visible : boolean


show / hide layer

property MaxItem : integer


Maximum number of items

property OnClick : TOnShape

This event is raised when an item is clicked

property OnChange : TNotifyEvent

Raised after each request
map.XapiLayer.OnClick := doOnXapiClick;
map.XapiLayer.OnChange := doOnXapiChange;
...
procedure TForm1.doOnXapiChange(sender : TObject);
begin
//
end;

// event click on xapi shape
procedure TForm1.doOnXapiClick(sender : TECshape);
begin
//
end;

Use the styles to decorate your items

Selector := '#'+map.XapiLayer.Shapes.Name+ '.marker.amenity';

map.styles.addRule(Selector+':restaurant' +
'{graphic:base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAaBAMAAABI' +
'sxEJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABJQTFRFAAAA////AAAAAAA'
+ 'AAAAAAAAA/h6U3wAAAAV0Uk5TAAAQgL++EJOXAAAAOElEQVQY02MIFQ0MFWRUCXVigLBcQ0OgrNDQUH'
+ 'JYQIDOMg0NDYawBIFC2FgCSCxBerFMg0Es02AAP34wMx8/aIAAAAAASUVORK5CYII=;visible:true;');

map.styles.addRule(Selector+':bar' +
'{graphic:base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAzklEQVRIx+2WUQ3'
+ 'FIAxFK2ES8HANVMIkIGUOkICESUDCJCABCdtPSQgJC2UjeXlZk3402e1ZoRSIGgZgA3AqfSOtAYgDoK'
+ 'iFmCxWaDLMaEAsoqDQBNGsGlDeHyexnbJPAHwpKuIe9zSwDFzFPR6egM4P9HMgX3YQgDSr67gQrsq51'
+ 'z8ZqqqSwHrOkhsZqguAo0iyS5weL1kD5qZUcjPNfXV1HPIThmaY9vr4QH8KknbPXbfMgtiqvSMA+1Zy'
+ 'lrNy9/SK8g0PVamc2NlTK98F1MyKB+QkmGEAAAAASUVORK5CYII=;visible:true;}');

map.styles.addRule(Selector+':cafe' +
'{graphic:base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOA'
+ 'AAAuUlEQVRIx2NgIACMjY0F0PgN+OTJBkCD9iMbCsT/cclTYkkCzGCoJfuB+D02eUosKQAZAjIM5nKQ'
+ 'JUBsgE2eEotQDIHyHXDJU2JRPyn8wQmgcfCfTPye1HghGw8/i4D4PBrbgVYWYcMGtLAoAakUmQ8VW0/'
+ 'TOALyFXDGHZUtEqCXRbCy8DzNLAKlNqTMn0ATi0AVI5LYflol7/1I7Pk4a18q5Zv3BKsPKpUMCvQogh'
+ 'RGS2+aW0SzGhYAB5lDXBZ7NtoAAAAASUVORK5CYII=;visible:true;}');

map.styles.addRule('#'+map.XapiLayer.Shapes.Name+ '.marker.highway:bus_stop {color:blue;styleicon:Flat;visible:true;}');
map.styles.addRule('#'+map.XapiLayer.Shapes.Name+ '.marker {scale:1;}');
map.styles.addRule('#'+map.XapiLayer.Shapes.Name+ '.marker:hover {scale:1.5;}');

Fig. 150 'restaurant|bar|cafe'

Fig. 151 'highway=bus_stop'

Way

With way[key = value] you can retrieve paths.

// find roads
map.XapiLayer.Search := 'way[highway=motorway|primary|secondary|tertiary|residential]';
// styles routes
map.styles.addRule('#' + map.XapiLayer.Shapes.Name +
'.line.highway:primary {zindex:9;weight:4;color:gradient(Red,Yellow,0.3);visible:true;}');
map.styles.addRule('#' + map.XapiLayer.Shapes.Name +
'.line.highway:secondary {zindex:8;weight:3;color:gradient(Red,Yellow,0.4);visible:true;}');

Fig. 152 Xapi Way

You can also find the junctions between routes.

map.XapiLayer.Junction := true;
map.XapiLayer.Search := 'way[highway=unclassified|road|motorway|trunk|primary|secondary|tertiary|residential]';

Fig. 153 Xapi Roads & Junction

Manual search

When layer is visible the search is synchronized with the visible area of your map.

To perform a search on any area you need to hide layer and use Bound to delimit the search box.

// sample, copie data in another group

map.XapiLayer.OnChange := XapiChange;
map.XapiLayer.visible := false;
map.XapiLayer.search := 'highway=bus_stop';
// ! call bound after set search !
map.XapiLayer.bound(43,0.7,44,0.8);
...
TForm.XapiChange(sender : TObject);
begin
// here xapilayer contain openstreetmap data
// copie in another group
map.group[copy_xapi'].ToTxt := map.XapiLayer.shapes.ToTxt;
end;

TECNativeUTFLayer

This layer gives you support for the format UTFGrid

Example: Delphi translation of Visible Map

// support UTFGrid Layer see http://www.mapbox.com/developers/utfgrid/

FUTFLayer := TECNativeUTFLayer.create(map,'mapbox.geography',GetUTFTile);

FUTFLayer.OnMouseOver := doOnOverUTFData;
FUTFLayer.OnMouseOut := doOnOutUTFData;


FUTFLayer.Shapes.InfoWindows.add(0,0,'');
FUTFLayer.Shapes.InfoWindows[0].zindex := 100;
FUTFLayer.Shapes.InfoWindows[0].color := claBeige;
FUTFLayer.Shapes.InfoWindows[0].Width := 110;
FUTFLayer.Shapes.InfoWindows[0].ContentCenter := true;

FUTFLayer.Visible := true;

...

// connexion utf geography tiles

// http://a.tiles.mapbox.com/v3/mapbox.geography-class/4/7/7.grid.json for see data tile

procedure TForm1.GetUTFTile(var TileFilename:string;const x,y,z:integer);
begin
TileFilename := format('http://%s.tiles.mapbox.com/v3/mapbox.geography-class/%d/%d/%d.grid.json',
[Char(Ord('a') + random(3)),z,x,y]);
end;


// OnOver country

// FUTFLayer.Data['admin'] country name
// FUTFLayer.Data['flag_png'] country flag png base64 encoded

procedure TForm1.doOnOverUTFData(sender : TObject);
begin

FUTFLayer.Shapes.InfoWindows[0].Content :='<img src="data:image/png;base64,'+FUTFLayer.data[ 'flag_png']+'" width="80" height="40">'+
'<h3>'+FUTFLayer.data['admin']+'</h3>';

FUTFLayer.Shapes.InfoWindows[0].SetPosition(map.MouseLatLng.Lat,map.MouseLatLng.Lng);
FUTFLayer.Shapes.InfoWindows[0].Visible := true;

end;


procedure TForm1.doOnOutUTFData(sender : TObject);
begin
FUTFLayer.Shapes.InfoWindows[0].Visible := false;
end;


Fig. 154 UTFGrid geography-class

TECNativeLabelLayer

This layer displays an infoWindow above the TECShape, It is updated and moved automatically depending on the Hint and the position of the TECShape

Fig. 155 Using labels to display positions

To use this layer you must embed the unit uecNativeLabelLayer or FMX.uecNativeLabelLayer Depending on whether you use the version VCL or FireMonkey

107

LLayer : TECNativeLabelLayer;

LLayer := TECNativeLabelLayer.Create(Map,'my layer');

LLayer.visible := true;

// add shapes to layer
LLayer.add(map.Shapes.Markers[0]);
LLayer.add(map.Shapes.Pois[0]);

See sources of demos Firemonkey and DemoNativeRoute for an example of using

Mappilary

Mappilary is a service of the same type as Google Street Map, it will display photos at street level, the advantage is that you can enrich it by registering your routes.

TECNativeMap just use the information in public access, you must obtain a key to use the service of Mappilary.

To do this go to the www.mapillary.com website, log in, in the Integrations section add your applications, you will then get a Client ID, this is your key.

To use mappilary you must incorporate the unit uecMappilary or FMX.uecMappilary depending on whether you use the VCL or FireMonkey version

108

Use TECMappilaryLayer to embed a layer Mappilary.

FMappilaryLayer := TECMappilaryLayer.Create(map);
FMappilaryLayer.ClientId := 'HERE-YOUR-CLIENT-ID';

FMappilaryLayer.Visible := true;

Fig. 156 Demo Mappilary

TECMappilaryLayer



procedure CancelSearchSequence;
Cancels a search for sequences.
procedure CancelSearchImageClose;
Cancels a search for images
procedure SearchImageClose(const Lat, Lng: double; Distance: integer);

Initiates a search of images at a maximum Distance, in metres, of the point Lat,Lng

You can connect to the OnImages event to be notified of a response.

The Images property contains the list of images.

function FindImageClose(const Lat, Lng: double; Distance: integer; var seq : TMappilarySequence; var PhotoIndex : integer ) : integer;

Find the nearest photo amongst those displayed in the layer, the research is local.

Lat, Lng indicates the starting point of the research

Distance indicates the maximum distance in metres from the search point

Seq will contain the found sequence or nil

PhotoIndex will contain the index of the photo in seq or - 1

Returns the distance in metres between the point of research and the photo, 0 if no photo

function LoadImage(const Key: string): TBitmap; overload;

Gets a bitmap that contains the image we had the key.

Caution you must not release the resulting bitmap, to keep it you must make a copy !

35
function LoadImage(const Key: string; Bitmap:TBitmap):boolean;

Load a bitmap with the image .

Please note you are responsible for the creation and release of the bitmap !

36
var bmp:TBitmap;
...
bmp := TBitmap.create;
if LoadImage(key,bmp) then
begin
// image ok
end;
...
bmp.free;
procedure LoadImage(const Key: string; OnBitmap: TOnGetMappyImage); overload;

Gets a bitmap containing the image associated with the key, This function is not blocking, OnBitmap est appelé lorsque l'image est chargée.

layer.onImages := doOnImage;
...
procedure TForm2.doOnImage(sender:TMappilaryImageList);
begin
// you can test sender.More to see if there are other images waiting
end;
function LoadImage(img:TMappilaryImage):boolean; overload;

Gets the information of an image

// get data image
img := TMappilaryImage.create;
try
// ! mandatory set key !
img.Key := PhotoKey;

if FECMappilaryLayer.LoadImage(img) then
begin
user.Text := img.User;
date.Text := DateTimeToStr(img.CapturedDateTime);
location.Text := img.Location;
// img.ca = angle of image
// img.lat = latitude
// img.lng = longitude
end;

finally
img.Free;
end;
function UrlImage(const key:string):string;
Gets the url of image associated with the key.
function LocalPathImage(const Key:string):string;
Gets the path to an image in the local cache

property CanceledSearchSequence : boolean ;
Lets you know if a search of sequences has been cancelled.
property CanceledSearchImageClose : boolean ;
Lets you know if a search has been cancelled.
property ClientId: string ;
Mandatory key to use the services of Mappilary
property Connexion : TMappilaryConnexion ;
Type of connection

mcOnlyMappilaryServer : only by internet
mcOnlyLocal : only in local
mcLocalOrServer : local and if need internet (default value)
property LocalCache: string ;
The local cache directory
property Thumb: TMappilaryThumbSize ;

Size of images ( Thumb320, Thumb640, Thumb1024, Thumb2048 )

by default Thumb320

property Sequences: TMappilarySequenceList ;

List of sequences found in the visible area of the map

The property is updated automatically to each movement of the map

property Images : TMappilaryImageList;
List of images obtained with a call to SearchImageClose
property MaxDayInCache : integer;
Lifetime of the data stored in the local cache, by default 30 days

property OnClick: TOnMAppilaryClick ;

Raised when click on an element mappilary

property OnSequenceColor:TOnMappilaySequenceColor;

To assign a color to a sequence.

By default a single color is assigned based on the key of the sequence, a sequence will have therefore always the same color.

109
Layer.OnSequenceColor := doSequenceColor;

procedure TForm2.doSequenceColor(Layer : TECMappilaryLayer;
MappilarySequence: TMappilarySequence;
var SequenceColor:TColor);
begin
SequenceColor := your_color;
end;
property OnSequences: TOnMappilartySequences ;

Raised when the sequences are found.

The research of sequence is triggered when moving the map

110
procedure TForm2.doOnSequences(sender:TMappilarySequenceList);
var i,n:integer;
begin

n := sender.Count;
TotalSequences.Text := inttostr(n)+' sequences';


sequences.Items.BeginUpdate;
sequences.Items.Clear;

for i := 0 to n-1 do
begin
sequences.Items.Add(sender.Sequences[i].Key) ;
end;

sequences.Items.EndUpdate;

// test sender.More to see if there are other sequences in the area

end;
property OnImages : TOnMappilartyImages;

Raised when the images are received after a call to SearchImagesClose

TMappilaryAPI

Internally, TMappilaryLayer uses the TMappilaryAPI class, you can use it directly if you do not want to display layer.

The operation is the same, it is necessary to indicate the search area with the function box Bound(NELat, NELng, SWLat, SWLng: double) then call SearchSequence to start the search.

Fig. 157 Demo Firemonkey MappilarySearchImages

Heatmap

A heat map is used to represent the intensity of data for geographic points.

Fig. 158 Heatmap layer

TECHeatmapLayer is the class that allows to manage this type of layer.

constructor Create(_FMap: TECNativeMap);
// create heatmap layer
HeatmapLayer := TECHeatmapLayer.Create(map);

procedure Clear;

Erase all of the data



procedure Add(const Latitude, Longitude: double; const value: double = 1);

Add a geographical point and assign it a value, you can make several additions to the same point.



procedure Remove(const latitude, longitude: double; const Value: double);

Delete the Value element if it exists at these coordinates
procedure Update;
After adding the points, call Update to refresh the layer


property AutomaticUpdate: boolean
By default false, switch to true if you want the HeatMap to be automatically updated each time you change it.
property Palette: THeatPalette

Palette allows you to manage the colors that are used to create the gradient


HeatmapLayer.Palette.Clear;

// addColor(Red,Green,Blue,Value)
// Red,Green, and Blue byte 0..255
// value double 0..1

// this is the default palette, you can also use Palette.reset for recreate it

HeatmapLayer.Palette.AddColor(0,0,0,0); // black for value=0
HeatmapLayer.Palette.AddColor(0,0,255,0.1);// blue for value=0.1
HeatmapLayer.Palette.AddColor(0,255,255,0.25); // cyan for value=0.25
HeatmapLayer.Palette.AddColor(0,255,0,0.5); // green for value=0.5
HeatmapLayer.Palette.AddColor(255,255,0,0.75); // yellow for value=0.75
HeatmapLayer.Palette.AddColor(255,0,0,1); // red for value=1

property Visible: boolean ;

property PointIsDisc : boolean;

Determines if the point is displayed in the form of a disc, otherwise it's a square

Fig. 159 Style of the point


Property Radius:integer;

The point size

property Opacity : byte;

Change the opacity of the layer (0 to 100)

property MinZoom: byte ;

Minimum zoom layer to display



property MaxZoom: byte ;

Maximum zoom layer to display



property GroupZIndex: integer ;

ZIndex of the group containing all of the heatmaps, is displayed in ascending order of the ZIndex



property ZIndex: integer ;

ZIndex of the layer compared to the other heatmap

property OnUpdate: TNotifyEvent;

Event fired when the heat map was generated


Weather Layer

By using the services of OpenWeathermap.org you will be able to see overlay layers owPrecipitation, owSnow, owClouds, owPressure, owTemp, owWind

map.OpenWeatherTilesLayer.Key := 'your api key';
// see pressure
map.OpenWeatherTilesLayer.Add(owPressure) ;
// see precipitation
map.OpenWeatherTilesLayer.Add(owPrecipitation) ;
// remove pressure
map.OpenWeatherTilesLayer.remove(owPressure) ;
go to page
© 2016 ESCOT-SEP Christophe - Made width Help&Web - RSS - Google+