TECNativeMap

TECNativeMap is available in VCL and Firemonkey (Windows , Mac OS X, iOs and Android) for the same price !

you access an offline mode, not using the Google Maps service and other Bing Maps lets you keep control over your data.

TECNativeMap allows you to use OpenStreetMap maps, Google, MapBox, OpenCycleMap, OPNV, TomTom etc, and manage your own components to integrate into it.

To select a map provider use the property TileServer

Google

To use Google Tiles you need to enter your API key in GoogleKey, go to Google's platform to generate it.

Bing

By filling in the BingKey property with your Bing key you can use Bing Maps tiles ( tsBingRoad, tsBingAerial and tsBingAerialLabels )

map.BingKey := YOUR_BING_KEY
map.TileServer := tsBingRoad;

Here

By filling the HereApiKey propertie You can use the Here tiles

map.TileServer := tsHere;
map.HereApiKey := := 'your_api_key' ;
// select style
map.TileServerInfo.MapStyle := 'explore.day';
map.TileServerInfo.MapStyle := 'lite.day';
map.TileServerInfo.MapStyle := 'explore.night';
map.TileServerInfo.MapStyle := 'satellite.day';
map.TileServerInfo.MapStyle := 'explore.satellite.day';

MapBox

To use the tiles from MapBox ( tsMapBoxSatellite, tsMapBoxStreets,tsMapBoxStreetsSatellite,tsMapBoxStreetsBasic ) enter your token in MapBoxToken.

TomTom

To use TomTom tiles ( tsTomTomBasic, tsTomTomHybrid, tsTomTomNight, tsTomTomIncident, tsTomTomFlow ) you must obtain a key and fill in the TomTomKey property of your map.

For tsTomTomIncident and tsTomTomFlow you have the choice between 4 styles

PTV Group

You must obtain your api key to use these maps.

You can use PTV tiles as a base map or as an overlay on top of any background map..

property ApiKey: string

property BaseMapLayer: TPTVBaseMapLayer

Choice of base map type (none, amber, blackmarble, classic, gravelpit, sandbox,silica, silkysand, satellite)

property ForegroundLayers: TPTVForegroundLayers

property OverlayLayers: TPTVForegroundLayers

property PTV_COPYRIGHT: string

property VehicleType: TPTVvehicleType

List of predefined servers

If you try to download tiles from the internet and there is no connection, the OnErrorConnection event in your map is triggered.

WMS tile server

You can use a WMS service to display your tiles.

Use your own tile server

In addition to the previous maps you can use any other provider using the same format.

procedure TForm.FormCreate(Sender: TObject);
begin
Map.LocalCache := ExtractFilePath(application.exename) + 'cache';
Map.MaxZoom := 21;
// provider of custom tiles
Map.TileServerInfo.Name := 'OSM';
Map.TileServerInfo.GetTileFilename := GetOSMTile;
end;


procedure TForm.GetOSMTile(var TileFilename:string;const x,y,z:integer);
begin
TileFilename := 'https://tile.openstreetmap.org/' + inttostr(z) + '/' + inttostr(x) + '/' +
inttostr(y) + '.png' ;
end;

ColorFilter

This property allows you to modify/change certain colors of your tiles.

With Firemonkey you can also define certain colors that will be kept or that you can replace without them being modified by the filter.

Overlay tiles

You can use several server of tiles to display above your base map.

var overlay:TECOverlayTileLayer;
...
// overlay clouds tiles
overlay := map.AddOverlayTiles(GetWeatherTile);
// set name for directory
overlay.Name := 'OpenWeatherMap_Clouds';
// you can also use this syntax
overlay := map.AddOverlayTiles(GetWeatherTile,'OpenWeatherMap_Clouds');

// remove overlay
map.RemoveOverlayTiles(overlay);

...

procedure TForm.GetWeatherTile(var TileFilename:string;const x,y,z:integer);
begin
TileFilename := format('http://%s.tile.openweathermap.org/map/clouds/%d/%d/%d.png',[Char(Ord( 'a') + random(3)),z,x,y]);
end;

You can still use a stream.

procedure TForm.getOverlayTileStream(var TileStream: TMemoryStream;const x, y, z: integer);
begin
// here fill the stream with your tile

end;

...
map.AddOverlayStreamTiles(getOverlayTileStream);

Or directly using a transparent predefined server as tsHereFlow or tsHereTruckTransparent

// mix Bing Aerial Labels and Here Flow
map.TileServer := tsBingAerialLabels;
map.AddOverlayTileServer(tsHereFlow);

As another example, use the services of OpenRailWayMap to display railroad facilities.

var overlay:TECOverlayTileLayer;
...
// overlay clouds tiles
overlay := map.AddOverlayTiles(GetWeatherTile);

// set opacity 0..1
overlay.opacity := 0.5;

Use RemoveAllOverlayTiles to delete all overlays

Vector Tiles

Starting with version 5.5 (October 2024), TECNativeMap offers minimalist support for vector tiles as defined by MapBox

Connection to a vector tile server

