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


you are here :Autres composants
Cesium is a Javascript library to manage globes 3D and 2D maps, information about the site

TECCesiumMap is a component that allows you to use Cesium in your Delphi developments, it is at the moment available for the VCL (Windows)

Internet Explorer 11 is the minimum required to use Cesium, TECCesiumMap does not work on XP !


Fig. 168 TECCesiumMap

This component is integrated in full suite TECMap



Default TECCesiumMap uses servers, but for the production of your developments I strongly advise you to install on your own webserver cesium.

Download the latest archive of Cesiumthen unzip on your server.

TECesiumMap has the property WebServer just set with the root directory of your installation.

Use CreateRuntimeCesiumMap to a dynamic creation

// function CreateRuntimeCesiumMap(AOwner: TComponent=nil;AParent:TWinControl=nil):TECCesiumMap;

cesium := CreateRuntimeCesiumMap(self,panel1);

You must get a key to use the api of Cesium, connect you to the OnInitialize event to connect your Token.
You must also copy the file cesium-app.html on your server

map.OnInitialize := doInitialize;

procedure TForm.doInitialize(Sender: TObject);
TECCesiumMap(sender).WebServer := '';
TECCesiumMap(sender).IonAccessToken := 'your cesium ion token';


The structure is the same that for TECNativeMap, elements work in the same way and you find the concepts of groups, geolocation and the calculation of routes are identical

function Add(const shape: TNativeShape; const Lat, Lng: double; const GroupName: string = ''): TECCesiumShape;

function AddRoute(const routePath: TECroutepath; const GroupName: string = ''): TECCesiumShapeLine;

function AddPOI(const Lat, Lng: double; const GroupName: string = '') : TECCesiumShapePOI;

function AddPOIText(const Lat,Lng:Double;const Text:string='';const GroupName:string=''): TECCesiumShapePOI;

function AddMarker(const Lat, Lng: double; const GroupName: string = '') : TECCesiumShapeMarker;

function AddLine(const Lat, Lng: double; const GroupName: string = '') : TECCesiumShapeLine;

function AddPolygone(const Lat, Lng: double; const GroupName: string = '') : TECCesiumShapePolygone;

function AddInfoWindow(const X,Y: double; const GroupName: string = '') : TECCesiumShapeInfoWindow;

Unlike TECNativeMap in TECCesiumControl you specify the screen coordinates for positioning your information window


procedure Remove(const shape: TECCesiumShape);

procedure Clear

procedure BeginUpdate

procedure EndUpdate

procedure SaveToFile(const Filename: string);

procedure LoadFromFile(const Filename: string)

procedure setCenter(const Lat, Lng: double);

procedure fitBounds(const NELat, NELng, SWLat, SWLng: double);

procedure fitBoundsRadius(const dLat, dLng, dRadiusKm: double);

procedure FlyTo(const Lat, Lng, alt: double);

procedure Jumpto(const Lat, Lng, alt: double);

procedure LookAt(const Lat, Lng, alt: double);

procedure GECamera(const Lat, Lng, alt, Tilt, Heading, roll: double);

procedure Javascript(const js:string);

function GetRoutePathByAdress(const StartAdress, EndAdress: string; const routeType: TMQRouteTyp = rtFastest; const params: string = ''): TECroutepath;

function GetRoutePathFrom(const dLatLngs: array of double; const routeType: TMQRouteType = rtFastest; const params: string = ''): TECroutepath;

function GetASyncRoutePathByAdress(const StartAdress, EndAdress: string; const routeType: TMQRouteTyp = rtFastest; const params: string = ''): TECroutepath;

function GetASyncRoutePathFrom(const dLatLngs: array of double; const routeType: TMQRouteType = rtFastest; const params: string = ''): TECroutepath;

property Address: string

property MouseLatLng: TLatLng

property MouseAlt: double

property ScreenShot: TBitmap

property ClickX : integer read FClickX;

X position (coordinate screen) click

property ClickY : integer read FClickY;

Position in Y (coordinate screen) click

property MouseX : integer read FMouseX;

X position (coordinate screen) of the mouse

property MouseY : integer read FMouseY;

