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

TECShapePoi

you are here :TECNativeMap > Shapes

Summary

Pois (point of interest) are equivalent to the markers, the difference is that you have 7 predefined shapes (Text, Ellipse, rectangle, triangle , diamond, star and hexagon) but you can also take in charge you even their design.

By default the elements sizes are in pixels but you can also use meters by using the property POIUnit.

// Delphi map component ECMap

// add POI at center of map
id := map.shapes.Pois.add(map.latitude,map.longitude);

// random form

case random(7) of
0 : map.shapes.pois[id].POIShape := poiEllipse;
1 : map.shapes.pois[id].POIShape := poiStar;
2 : map.shapes.pois[id].POIShape := poiRect;
3 : map.shapes.pois[id].POIShape := poiTriangle;
4 : map.shapes.pois[id].POIShape := poiDiamond;
5 : map.shapes.pois[id].POIShape := poiHexagon;
6 : begin
map.shapes.pois[id].POIShape := poiText;
map.shapes.pois[id].Description := 'Poi n°'+inttostr(id);
end;
end;

map.shapes.pois[id].Draggable := true;

map.shapes.pois[id].Color := RGB(random(255),random(255),random(255)) ;

// set hint to this POI
map.shapes.Pois[id].Hint := 'my first POI!';

// by default the size of TECShapePOI is in pixel
// you cant use meter also

// map.shapes.pois[id].POIUnit := puMeter

map.shapes.pois[id].POIUnit := puPixel;

map.shapes.pois[id].width := 32;
map.shapes.pois[id].height:= 32;

Fig. 103 DemoNativePOI

You can change the size of the shapes by flipping their Editable property to true

// Delphi map component ECMap

// add POI at center of map
id := map.shapes.Pois.add(map.latitude,map.longitude);

// random form

case random(7) of
0 : map.shapes.pois[id].POIShape := poiEllipse;
1 : map.shapes.pois[id].POIShape := poiStar;
2 : map.shapes.pois[id].POIShape := poiRect;
3 : map.shapes.pois[id].POIShape := poiTriangle;
4 : map.shapes.pois[id].POIShape := poiDiamond;
5 : map.shapes.pois[id].POIShape := poiHexagon;
6 : begin
map.shapes.pois[id].POIShape := poiText;
map.shapes.pois[id].Description := 'Poi n°'+inttostr(id);
end;
end;

map.shapes.pois[id].Draggable := true;

map.shapes.pois[id].Color := RGB(random(255),random(255),random(255)) ;

// set hint to this POI
map.shapes.Pois[id].Hint := 'my first POI!';

// by default the size of TECShapePOI is in pixel
// you cant use meter also

// map.shapes.pois[id].POIUnit := puMeter

map.shapes.pois[id].POIUnit := puPixel;

map.shapes.pois[id].width := 32;
map.shapes.pois[id].height:= 32;

Fig. 104 TECShapePOI in edit mode - resize handle displayed

TECMapPois

Pois are managed by an TECShapePois list accessible through the pois of the groups property TECShapes

the property OnOwnerDrawPOI : TOnOwnerDrawPOI specify a procedure to support the design of type poiOwnerDraw

// Delphi map component ECMap


map.Shapes.Pois.OnOwnerDraw := doOwnerDrawPOI;
...

// owner draw poi, here transparancy text
procedure TFormPoi.doOwnerDrawPOI(const canvas:TCanvas;var Rect:TRect;item:TECMapPoi) ;
var x,y,w,h:integer;
begin

canvas.brush.Style := bsClear;

if item.Hover then
canvas.font.color := item.HoverColor
else
canvas.font.color := item.color;


canvas.font.Style := [fsBold];

w := canvas.TextWidth(item.hint) ;
h := canvas.TextHeight(item.hint);

x := rect.Left+((rect.Right-rect.Left-w) div 2);
y := rect.top+((rect.bottom-rect.top-h) div 2);

canvas.TextOut(x,y,item.Hint);

end;

Each TECShapePOI element has its own property OnOwnerDrawPOI

90

You also have a property OnAfterDraw which allows to draw on a figure, example to include his number.

// Delphi map component ECMap


map.Shapes.Pois.OnAfterDraw := doAfterDrawPOI;
...

// after draw poi, here write is number
procedure TFormPoi.doAfterDrawPOI(const canvas:TCanvas;var Rect:TRect;item:TECMapPoi) ;
var x,y,w,h : integer;
s : string;
begin

canvas.font.style := [fsBold];

s := inttostr(item.IndexOf);


w := canvas.TextWidth(s) ;
h:= canvas.TextHeight(s) ;


x := 1+((r.Left + r.Right) - w) DIV 2 ;
y := 1+((r.Top + r.Bottom) - h) DIV 2 ;

canvas.brush.Style := bsClear;

canvas.font.color := clWhite;

canvas.TextRect(r,x,y,s);
end;

As for the TECShapeMarker the Scale property allows you to adjust the size and ScaleMarkerToZoom is also functional.

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