Display a MiniMap

Let's see how to embed a mini synchronized map on the main map

Design

Place a TPanel on your TECNativeMapcomponent, attach the color clWhite, BevelInner and BevelOuter properties to false and BorderWidth to 4

Déposez sur le TPanel un composant TECNativeMap avec ses propriétés Align à alClient

Code

The mini map should be centered on the main Map with a zoom 5 notches below, and we will draw a rectangular box at the sight of the main card.

procedure TForm1.UpdateMiniMap;
begin

// if the call comes from the direct change of the minimap, you must leave otherwise we go into an infinite loop
if minimap.tag = 1 then exit;

// indicates that map has initiated the movement
map.tag := 1;

if not assigned(FMiniPolygone) then
begin
minimap.ShowCopyrightTile := false;
minimap.shapes.Polygones.add(0,0) ;
FMinipolygone := minimap.shapes.Polygones[0];
FMinipolygone.ShowText := false;
FMinipolygone.fillColor := clBlue;
FMinipolygone.hoverColor := clBlue;
FMinipolygone.Opacity := 50;

minimap.OnChangeMapZoom := minimapChangeMapZoom;
minimap.OnMapMove := minimapMapMove;
end;

minimap.setCenter(Map.latitude,Map.longitude);
minimap.zoom := Map.zoom - 5;


FMinipolygone.SetPath([ Map.SouthWestLatitude, Map.SouthWestLongitude,
Map.SouthWestLatitude, Map.NorthEastLongitude,
Map.NorthEastLatitude, Map.NorthEastLongitude,
Map.NorthEastLatitude, Map.SouthWestLongitude,
Map.SouthWestLatitude, Map.SouthWestLongitude
]);


map.tag := 0;




end;

You will need to call UpdateMiniMap in evenenemts OnMapMove and OnChangeMapBounds of the main card.

You should also respond to events OnMapMove and OnChangeMapBounds to adjust the view of the main map when it directly operates the mini map, without forgetting to adjust the position of the minimap in the event OnResize

unit UMainNativeMiniMap;

interface

uses
Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
Dialogs, uecNativeMapControl, ExtCtrls, StdCtrls,uecNativeShape;

type
TForm1 = class(TForm)
Panel1: TPanel;
Map: TECNativeMap;
plus: TButton;
Button1: TButton;
pnMiniMap: TPanel;
minimap: TECNativeMap;
procedure FormCreate(Sender: TObject);

procedure MapMapMove(sender: TObject; const Lat, Lng: Double);
procedure MapResize(Sender: TObject);
procedure MapChangeMapBounds(Sender: TObject);
procedure minimapMapMove(sender: TObject; const Lat, Lng: Double);
procedure minimapChangeMapZoom(Sender: TObject);
private
{ Déclarations privées }
procedure UpdateMiniMap;
var FMiniPolygone : TECShapePolygone;
public
{ Déclarations publiques }
end;

var
Form1: TForm1;

implementation

{$R *.dfm}

procedure TForm1.FormCreate(Sender: TObject);
begin
Map.LocalCache := ExtractFilePath(application.exename) + 'cache';
end;

procedure TForm1.MapChangeMapBounds(Sender: TObject);
begin
UpdateMiniMap;
end;

procedure TForm1.MapMapMove(sender: TObject; const Lat, Lng: Double);
begin
UpdateMiniMap;
end;

procedure TForm1.MapResize(Sender: TObject);
begin
pnMiniMap.Top := Map.Height - pnMiniMap.Height -16;
pnMiniMap.Left:= Map.width - pnMiniMap.width - 8;
end;

procedure TForm1.minimapChangeMapZoom(Sender: TObject);
begin
// it deals only with direct access to the minimap
if map.tag=1 then exit;

// indicates that minimap has initiated the movement
minimap.tag := 1;
Map.zoom := minimap.zoom + 5;
minimap.tag := 0;
end;

procedure TForm1.minimapMapMove(sender: TObject; const Lat, Lng: Double);
begin

// it deals only with direct access to the minimap
if map.tag=1 then exit;

// indicates that minimap has initiated the movement
minimap.tag := 1;
Map.setCenter(minimap.latitude,minimap.longitude);
minimap.tag := 0;
end;



procedure TForm1.UpdateMiniMap;
begin

// if the call comes from the direct change of the minimap, you must leave otherwise we go into an infinite loop
if minimap.tag = 1 then exit;

// indicates that map has initiated the movement
map.tag := 1;

// if the first call, creation of the polygon indicates the main view
if not assigned(FMiniPolygone) then
begin
minimap.ShowCopyrightTile := false;
minimap.shapes.Polygones.add(0,0) ;
FMinipolygone := minimap.shapes.Polygones[0];
FMinipolygone.ShowText := false;
FMinipolygone.fillColor := clBlue;
FMinipolygone.hoverColor := clBlue;
FMinipolygone.Opacity := 50;
end;

minimap.setCenter(map1.latitude,map1.longitude);
minimap.zoom := map1.zoom - 5;

// update polygon with boundingbox main map
FMinipolygone.SetPath([ map1.SouthWestLatitude, map1.SouthWestLongitude,
map1.SouthWestLatitude, map1.NorthEastLongitude,
map1.NorthEastLatitude, map1.NorthEastLongitude,
map1.NorthEastLatitude, map1.SouthWestLongitude,
map1.SouthWestLatitude, map1.SouthWestLongitude
]);


map.tag := 0;

end;

end.