{"id":13497456,"url":"https://github.com/articodeltd/angular-cesium","last_synced_at":"2025-12-30T09:24:44.587Z","repository":{"id":18837213,"uuid":"78973404","full_name":"articodeltd/angular-cesium","owner":"articodeltd","description":"JavaScript library for creating map based web apps using Cesium and Angular","archived":false,"fork":false,"pushed_at":"2024-02-13T18:09:08.000Z","size":26515,"stargazers_count":178,"open_issues_count":78,"forks_count":94,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-03-22T22:01:53.907Z","etag":null,"topics":["angular","angular2","cesium","javascript"],"latest_commit_sha":null,"homepage":"https://github.com/articodeltd/angular-cesium/settings/pages","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/articodeltd.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-01-14T23:14:18.000Z","updated_at":"2024-09-14T15:05:40.000Z","dependencies_parsed_at":"2024-06-18T17:11:03.999Z","dependency_job_id":null,"html_url":"https://github.com/articodeltd/angular-cesium","commit_stats":{"total_commits":1279,"total_committers":38,"mean_commits":33.6578947368421,"dds":0.6794370602032838,"last_synced_commit":"05701ddb3c4a9499d9aa7ebe044a1da08d2b3c96"},"previous_names":["tgftech/angular-cesium"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/articodeltd%2Fangular-cesium","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/articodeltd%2Fangular-cesium/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/articodeltd%2Fangular-cesium/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/articodeltd%2Fangular-cesium/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/articodeltd","download_url":"https://codeload.github.com/articodeltd/angular-cesium/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246110221,"owners_count":20725013,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular2","cesium","javascript"],"created_at":"2024-07-31T20:00:31.183Z","updated_at":"2025-12-30T09:24:44.559Z","avatar_url":"https://github.com/articodeltd.png","language":"TypeScript","readme":"# Angular-Cesium\n\u003cimg src=\"https://preview.ibb.co/cpDuwF/angular_cesium.png\" width=150 alt=\"Drawing\" style=\"margin:10\"/\u003e\n\n[![CircleCI](https://circleci.com/gh/articodeltd/angular-cesium.svg?style=shield)](https://circleci.com/gh/articodeltd/angular-cesium)\n[![npm version](https://img.shields.io/npm/v/angular-cesium.svg?style=flat-square)](https://www.npmjs.com/package/angular-cesium)\n\nCreate amazing mapping applications using Cesium and Angular components.\nAngular-Cesium is focused on high performance and simple usage.\nCheck out our [Docs](https://docs.angular-cesium.com) and our blog post [Intro to angular-cesium](https://cesium.com/blog/2019/03/28/angular-cesium/).\n\n## Getting started\n#### If you are using Angular CLI, you can add the angular-cesium library using schematics\n+ add `angular-cesium`:\n  ```bash\n  $ ng add angular-cesium\n  ```\n#### Manual installation details [here](https://docs.angular-cesium.com/getting-started/installation).\n\n## Demo\n+ You can try and learn about angular-cesium from our demo.\n+ The demo contains many examples, check out the `demo-map.component.ts` file.\n+ Run: \n    ```\n    $ git clone https://github.com/articodeltd/angular-cesium.git\n    $ cd angular-cesium\n    $ yarn\n    $ yarn demo:start\n    $ open http://localhost:4200\n    ```\n+ More demos:\n  + [Angular Cesium Demo](https://github.com/articodeltd/angular-cesium-demo)\n  + [GeoStrike](http://geo-strike.com) - [Repository](https://github.com/Webiks/GeoStrike)\n  + [GLO](https://glo.now.sh) - [Repository](https://github.com/sofwerx/glo-demo)\n  + [Safehouse](https://github.com/sofwerx/safehouse)\n  + [IMS](https://github.com/davidyaha/ims-workshop)\n\n\n## Basic example\n\n+ In your HTML file :\n  ```html\n    \u003cac-map\u003e\n        \u003cac-layer acFor=\"let plane of planes$\" [show]=\"showTracks\" [context]=\"this\"\u003e\n            \u003cac-billboard-desc props=\"{\n                      image: plane.image,\n                      position: plane.position\n                    }\"\u003e\n            \u003c/ac-billboard-desc\u003e\n            \u003cac-label-desc props=\"{\n                    position: plane.position,\n                    text: plane.name\n            }\"\u003e\n            \u003c/ac-label-desc\u003e\n        \u003c/ac-layer\u003e\n    \u003c/ac-map\u003e\n  ```\n+ `ac-map` creates the map\n+ `ac-layer` component represent an array of entities that will be displayed on the map.\n  + `acFor` attribute accepts an RxObserver `planes$` , `ac-layer` will subscribe to the observer\n  and will handle all updates for you.\n\n+ Add descriptions components to determine which entity to render,\n  in our example: `ac-billboard` and `ac-label` .\n  + This example will render a billboard(icon) and label for each plane in the stream.\n  + `props` accepts the same member options as cesium corresponding class.\n  For example `ac-billboard-desc` accepts same members as [cesium Billboard](https://cesiumjs.org/refdoc.html).\n\nFor better understading check out the [layer guide](https://docs.angular-cesium.com/core-concepts/ac-layer)\n\n## Supported Entity types\n+ billboard - [`ac-billboard-desc`](https://articodeltd.github.io/angular-cesium/components/AcBillboardDescComponent.html) / [`ac-billboard`](https://articodeltd.github.io/angular-cesium/components/AcBillboardComponent.html) / [`ac-billboard-primitive-desc`](https://articodeltd.github.io/angular-cesium/components/AcBillboardPrimitiveDescComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-billboard-example?embed=1\u0026file=src/app/billboard-layer-example/billboard-layer-example.component.ts)\n+ label - [`ac-label-desc`](https://articodeltd.github.io/angular-cesium/components/AcLabelDescComponent.html) / [`ac-label`](https://articodeltd.github.io/angular-cesium/components/AcLabelComponent.html) / [`ac-label-primitive-desc`](https://articodeltd.github.io/angular-cesium/components/AcLabelPrimitiveDescComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-demo-label-example?embed=1\u0026file=src/app/label-layer-example/label-layer-example.component.ts)\n+ polyline - [`ac-polyline-desc`](https://articodeltd.github.io/angular-cesium/components/AcPolylineDescComponent.html) / [`ac-polyline`](https://articodeltd.github.io/angular-cesium/components/AcPolylineComponent.html) / [`ac-polyline-primitive-desc`](https://articodeltd.github.io/angular-cesium/components/AcPolylinePrimitiveDescComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-polyline-example?embed=1\u0026file=src/app/polyline-layer-example/polyline-layer-example.component.ts)\n+ point - [`ac-point-desc`](https://articodeltd.github.io/angular-cesium/components/AcPointDescComponent.html) / [`ac-point`](https://articodeltd.github.io/angular-cesium/components/AcPointComponent.html) / [`ac-primitive-point`](https://articodeltd.github.io/angular-cesium/components/AcPointPrimitiveDescComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-point-example?embed=1\u0026file=src/app/point-layer-example/mock-data-provider.service.ts)\n+ ellipse - [`ac-ellipse-desc`](https://articodeltd.github.io/angular-cesium/components/AcEllipseDescComponent.html) / [`ac-ellipse`](https://articodeltd.github.io/angular-cesium/components/AcEllipseComponent.html) - [stackbliz](https://stackblitz.com/edit/angular-cesium-demo-ellipse?embed=1\u0026file=src/app/ellipse-layer/ellipse-layer-example.component.ts) - [stackblitz](https://stackblitz.com/edit/angular-cesium-demo-ellipse?embed=1\u0026file=src/app/ellipse-layer/ellipse-layer-example.component.ts)\n+ circle - [`ac-circle-desc`](https://articodeltd.github.io/angular-cesium/components/AcCircleDescComponent.html) / [`ac-circle`](https://articodeltd.github.io/angular-cesium/components/AcCircleComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-circle-example?embed=1\u0026file=src/app/circle-layer-example/circle-layer-example.component.ts) *Same API as ellipse, but accepting a radius instead of semiMajorAxis and semiMinorAxis - [stackblitz](https://stackblitz.com/edit/angular-cesium-circle-example?embed=1\u0026file=src/app/circle-layer-example/circle-layer-example.component.ts)\n+ polygon - [`ac-polygon-desc`](https://articodeltd.github.io/angular-cesium/components/AcPolygonDescComponent.html) / [`ac-polygon`](https://articodeltd.github.io/angular-cesium/components/AcPolygonComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-polygon-example?embed=1\u0026file=src/app/polygon-layer-example/polygon-layer-example.component.ts) \n+ model - [`ac-model-desc`](https://articodeltd.github.io/angular-cesium/components/AcModelDescComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-model-example?embed=1\u0026file=src/app/models-layer-example/models-layer-example.component.ts)\n+ box - [`ac-box-desc`](https://articodeltd.github.io/angular-cesium/components/AcBoxDescComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-box-example?embed=1\u0026file=src/app/boxes-layer/boxes-layer.component.ts)\n+ corridor -[`ac-corridor-desc`](https://articodeltd.github.io/angular-cesium/components/AcCorridorDescComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-demo?embed=1\u0026file=src/app/hippodrome-layer/hippodrome-layer-example.component.ts)\n+ cylinder - [`ac-cylinder-desc`](https://articodeltd.github.io/angular-cesium/components/AcCylinderDescComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-cylinder-example?embed=1\u0026file=src/app/cylinder-layer-example/cylinder-layer-example.component.ts)\n+ ellipsoid - [`ac-ellipsoid-desc`](https://articodeltd.github.io/angular-cesium/components/AcEllipsoidDescComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-ellipsoid-example?embed=1\u0026file=src/app/ellipsoid-layer-example/ellipsoid-layer-example.component.ts)\n+ polyline volume - [`ac-polyline-volume-desc`](https://articodeltd.github.io/angular-cesium/components/AcPolylineVolumeDescComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-polyline-volume-example?embed=1\u0026file=src/app/polyline-volume-layer-example/polyline-volume-layer-example.component.ts)\n+ wall - [`ac-wall-desc`](https://articodeltd.github.io/angular-cesium/components/AcWallDescComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-wall-example?embed=1\u0026file=src/app/wall-layer-example/wall-layer-example.component.ts)\n+ rectangle -[`ac-rectangle-decc`](https://articodeltd.github.io/angular-cesium/components/AcRectangleDescComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-rectangle-example?embed=1\u0026file=src/app/rectangle-layer-example/rectangle-layer-example.component.ts)\n* html - [`ac-html-desc`](https://articodeltd.github.io/angular-cesium/components/AcHtmlDescComponent.html) / [`ac-html`](https://articodeltd.github.io/angular-cesium/components/AcHtmlComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-html-example?embed=1\u0026file=src/app/html-layer/html-example.component.ts)\n+ arc -[`ac-arc-dec`](https://articodeltd.github.io/angular-cesium/components/AcArcDescComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-arc-example?embed=1\u0026file=src/app/arc-layer/arc-layer-example.component.ts)\n* array - [`ac-array-desc`](https://articodeltd.github.io/angular-cesium/components/AcArrayDescComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-demo-arrays?embed=1\u0026file=src/app/entities-with-arrays/entities-with-arrays-example.component.ts)\n* czmlPacket - [`ac-czml-desc`](https://articodeltd.github.io/angular-cesium/components/AcCzmlDescComponent.html)\n\n## Map Events\n`MapEventsManagerService` is a util service for managing all the map events (Click, Mouse_up...), it expose easy API for entity selection, event priority management\nand adds custom events (drag and drop, long press).\n\nUsage:\n```javascript\n@Component(...)\nexport class SomeComponent{\n  constructor(private eventManager: MapEventsManagerService){\n\n    // Input about the wanted event\n    const eventRegistration: EventRegistrationInput = {\n      event: CesiumEvent.LEFT_CLICK, // event type enum. [required!]\n      modifier: CesiumEventModifier.CTRL, // event modifier enum. [optional]\n      entityType: AcEntity, // raise event only if AcEntity is clicked. [optional]\n      priority: 0, // event priority, default 0 . [optional]\n      pick: PickOptions.PICK_FIRST // entity pick option, default PickOptions.NO_PICK. [optional]\n    };\n    const clickEvent = this.eventManager.register(eventRegistration).subscribe((result) =\u003e {\n          // The EventResult will contain:\n          // movement(screen location of the event), entities(your entities) , primitives( cesium primitives, like label,billboard...)\n    \t  console.log('map click', result.movement, 'primitives:', result.primitives, 'entities', result.entities);\n    \t});\n  }\n}\n```\n\nFor further details check the [map events guide](https://docs.angular-cesium.com/guides/map-events)\n\n### Map layers\nWith angular cesium you can define your map provider in a declarative way using `ac-map-layer-provider` :\n```html\n    \u003cac-map-layer-provider *ngIf=\"appSettingsService.showMapLayer\" [provider]=\"MapLayerProviderOptions.ArcGisMapServer\"\n                           [options]=\"{\n                                url : 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'\n                            }\"\u003e\n    \u003c/ac-map-layer-provider\u003e\n```\n- All cesium imagery map layers are supported , defined with `[provider]` according to the `MapLayerProviderOptions` enum\n- Pass additional configuration to `[options]` . `url` is mandatory.\n- Support multi map layers, map ordering and map image layer configuration.\n- Check out usage example from our demo [here](https://github.com/TGFTech/angular-cesium/blob/master/demo/app/components/maps-layer/maps-provider-example.component.html)\n\n### 3d Tiles\n```html\n   \u003cac-3d-tile-layer\n       *ngIf=\"appSettingsService.show3dtiles\"\n       [options]=\"{\n         url: 'https://beta.cesium.com/api/assets/1461?access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkYWJmM2MzNS02OWM5LTQ3OWItYjEyYS0xZmNlODM5ZDNkMTYiLCJpZCI6NDQsImFzc2V0cyI6WzE0NjFdLCJpYXQiOjE0OTkyNjQ3NDN9.vuR75SqPDKcggvUrG_vpx0Av02jdiAxnnB1fNf-9f7s'\n       }\"\u003e\n   \u003c/ac-3d-tile-layer\u003e\n```\n### Multiple maps support\nAngular Cesium supports integration of multiple maps, for more details [here](https://docs.angular-cesium.com/guides/multiple-maps-sync)\n\n### MapLayerProviderOptions Updates\n`MapboxStyleImageryProvider` has been added to `MapLayerProviderOptions` for mapBox styles support. \n\nComponent Usage:\n```javascript\n  import{ MapLayerProviderOptions } from 'angular-cesium'\n  @Component(...)\n  class SomeComponent{\n    mapboxStyleImageryProvider = MapLayerProviderOptions.MapboxStyleImageryProvider\n```\nTemplate Usage:\n```html\n\u003cac-map\u003e\n  \u003cac-map-layer-provider \n  [provider]=\"mapboxStyleImageryProvider\"\n  [options]=\"{\n      styleId:'style id from mapbox style dashboard item',\n      url:'https://api.mapbox.com/styles/v1/',\n      username:'your user name',\n      scaleFactor:'@2x',\n      tilesize:'512',\n      accessToken : 'your access token from map box'\n    }\"\u003e   \n  \u003c/ac-map-layer-provider\u003e \n\u003c/ac-map\u003e\n```\n\n### Camera\n#### [Camera Keyboard Control Service](https://docs.angular-cesium.com/guides/camera-keyboard-control)\nService that manages keyboard keys and execute actions per request. Inject the keyboard control service into any layer, under your ac-map component, And defined you keyboard handlers using setKeyboardControls.\n```javascript\n this.keyboardControlService.setKeyboardControls({\n      W: { action: KeyboardAction.CAMERA_FORWARD },\n      S: { action: KeyboardAction.CAMERA_BACKWARD },\n      D: { action: KeyboardAction.CAMERA_RIGHT },\n      A: { action: KeyboardAction.CAMERA_LEFT },\n    },\n\n```\n#### [CameraService](https://docs.angular-cesium.com/guides/camera-controls)\nUtil service that wraps cesium camera, exposes the scene's camera and screenSpaceCameraController.\n\n\n### MapsManagerService\nAngular Cesium extends cesium api and expose additional features, but if you want to use pure cesium api you can use [MapsManagerService](https://articodeltd.github.io/angular-cesium/injectables/MapsManagerService.html) to receive cesium [viewer](https://cesiumjs.org/Cesium/Build/Documentation/Viewer.html) or any other util service that was created by `ac-map`.\n```typescript\nclass MyComp {\nconstructor(mapsManagerService: MapsManagerService)\n\tconst viewer = mapsManagerService.getMap().getCesiumViewer();\n\tconst mapEventManager = mapsManagerService.getMap().getMapEventsManager();\n\tconst cameraService = mapsManagerService.getMap().getCameraService();\n}\n```\n`MapsManagerService` manages all of the maps. The service exposes a `getMap()` function that can be used to retrieve a specific map by id.\n\n#### [ZoomToRectangleService](https://docs.angular-cesium.com/widgets/zoomto-rectangle)\nA service that is used to activate a zooming tool that enables the user to draw a rectangle over the map and zoom into the drawn rectangle\n\n### Geometry Editors And Widgets\nPart of `AngularCesiumWidgetsModule` are useful geometry editors tool:\n+ [`CirlcesEditorService`](https://docs.angular-cesium.com/widgets/shape-editors/circle-editor) - for drawing circles\n+ [`EllipsesEditorService`](https://docs.angular-cesium.com/widgets/shape-editors/ellipse-editor) - for drawing ellipses and circles\n+ [`PolylinesEditorService`](https://docs.angular-cesium.com/widgets/shape-editors/polyline-editor) - for drawing polylines\n+ [`PolygonsEditorService`](https://docs.angular-cesium.com/widgets/shape-editors/polygon-editor) - for drawing polygons\n+ [`RectanglesEditorService`](https://docs.angular-cesium.com/widgets/shape-editors/rectangle-editor) - for drawing rectangles\n+ [`HippodromeEditorService`](https://docs.angular-cesium.com/widgets/shape-editors/hippodrome-editor) - for drawing hippodromes (path in cesium)\n\nCheck out the [Geometry Editors Doc](https://docs.angular-cesium.com/widgets/shape-editors)\n\n### ScreenshotService\nTake screenshot of your cesium globe.\n\n### ContextMenuService - [stackblitz](https://stackblitz.com/edit/angular-cesium-context-menu-example?embed=1\u0026file=src/app/context-menu-layer/context-menu-layer.component.ts)\ncreate any custom angular component and anchor it to a map position, [context menu guide](https://docs.angular-cesium.com/guides/context-menu-on-the-map).\n\n## Documents\n+ #### Docs https://docs.angular-cesium.com/\n+ #### [Api Docs](https://articodeltd.github.io/angular-cesium/)\n\n## License\n[Mit License](https://opensource.org/licenses/MIT)\n\n## Support\nAngular Cesium is an open source project, feel free to open issues,ask questions and open PRs.\nFor additional support options contact us: [contact@articode.co](mailto:\\\\contact@articode.co).\n\nArticode is a software company that specializes in GIS solutions and is the creator and the maintainer of angular-cesium.\nFeel free to contact us for consulting or any business endeavors.\n","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farticodeltd%2Fangular-cesium","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farticodeltd%2Fangular-cesium","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farticodeltd%2Fangular-cesium/lists"}