All you have to do is pass the url of your style (in MapLibre json format), if necessary you'll also need to enter your api key.

You can also connect manually as follows

You can browse through all the styles, for example here we'll fill a listbox

Positioning on the map

You can determine the coordinates of the center of the map through the Latitude and Longitude properties, they are of type double and accessible in read/write

You can directly modify the coordinates through the procedure setCenter(const dlatitude,dlongitude:double)

PanTo(lat,lng) is equivalent but a scroll will be performed if the displacement is minimal otherwise we go directly to the new position as setCenter

Utilisez Move(direction,DistanceKM) to move in a direction varying from 0 to 359° and over a distance in KM

// Delphi map component ECNativeMap
var lat,lng:double;
begin
// get center of map
lat := map.Latitude;
lng := map.Longitude;
// move center of map
map.setCenter(lat+0.001,lng);
//
map.PanTo(lat+0.001,lng);

// move to south on 10.5km
map.Move(180,10.5);

end;

Mouse position

The latitude and longitude of the point under the mouse cursor are returned by the property MouseLatLng

You can connect on the event OnMapMouseMove to know in time real your position

Graticule

Displays a grid showing latitudes and longitudes.

Reacting to the change in position

When the center of the map is moved, This either by code or the mouse directly, the event OnMapMove(sender: Tobject;const dLatitude,dLongitude:double) is raised

Sender represents the ECNativeMap component that has changed, dLatitude and dLongitude the new coordinates, who are also accessible through Latitude and Longitude

When the map starts to move the event OnMapDragStart is raised, then OnMapDrag while the move and OnMapDragEnd at the end of displacement.

Area displayed

You can determine the coordinates of North East point (top-right) and point South West (lower-left) of the displayed area by the component through the properties NorthEastLatitude, NorthEastLongitude, SouthWestLatitude and SouthWestLongitude, they are double and accessible read-only.

The procedure BoundingBox(maxLatitude,maxLongitude,minLatitude,minLatitude) limit the accessible area of your map, the event OnOutOfBounds is raised if you attempt to access a restricted area.

The procedure fitBounds(const dLatlo,dLnglo,dLathi,dLnghi:double) allows you to adjust the view to the coordinates passed.

the procedure boundingCoordinates(const lat, lng, radius: double; var latSW, lngSW,latNE, lngNE: double); Returns the coordinates of a rectangular area on the basis of the focal point and a distance in km.

The function ContainsLatLng(var dLatitude,dLongitude:double):boolean tells you if the dLatitude, dLongitude is in the visible portion of the map.

As soon as the view changes the event OnChangeMapBounds(sender: TObject) is raised.

The function ScreenShot Returns an integer containing the image of the map

Zoom

The Zoom property allows you to control the definition of your card, it is of type integer and is accessible in read/write

Use the ZoomAround(const LatLngZoom:TLatLng; const NewZoom:Integer) procedure to zoom while remaining focused on a specific point (as in mouse)

The zoom change triggers the event OnChangeMapZoom(sender: TObject)

By setting the DragRect property on drZoom you can select an area with the mouse by holding the right button, when you release the button zoom is performed on the selected region.

ZoomScaleFactor

This property allows you to emulate the intermediate zooms

const Data_Uri = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==';

map.Shapes.Markers[0].filename := Data_Uri;

You can zoom in progressively from zoom 1 to beyond the maximum zoom provided by the tile server, simply by incrementing zoomScaleFactor, and vice versa to zoom out.

Use the procedure ZoomScaleFactorAround (const LatLngZoom:TLatLng; const NewZoomScaleFactor:Integer) to zoom while remaining focused on a specific point (as with mouse)

Keyboard map management

TECNativeMap has OnKeyUp and OnKeyDown events

Example of code to manage movement and zoom with the arrow keys, + and -.

Adapt the markers to the Zoom

Use the ScaleMarkerToZoom property to resize markers depending of Zoom.

Selection

The Selected property allows you to select items.

// select items in area
nbr_item_selected := map.Selected.ByArea(NorthEastLat,NorthEastLng,SouthWestLat,SouthWestLng);

// select items <=Max_Distance_KM to CenterPointLat,CenterPointLng
nbr_item_selected := map.Selected.ByKMDistance(CenterPointLat,CenterPointLng,Max_Distance_KM);

// loop to all selected items

var shape:TECShape

for shape in map.Selected do
begin
..
end;

By setting DragRect to drSelect you can make a selection with the mouse by holding the right button and release once the area is delimited.

You can redefine the appearance of the selection rectangle using styles, example to have a line of 10 pixels width, green color, and a dotted line

map.styles.addRule('#_DRAGZOOM_.line {weight:10;color:green;penStyle:dash}');

To deselect all your items use map.Selected.UnSelectedAll

The GroupFilter list allows to define a filter on the groups allowed

You can define your own filter by connecting you on OnSelectShape.

You can select / deselect any element by code through its selected property

Selected items are drawn using the color HoverColor, you can add a distinguishing mark by connecting you on their OnAfterDraw event.