Position in Y (coordinate screen) of the mouse

property Shapes: TECCesiumShapes read FShapes;

property HintInfoWindow : TECCesiumShapeInfoWindow read getHintInfoWindow;

Provides access to the TECCesiumShapeInfoWindow that manages the ToolTips of items useful to change the style

property Group[value: string]: TECCesiumShapes read getShapesGroup;

property Groups:TECGroupShapesList read getShapesGroups;

property toKml: string read getToKml write setToKml;

property toGpx: string read getToGPX write setToGpx;

property toTxt: string read getToTxt write setToTxt;

property toGeoJSon: string read getToGeoJSon write setToGeoJSon;

property Url: string read getUrl write setUrl;

property WebServer : string read FWebServeur write setWebServeur;

property BingKey: string

property Latitude: double ;

property Longitude: double ;

property Altitude: double;

property Zoom: double;

property Draggable;

property TileServer: TTileServer

The following servers are available :

  • tsOpenMapQuest
  • tsOSM
  • tsOpenCycleMap
  • tsArcGisWorldTopoMap
  • tsArcGisWorldStreetMap
  • tsArcGisWorldImagery
  • tsBingRoad
  • tsBingAerial
  • tsBingAerialLabels

It is advisable to fill the BingKey property with your key Bing to use Bing Maps tiles ( tsBingRoad, tsBingAerial, tsBingAerialLabels )

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

property Terrain: boolean;

Activates the relief of the terrain

property SceneMode: TCesiumMode;

Selects the type of display, by default 3D

  • cm2D
  • cmColombus
  • cm3D


property OnMapClick: TOnMapLatLng

property OnMapRightClick: TOnMapLatLng

property OnMapMove: TOnMapLatLng

property OnMapMouseMove: TOnMapLatLng

property OnMapMouseUp: TOnMapLatLng

property OnMapMouseDown: TOnMapLatLng

property OnShapeMove: TOnShapeMove

property OnShapeDrag: TOnShapeMove

property OnShapeDragEnd: TNotifyEvent

property OnShapeMouseOver: TOnShapeMouseEvent

property OnShapeMouseOut: TOnShapeMouseEvent

property OnShapeMouseDown: TOnShapeMouseEvent

property OnShapeMouseup: TOnShapeMouseEvent

property OnShapeClick: TOnShapeMouseEvent

property OnShapeRightClick: TOnShapeMouseEvent

property OnShapePathChange: TNotifyEvent

property OnCloseInfoWindow: TOnCloseInfoWindow

property OnRoutePath: TOnRoutePath

property OnLoad: TOnLoadGroup

property OnLoadShapes: TOnLoadShapes

property OnUrl: TOnUrl

property OnCZML : TOnCZML


i := cmap.Shapes.Markers.Add(lat,lng) ;
// hint accept html
cmap.Shapes.Markers[i].Hint := 'marker n° <b>'+inttostr(i)+'</b>';

Fig. 169 Marker by default

uses uecCesiumShape;

var marker : TECCesiumShapeMarker;

// use the shortcut to create the marker
marker := cmap.AddMarker(Lat,lng);
// you can find index with marker.IndexOf
// cmap.shapes.markers[marker.indexOf]

// add a text
marker.Description := 'Text';
// adapt width
marker.Width := 70;
// change color
marker.Color := clOlive;

Fig. 170 Marker with Text

// use the shortcut to create the marker
marker := cmap.AddMarker(Lat,lng);
// use maki icon
marker.Description := 'maki:bicycle';
marker.Width := 64;
marker.Color := clBlue;
// set draggable
marker.Draggable := true;

Fig. 171 Marker with Maki icon

// use the shortcut to create the marker
marker := cmap.AddMarker(Lat,lng);
// use png file
marker.Filename := '';;

Fig. 172 Marker with Png


var line : TECCesiumShapeLine;

// create line and add first point Latitude, Longitude
line := cmap.AddLine(48.8594069779731,2.34283447265625) ;
// better for optimisation
// change color
line.Color := clHotLight;
// change size
line.Weight := 10;
// add other points
// update
// zoom to line

