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

Components

  • Glossary
you are here :TECNativeMap

The TECNativeMap.Components property lets you anchor Delphi TControl components directly to the map.


TECMapComponents

function Add(const AName : string; const AComponent : TControl;const AAlign : TECComponentAlign):TECComponent;

The name has to be unique!

1
// add a checkbox at bottom left
map.components.Add('CheckBoxAlign',CheckBox2,ecLeftBottom);

Fig. 1 Add CheckBox

In practice, under the VCL it's better to use a TPanel and place your components on it, as here the checkBox background is not modified when the board moves.

1

function Add(const AMargin : integer; const AAlign : TECComponentAlign):TECComponent;

Insert a space of AMargin pixels

function IndexOf(const AName : string): integer;

procedure Remove(const AName : string);

procedure Remove(const AIndex : integer);

procedure Remove(const AComponent : TECComponent);

procedure Move(const CurIndex,NewIndex : integer);

Changes the order of the component in its list. Components are aligned according to their place in the list..

procedure Clear

function Count : integer;

property Component[index:integer] : TECComponent default;

As this is the default property you can simply use map.Components[index]

TECComponent

TControl encapsulation anchored on the card

procedure Remove
procedure Move(const NewIndex:integer)
property Name : string
property Component : TControl
property Align : TECComponentAlign
property Width : integer
property Height : integer
property Top : integer
property Left : integer

Top and Left are only used if alignment is ecNone

1
property Visible : boolean
property Opacity : single

Opacity varies from 0 to 1 (0.5 = 50%) and is only available in Firemonkey.

2

TECComponentAlign

Components can be aligned on all four board edges


ecTopRight , ecTopLeft stacks components vertically upwards to the left and right

ecBottomRight, ecBottomLeft stack components vertically downwards to the left and right

ecRightTop , ecLeftTop stack components horizontally upwards to the left and right

ecRightBottom, ecLeftBottom stack components horizontally downwards to right and left

Creating a zoom bar

The uecNativeMapControl unit declares the TECCustomTool class, which will serve as the ancestor for your components.

TECCustomTool

procedure Add(const Name : String; const AComponent : TControl; const AAlign : TECComponentAlign);

Anchor the support component to the map

property Align : TECComponentAlign

property Component : TECComponent

property Map : TNativeMapControl

property Layout : TECCustomToolLayout

Vertical or horizontal layout (ctlVertical, ctlHorizontal)

property Width : integer

property Height : integer

property Opacity : single

Opacity from 0 to 1 (Firemonkey only)

property Visible: boolean

ZoomBar component

The unit uecZoomBarComponent (FMX.uecZoomBarComponent) shows you how to create a component made up of several Delphi controls, and the BarZoom demo demonstrates its use.

Fig. 2 Zoom Bar Component

unit uecZoomBarComponent;

interface
uses
Windows, messages,forms,sysutils,Classes, Graphics, Controls, StdCtrls, ExtCtrls,
uecNativeMapControl,uecMapUtil;

type

TZoomBarComponent = class(TECCustomTool)
private

tmZoom : TTimer;

FPanelBar : TPanel;
FNextZoom ,
FPrevZoom : Tbutton;

FButtonSize : integer;
FVerticalBar: boolean;

FInProgressiveZoom,
FProgressiveZoom : boolean;

procedure setProgressiveZoom(const value:boolean);

procedure setButtonSize(const value:integer);

procedure doNextZoom(Sender:TObject);
procedure doPrevZoom(Sender:TObject);

procedure doNextMouseDown(Sender: TObject; Button: TMouseButton;Shift: TShiftState; X, Y: integer);
procedure doNextMouseUp(Sender: TObject; Button: TMouseButton;Shift: TShiftState; X, Y: integer);

procedure tmZoomTimer(Sender: TObject);

procedure ChangeZoom;

protected
procedure setLayout(const value:TECCustomToolLayout); override;

public
constructor Create(Map : TNativeMapControl); override;
destructor Destroy; override;


property ButtonSize : integer read FButtonSize write setButtonSize;

property ProgressiveZoom : boolean read FProgressiveZoom write setProgressiveZoom;

end;

implementation

constructor TZoomBarComponent.Create(Map : TNativeMapControl);
begin

inherited;


// create zoom bar

// FPanelBar will be the support that determines the total occupancy of our component
// It will be connected to TECNativeMap

FPanelBar := TPanel.Create(nil);
FPanelBar.BevelOuter := bvNone;
FPanelBar.ParentBackground := false;
FPanelBar.Color := clBtnFace;
FPanelBar.showHint := true;