This example adds a red star in the upper right corner of selected items

// when you create item you must connect like this item.OnAfterDraw := doAfterDraw

procedure TForm1.doAfterDraw(const canvas: TECCanvas; var rect: TRect; item: TECShape) ;
var size_start : integer;
begin
if assigned(item) and (item.Selected) then
begin
size_start := (item.Width div 2);
if size_start< 10 then size_start := 10;

canvas.Pen.Color := claBlack;
canvas.PenWidth(1);
canvas.Brush.Color := GetHighlightColorBy(claRed,16);

rect.Left := rect.Left + (rect.Right-rect.Left) - size_start;
rect.Top := rect.Top - (size_start div 2);
rect.Bottom := rect.Top + size_start ;

canvas.DrawStar(rect);
end;
end;

Or simply you can set a style.

You can save the selection in a file with SaveToFile or in a string with toXXX

Map rotation

Put your component into a container (TPanel, TRectangle) which will be used to define the visible region and activate property OverSizeForRotation

map.OverSizeForRotation := true;

// To allow or not the rotation gesture use the property EnableTouchRotation

map.EnableTouchRotation := true;

Url

The Url property returns / accepts a string in the format '#zoom/Latitude/Longitude'

// zoom 18 latitude 48.856527 longitude 2.352104
// welcome to Paris !
map.Url := '#18/48.856527/2.352104';

Assigning a value to this property raises the event OnBeforeUrl(sender : TObject; var Url:string) that can allow you to change the url, and even to cancel the change by returning an empty string.

You can pass a such link in a InfoWindow

// welcome to Paris !
map.Shapes.InfoWindows[0].Content := 'Go to <a href="#18/48.856527/2.352104">Paris !</a>';

Distance

The function DistanceFrom(const dLatitudeStart,dLongitudeStart,dLatitudeEnd,dLongitudeEnd:double):double to calculate the distance between 2 points, the result is in kilometers.

Angle to the North

The function Bearing(const dLatitudeStart,dLongitudeStart,dLatitudeEnd,dLongitudeEnd:double):integer gives you the angle, from 0 ° to 360 ° for direction from the point dLatitudeStart,dLongitudeStart to the point dLatitudeEnd,dLongitudeEnd

MiniMap

To display a mini map in your main card simply add the uecNativeMiniMap unit to your listing and add the following lines.

// Delphi native map component TECNativeMap

var FMiniMap : TECNativeMiniMap;
...
// create and show minimap on Map
FMiniMap := TECNativeMiniMap.create(Map);

// for hide minimap
FMiniMap.Map := nil;

// for show
FMiniMap.Map := Map;

You can change the corner of anchor with the property ancragePosition (apTopLeft, apTopRight, apBottomLeft, apBottomRight )

XMargin and YMargin allow you to adjust the position relative to the edges

BorderColor and BorderSize changes the color and size of the border surrounding the mini map.

Screenshot allows you to get an image of your miniMap, you will have to release it yourself!

Scale bar

The ScaleBar property of the map is used to manage the scale bar.

procedure TForm1.FormCreate(Sender: TObject);
begin
map.ScaleBar.Visible := true;
map.ScaleBar.Color := claWhite;
map.ScaleBar.SecondaryColor := claRed;
map.ScaleBar.Style := sbsBar;
map.ScaleBar.Division := sbdFour;
map.ScaleBar.Thickness := 8;
map.scalebar.opacity := 50;
end;

The following properties are available :

property AnchorPosition: TAnchorPosition

property Color: TColor

property SecondaryColor: TColor

property Division : TECScaleBarDivision

property FontSize : integer

property MaxWidth: integer

property Style : TScaleBarStyle

property MeasureSystem: TMesureSystem

property Shadow: boolean

property Thickness : integer

property Visible: boolean

property XMargin: integer

property YMargin: integer

property Opacity : byte

Measurement tool

The component's MeasureTool property gives you access to a distance and area measurement tool.

procedure TForm1.FormCreate(Sender: TObject);
begin
map.MeasureTool.Visible := true;
// distance
map.MeasureTool.MeasureArea := false;
// area
map.MeasureTool.MeasureArea := true;
// react to changes in distance or area
map.MeasureTool.OnChange := doChange;
end;

// fired when distance or area change
procedure TFormMeasureTool.doChange(Sender : TObject);
begin
// you can also access the values
// map.MeasureTool.Distance
// map.MeasureTool.Area
if map.MeasureTool.MeasureArea then
begin
lbDistance.Caption := 'Perimeter : '+map.MeasureTool.DistanceText;
lbArea.Caption := 'Area : '+map.MeasureTool.AreaText;
end
else
begin
lbDistance.Caption := 'Distance : '+map.MeasureTool.DistanceText;
lbArea.Caption := '';
end;

end;

Take a look at the MeasureTool demo to get started.

Observer

An observer allows you to be notified when events is fired in map or in shape.

This has the advantage of not to block the main events of the map and the shapes.

You can add as many observers as you want.

The layers using observers to react to the change of position.