Fig. 173 TECCesiumShapeLine


var polygone : TECCesiumShapePolygone;

// create polygone and add first point Latitude, Longitude
polygone := cmap.AddPolygone(48.8594069779731,2.34283447265625) ;
// better for optimisation
// change color
polygone.fillColor := clYellow;
// change opacity
polygone.fillOpacity := 30;
// add other points
// update
// zoom to polygone

Fig. 174 TECCesiumPolygone


Unlike TECNativeMap only poiEllipse and poiText types are supported at the moment


var Poi : TECCesiumShapePOI;

Poi := cmap.AddPOI(lat,lng) ;

Poi.BorderSize := 2;
Poi.Color := clBlue;
Poi.BorderColor := clWhite;
// 16 pixels
// for meters use Poi.POIUnit := puMeter;
Poi.Width := 16;

Fig. 175 TECCesiumShapePOI

var Poi : TECCesiumShapePOI;

Poi := cmap.AddPOIText(lat,lng,'my label') ;

// use description for change text
//Poi.Description := 'my new label';

// font
Poi.CssFont := '14pt monospace';
// color
Poi.Color := clWhite;

Fig. 176 poiText


You can use the material property for example to embed an image in a polygon.

Cesium.Shapes.polygones[index].Material := '"";';

Fig. 177 material property

You can directly use javascript to define a more complex material.

Cesium.Shapes.polygones[index].Material := 'new Cesium.ImageMaterialProperty({'+
'image : "'+UrlImageToDataUri('d:\alert-weather.png')+'",'+
'transparent:true })';

Fig. 178 material local image


Unlike TECNativeMap the position of the InfoWindows is shown in screen coordinates, you can use html for your content and use CSS to style your InfoWindows

var wn:TECCesiumShapeInfoWindow;

Wn := cmap.AddInfoWindow(10,10) ;
Wn.content := 'You can enter <b>html</b> content <br>text and <i>image</i> <img src=""/>'; ;
// you can style with css
Wn.Style := 'here css';
// use color for color background
Wn.Color := clWhite;

Wn.CloseButton := true;

The OnCloseInfoWindow of the TECCEsiumMap component event is raised when closing by the cross and the InfoWindow coming to be closed is recovered.

If your window contains a link, the click triggers the event OnUrl


Fig. 179 InfoWindow


This class manages the 3D models, Cesium uses the glTF format, a converter COLLADA-> gLTF is proposed

var model : TECCesiumShapeModel;

// you can use url or local filename for your .gltf
model := cmap.addModel(lat,lng,'') ;

// Values greater than 1.0 increase the size of the model
// while values less than 1.0 decrease it.
model.Scale := 2.0;

// specifying the approximate minimum pixel size of the model regardless of zoom.
// This can be used to ensure that a model is visible even when the viewer zooms out
model.MinimumPixelSize := 64;

// Orientation(heading,pitch,roll)


CZML is the equivalent of KML but more powerful

procedure LoadCZML(const CZML:string;cosnt idCZML:string='';const Options:string='';const Promise:string='');

For options see // (Cesium.CzmlDataSource.load(czml, options))

Promise can execute javascript when the czml script is finished, LoadAndZoomToCZML use.

procedure TCesiumEngine.LoadAndZoomToCZML(const CZML:string;const idCZML:string='';const Options:string='');
var promise:string;

promise := 'viewer.zoomTo(datasourceczml);'



When the script is finished the event OnCZML of your component is triggered, it returns idCZML

procedure LoadAndZoomToCZML(const CZML:string;const idCZML:string='';const Options:string='');

czml := '[{"id" : "document",'+
'"name" : "CZML Point",' +
'"version" : "1.0"'+
'}, {'+
'"id" : "toto",'+
'"name": "pointx",'+
'"position" : {"cartographicDegrees" : [-111.0, 40.0, 0]'+
'"point": {'+
' "color": {"rgba": [255, 255, 255, 255] },'+
' "outlineColor": {"rgba": [255, 0, 0, 255]'+
' },'+
' "outlineWidth" : 4,'+
' "pixelSize": 20'+
' }'+


Fig. 181 create point with czml

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