// place buttons on the panel

FNextZoom := TButton.Create(FPanelBar);
FNextZoom.Parent := FPanelBar;
FNextZoom.Caption:= '+';
FNextZoom.Hint := doubleToStrDigit(map.NumericalZoom,1);
FNextZoom.font.size := 11;
FNextZoom.onClick := doNextZoom;

FPrevZoom := TButton.Create(FPanelBar);
FPrevZoom.Parent := FPanelBar;
FPrevZoom.Caption:= '-';
FPrevZoom.Hint := doubleToStrDigit(map.NumericalZoom,1);
FPrevZoom.font.size := 11;
FPrevZoom.onClick:= doPrevZoom;


// Anchoring the panel on the map

add('ZoomBar',FPanelBar,ecTopRight);

ButtonSize := 32;

// A timer is used to manage the progressive zoom
// triggered when a zoom button is pressed.

tmZoom := TTimer.Create(nil);
tmZoom.Enabled := false;
tmZoom.Interval := 80;
tmZoom.OnTimer := tmZoomTimer;

ProgressiveZoom := true;

end;

procedure TZoomBarComponent.setProgressiveZoom(const value:boolean);
begin

FProgressiveZoom := value;

if value then
begin
FNextZoom.OnMouseDown := doNextMouseDown;
FNextZoom.OnMouseUp := doNextMouseUp;
FPrevZoom.OnMouseDown := doNextMouseDown;
FPrevZoom.OnMouseUp := doNextMouseUp;
end
else
begin
FNextZoom.OnMouseDown := nil;
FNextZoom.OnMouseUp := nil;
FPrevZoom.OnMouseDown := nil;
FPrevZoom.OnMouseUp := nil;
end;
end;

procedure TZoomBarComponent.setButtonSize(const value:integer);
begin
FButtonSize := value;

FNextZoom.width := FButtonSize;
FNextZoom.Height := FButtonSize;

FPrevZoom.width := FButtonSize;
FPrevZoom.Height := FButtonSize;

// recalculate button layout
Layout:=Layout;

end;

procedure TZoomBarComponent.setLayout(const value:TECCustomToolLayout);
begin
inherited;

FNextZoom.Top := 0;
FNextZoom.Left := 0;

if (Layout=ctlVertical) then
begin
Width := FButtonSize;
Height := 2*FButtonSize-1;
FPrevZoom.Top := FButtonSize-1;
FPrevZoom.Left := 0;
end
else
begin
Width := 2*FButtonSize-1;
Height:= FButtonSize;
FPrevZoom.Top := 0;
FPrevZoom.Left := FButtonSize-1;
end;

end;


procedure TZoomBarComponent.ChangeZoom;
begin
FNextZoom.Hint := doubleToStrDigit(map.NumericalZoom,1);
FPrevZoom.Hint := doubleToStrDigit(map.NumericalZoom,1);
end;


procedure TZoomBarComponent.doNextZoom(Sender:TObject);
begin
if not FInProgressiveZoom then
begin
Map.Zoom := Map.Zoom + 1;
ChangeZoom;
end;

FInProgressiveZoom := false;
end;

procedure TZoomBarComponent.doPrevZoom(Sender:TObject);
begin
if not FInProgressiveZoom then
begin
Map.Zoom := Map.Zoom - 1;
ChangeZoom;
end;

FInProgressiveZoom := false;
end;

// activate the timer when the button is pressed
// a progressive zoom will then be automatically performed
procedure TZoomBarComponent.doNextMouseDown(Sender: TObject; Button: TMouseButton;
Shift: TShiftState; X, Y: integer);
begin
// save the button pressed to react on it.
tmZoom.Tag := integer(Sender);
tmZoom.Enabled := true;
end;
// cancel progressive zoom
procedure TZoomBarComponent.doNextMouseUp(Sender: TObject; Button: TMouseButton;
Shift: TShiftState; X, Y: integer);
begin
tmZoom.Enabled := false;
ChangeZoom;
end;
// Progressive zoom in or out
// Allows to go beyond the maximum zoom managed by the tile server
procedure TZoomBarComponent.tmZoomTimer(Sender: TObject);
begin
FInProgressiveZoom := true;

if (TButton(tmZoom.Tag) = FNextZoom) then
begin
map.ZoomScaleFactor := map.ZoomScaleFactor + 10
end
else
map.ZoomScaleFactor := map.ZoomScaleFactor - 10;

end;

Component Legend

The uecLegendPanel unit (FMX.uecLegendPanel) manages a legend for your map..

Fig. 3 Demo Legend Component

TLegendComponent = class(TECCustomTool)
public
property Legend : TPanelLegend ;
end;

TPanelLegend

function Add(const ACaption:string;const AColor:TColor;const AStyle:TVisualStyle=vsFrame;const AObject:TObject=nil):TItemLegend;

function Add(const ACaption:string;const AGraphic:TGraphic;const AObject:TObject=nil):TItemLegend;


procedure Delete(index:integer);

property Count : integer

property Items[Index:integer] : TItemLegend

property VisualAlignment : TVisualAlignment
property VisualWidth : integer
property VisualWeight : integer
property ItemAlignment : TAlignment
property ItemHeight : integer
property ItemFontSize : integer
property TitleFontSize : integer
property FooterFontSize: integer
property FontName : string
property FontColor: TColor
property Title : string
property TitleAlignment : TAlignment
property Footer : string
property FooterAlignment : TAlignment
property OnItemClick : TNotifyEvent

TItemLegend

property ItemColor : TColor
property ItemBorderColor : TColor
property ItemCaption : String
property ItemGraphic : TGraphic
property ItemVisualStyle : TVisualStyle
property ItemVisualWidth : integer
property ItemVisualWeight: integer
property ItemVisualAlignment : TVisualAlignment
property ItemAlignment : TAlignment
property ItemFontSize : integer
property ItemFontName : string
property ItemFontColor : TColor
property ItemHeight: integer
property ItemObject : TObject

procedure TFormLegend.FormCreate(Sender: TObject);
begin
FLegendCp := TLegendComponent.Create(map);

FLegendCp.Legend.color := clWhite;
FLegendCp.Legend.Height:= 270;

// width of legend pictogram
FLegendCp.Legend.VisualWidth := 40;
// line thickness for styles <> vsFrame and vsFillRect
FLegendCp.Legend.VisualWeight := 3;

FLegendCp.Legend.add('Item 1',getRandomColor,vsFillRect);
FLegendCp.Legend.add('Item 2',getRandomColor,vsFrame);
FLegendCp.Legend.add('Item 3',getRandomColor,vsSolidLine);
FLegendCp.Legend.add('Item 4',getRandomColor,vsDashLine);
FLegendCp.Legend.add('Item 5',getRandomColor,vsDotLine);
FLegendCp.Legend.add('Item 6',getRandomColor,vsDashDotLine);

// add graphic
FLegendCp.Legend.add('Item 7',pins.picture.graphic);

FLegendCp.Legend.Title := 'Legend';
FLegendCp.Legend.Footer := 'Footer';

FLegendCp.Legend.OnItemClick := doOnItemLegendClick;

end;

procedure TFormLegend.FormDestroy(Sender: TObject);
begin
FLegendCp.Free;
end;

procedure TFormLegend.ckVisibleClick(Sender: TObject);
begin
FLegendCp.Visible := ckVisible.Checked;
end;

// event triggered by a click on an item
procedure TFormLegend.doOnItemLegendClick(sender : TObject);
begin
if Sender is TItemLegend then
begin
showMessage(TItemLegend(Sender).ItemCaption);
end;
end;

(*

ecTopRight , ecTopLeft stacks components vertically upwards to right and left
ecBottomRight, ecBottomLeft stack components vertically downwards on right and left
ecRightTop , ecLeftTop stack components horizontally upwards to right and left
ecRightBottom, ecLeftBottom stacks components horizontally downwards to right and left

*)

procedure TFormLegend.RadioButton4Click(Sender: TObject);
begin
case TRadioButton(Sender).tag of
0 : FLegendCp.Align := ecTopRight;
1 : FLegendCp.Align := ecTopLeft;
2 : FLegendCp.Align := ecBottomRight;
3 : FLegendCp.Align := ecBottomLeft;
end;
end;

// item text alignment
procedure TFormLegend.RadioButton8Click(Sender: TObject);
begin
case TRadioButton(Sender).tag of
0 : FLegendCp.Legend.ItemAlignment := taLeftJustify;
1 : FLegendCp.Legend.ItemAlignment := taCenter;
2 : FLegendCp.Legend.ItemAlignment := taRightJustify;
end;
end;

// item visual alignment
procedure TFormLegend.RadioButton9Click(Sender: TObject);
begin
case TRadioButton(Sender).tag of
0 : FLegendCp.Legend.VisualAlignment := valLeft;
1 : FLegendCp.Legend.VisualAlignment := valRight;
end;
end;
go to page
Réalisé avec la version gratuite pour les particuliers d'Help&Web