{"_id":"@delmquis/angular-cesium","name":"@delmquis/angular-cesium","dist-tags":{"latest":"19.2.10"},"versions":{"19.2.10":{"name":"@delmquis/angular-cesium","version":"19.2.10","license":"MIT","description":"Angular v19 library for working with Cesium, fork of https://github.com/articodeltd/angular-cesium.","repository":{"type":"git","url":"git+https://github.com/delmquis/angular-cesium.git","directory":"projects/angular-cesium"},"keywords":["Angular","Cesium","Angular Cesium"],"peerDependencies":{"@angular/common":"^19.2.10","@angular/core":"^19.2.10","cesium":"1.93","lodash":"^4.17.21","rxjs":"~6.6.7"},"dependencies":{"@delmquis/angular2parse":"^19.2.10","@types/geodesy":"^1.1.3","geodesy":"^1.1.3","json-string-mapper":"^1.0.0","primitive-primitives":"0.0.6","tslib":"^2.4.1"},"optionalDependencies":{"heatmap.js":"^2.0.5"},"schematics":"./schematics/collection.json","module":"fesm2022/delmquis-angular-cesium.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","default":"./fesm2022/delmquis-angular-cesium.mjs"}},"sideEffects":false,"_id":"@delmquis/angular-cesium@19.2.10","gitHead":"bd0019865d5eb02ef721cd3ebf15d6f3a33be33e","bugs":{"url":"https://github.com/delmquis/angular-cesium/issues"},"homepage":"https://github.com/delmquis/angular-cesium#readme","_nodeVersion":"22.13.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-vF3fA+HaqjhPEHPRZB1261OJMegw3ioUw12hMcHT/+ZKEFhdVzlUKmo3lHwycVWbpNjMZkLtwurTJLkgW0vqhA==","shasum":"1f0a502887d3b214bb12f9d02c608ab543da078a","tarball":"https://registry.npmjs.org/@delmquis/angular-cesium/-/angular-cesium-19.2.10.tgz","fileCount":228,"unpackedSize":2065148,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIFXjX4eqJTnaUmdM0Q7xKPyFWcYFmAi1NT4uo1F6/g5PAiEAsxlThBONUNmwcyPOeVbC7maLayfmXtBra9BqrannbXQ="}]},"_npmUser":{"name":"delmquis","email":"delmquis@live.com"},"directories":{},"maintainers":[{"name":"delmquis","email":"delmquis@live.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/angular-cesium_19.2.10_1746710548315_0.754428323230458"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-08T13:22:28.243Z","19.2.10":"2025-05-08T13:22:28.541Z","modified":"2025-05-08T13:22:28.762Z"},"maintainers":[{"name":"delmquis","email":"delmquis@live.com"}],"description":"Angular v19 library for working with Cesium, fork of https://github.com/articodeltd/angular-cesium.","homepage":"https://github.com/delmquis/angular-cesium#readme","keywords":["Angular","Cesium","Angular Cesium"],"repository":{"type":"git","url":"git+https://github.com/delmquis/angular-cesium.git","directory":"projects/angular-cesium"},"bugs":{"url":"https://github.com/delmquis/angular-cesium/issues"},"license":"MIT","readme":"# Angular-Cesium\r\n<img src=\"https://preview.ibb.co/cpDuwF/angular_cesium.png\" width=150 alt=\"Drawing\" style=\"margin:10\"/>\r\n\r\n**This is a fork of AuScope's fork of Articode's \"angular-cesium\", adapted for Angular v18 [Angular Cesium](https://github.com/articodeltd/angular-cesium)**\r\n\r\n**Thank you to AuScope for upgrading to Angular v18 [Angular Cesium](https://github.com/AuScope/angular-cesium)**\r\n\r\n**NB: Building schematics will fail because @compodoc/compodoc v1.1.19 only supports Angular v13, but the latest unreleased code changes do support v15.**\r\n\r\nCreate amazing mapping applications using Cesium and Angular components.\r\nAngular-Cesium is focused on high performance and simple usage.\r\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/).\r\n\r\n## Getting started\r\n#### If you are using Angular CLI, you can add the angular-cesium library using schematics\r\n+ add `angular-cesium`:\r\n  ```bash\r\n  $ ng add angular-cesium\r\n  ```\r\n#### Manual installation details [here](https://docs.angular-cesium.com/getting-started/installation).\r\n\r\n## Demo\r\n+ You can try and learn about angular-cesium from our demo.\r\n+ The demo contains many examples, check out the `demo-map.component.ts` file.\r\n+ Run: \r\n    ```\r\n    $ git clone https://github.com/articodeltd/angular-cesium.git\r\n    $ cd angular-cesium\r\n    $ yarn\r\n    $ yarn demo:start\r\n    $ open http://localhost:4200\r\n    ```\r\n+ More demos:\r\n  + [Angular Cesium Demo](https://github.com/articodeltd/angular-cesium-demo)\r\n  + [GeoStrike](http://geo-strike.com) - [Repository](https://github.com/Webiks/GeoStrike)\r\n  + [GLO](https://glo.now.sh) - [Repository](https://github.com/sofwerx/glo-demo)\r\n  + [Safehouse](https://github.com/sofwerx/safehouse)\r\n  + [IMS](https://github.com/davidyaha/ims-workshop)\r\n\r\n\r\n## Basic example\r\n\r\n+ In your HTML file :\r\n  ```html\r\n    <ac-map>\r\n        <ac-layer acFor=\"let plane of planes$\" [show]=\"showTracks\" [context]=\"this\">\r\n            <ac-billboard-desc props=\"{\r\n                      image: plane.image,\r\n                      position: plane.position\r\n                    }\">\r\n            </ac-billboard-desc>\r\n            <ac-label-desc props=\"{\r\n                    position: plane.position,\r\n                    text: plane.name\r\n            }\">\r\n            </ac-label-desc>\r\n        </ac-layer>\r\n    </ac-map>\r\n  ```\r\n+ `ac-map` creates the map\r\n+ `ac-layer` component represent an array of entities that will be displayed on the map.\r\n  + `acFor` attribute accepts an RxObserver `planes$` , `ac-layer` will subscribe to the observer\r\n  and will handle all updates for you.\r\n\r\n+ Add descriptions components to determine which entity to render,\r\n  in our example: `ac-billboard` and `ac-label` .\r\n  + This example will render a billboard(icon) and label for each plane in the stream.\r\n  + `props` accepts the same member options as cesium corresponding class.\r\n  For example `ac-billboard-desc` accepts same members as [cesium Billboard](https://cesiumjs.org/refdoc.html).\r\n\r\nFor better understading check out the [layer guide](https://docs.angular-cesium.com/core-concepts/ac-layer)\r\n\r\n## Supported Entity types\r\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&file=src/app/billboard-layer-example/billboard-layer-example.component.ts)\r\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&file=src/app/label-layer-example/label-layer-example.component.ts)\r\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&file=src/app/polyline-layer-example/polyline-layer-example.component.ts)\r\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&file=src/app/point-layer-example/mock-data-provider.service.ts)\r\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&file=src/app/ellipse-layer/ellipse-layer-example.component.ts) - [stackblitz](https://stackblitz.com/edit/angular-cesium-demo-ellipse?embed=1&file=src/app/ellipse-layer/ellipse-layer-example.component.ts)\r\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&file=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&file=src/app/circle-layer-example/circle-layer-example.component.ts)\r\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&file=src/app/polygon-layer-example/polygon-layer-example.component.ts) \r\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&file=src/app/models-layer-example/models-layer-example.component.ts)\r\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&file=src/app/boxes-layer/boxes-layer.component.ts)\r\n+ corridor -[`ac-corridor-desc`](https://articodeltd.github.io/angular-cesium/components/AcCorridorDescComponent.html) - [stackblitz](https://stackblitz.com/edit/angular-cesium-demo?embed=1&file=src/app/hippodrome-layer/hippodrome-layer-example.component.ts)\r\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&file=src/app/cylinder-layer-example/cylinder-layer-example.component.ts)\r\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&file=src/app/ellipsoid-layer-example/ellipsoid-layer-example.component.ts)\r\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&file=src/app/polyline-volume-layer-example/polyline-volume-layer-example.component.ts)\r\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&file=src/app/wall-layer-example/wall-layer-example.component.ts)\r\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&file=src/app/rectangle-layer-example/rectangle-layer-example.component.ts)\r\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&file=src/app/html-layer/html-example.component.ts)\r\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&file=src/app/arc-layer/arc-layer-example.component.ts)\r\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&file=src/app/entities-with-arrays/entities-with-arrays-example.component.ts)\r\n* czmlPacket - [`ac-czml-desc`](https://articodeltd.github.io/angular-cesium/components/AcCzmlDescComponent.html)\r\n\r\n## Map Events\r\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\r\nand adds custom events (drag and drop, long press).\r\n\r\nUsage:\r\n```javascript\r\n@Component(...)\r\nexport class SomeComponent{\r\n  constructor(private eventManager: MapEventsManagerService){\r\n\r\n    // Input about the wanted event\r\n    const eventRegistration: EventRegistrationInput = {\r\n      event: CesiumEvent.LEFT_CLICK, // event type enum. [required!]\r\n      modifier: CesiumEventModifier.CTRL, // event modifier enum. [optional]\r\n      entityType: AcEntity, // raise event only if AcEntity is clicked. [optional]\r\n      priority: 0, // event priority, default 0 . [optional]\r\n      pick: PickOptions.PICK_FIRST // entity pick option, default PickOptions.NO_PICK. [optional]\r\n    };\r\n    const clickEvent = this.eventManager.register(eventRegistration).subscribe((result) => {\r\n          // The EventResult will contain:\r\n          // movement(screen location of the event), entities(your entities) , primitives( cesium primitives, like label,billboard...)\r\n    \t  console.log('map click', result.movement, 'primitives:', result.primitives, 'entities', result.entities);\r\n    \t});\r\n  }\r\n}\r\n```\r\n\r\nFor further details check the [map events guide](https://docs.angular-cesium.com/guides/map-events)\r\n\r\n### Map layers\r\nWith angular cesium you can define your map provider in a declarative way using `ac-map-layer-provider` :\r\n```html\r\n    <ac-map-layer-provider *ngIf=\"appSettingsService.showMapLayer\" [provider]=\"MapLayerProviderOptions.ArcGisMapServer\"\r\n                           [options]=\"{\r\n                                url : 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'\r\n                            }\">\r\n    </ac-map-layer-provider>\r\n```\r\n- All cesium imagery map layers are supported , defined with `[provider]` according to the `MapLayerProviderOptions` enum\r\n- Pass additional configuration to `[options]` . `url` is mandatory.\r\n- Support multi map layers, map ordering and map image layer configuration.\r\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)\r\n\r\n### 3d Tiles\r\n```html\r\n   <ac-3d-tile-layer\r\n       *ngIf=\"appSettingsService.show3dtiles\"\r\n       [options]=\"{\r\n         url: 'https://beta.cesium.com/api/assets/1461?access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkYWJmM2MzNS02OWM5LTQ3OWItYjEyYS0xZmNlODM5ZDNkMTYiLCJpZCI6NDQsImFzc2V0cyI6WzE0NjFdLCJpYXQiOjE0OTkyNjQ3NDN9.vuR75SqPDKcggvUrG_vpx0Av02jdiAxnnB1fNf-9f7s'\r\n       }\">\r\n   </ac-3d-tile-layer>\r\n```\r\n### Multiple maps support\r\nAngular Cesium supports integration of multiple maps, for more details [here](https://docs.angular-cesium.com/guides/multiple-maps-sync)\r\n\r\n### MapLayerProviderOptions Updates\r\n`MapboxStyleImageryProvider` has been added to `MapLayerProviderOptions` for mapBox styles support. \r\n\r\nComponent Usage:\r\n```javascript\r\n  import{ MapLayerProviderOptions } from 'angular-cesium'\r\n  @Component(...)\r\n  class SomeComponent{\r\n    mapboxStyleImageryProvider = MapLayerProviderOptions.MapboxStyleImageryProvider\r\n```\r\nTemplate Usage:\r\n```html\r\n<ac-map>\r\n  <ac-map-layer-provider \r\n  [provider]=\"mapboxStyleImageryProvider\"\r\n  [options]=\"{\r\n      styleId:'style id from mapbox style dashboard item',\r\n      url:'https://api.mapbox.com/styles/v1/',\r\n      username:'your user name',\r\n      scaleFactor:'@2x',\r\n      tilesize:'512',\r\n      accessToken : 'your access token from map box'\r\n    }\">   \r\n  </ac-map-layer-provider> \r\n</ac-map>\r\n```\r\n\r\n### Camera\r\n#### [Camera Keyboard Control Service](https://docs.angular-cesium.com/guides/camera-keyboard-control)\r\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.\r\n```javascript\r\n this.keyboardControlService.setKeyboardControls({\r\n      W: { action: KeyboardAction.CAMERA_FORWARD },\r\n      S: { action: KeyboardAction.CAMERA_BACKWARD },\r\n      D: { action: KeyboardAction.CAMERA_RIGHT },\r\n      A: { action: KeyboardAction.CAMERA_LEFT },\r\n    },\r\n\r\n```\r\n#### [CameraService](https://docs.angular-cesium.com/guides/camera-controls)\r\nUtil service that wraps cesium camera, exposes the scene's camera and screenSpaceCameraController.\r\n\r\n\r\n### MapsManagerService\r\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`.\r\n```typescript\r\nclass MyComp {\r\nconstructor(mapsManagerService: MapsManagerService)\r\n\tconst viewer = mapsManagerService.getMap().getCesiumViewer();\r\n\tconst mapEventManager = mapsManagerService.getMap().getMapEventsManager();\r\n\tconst cameraService = mapsManagerService.getMap().getCameraService();\r\n}\r\n```\r\n`MapsManagerService` manages all of the maps. The service exposes a `getMap()` function that can be used to retrieve a specific map by id.\r\n\r\n#### [ZoomToRectangleService](https://docs.angular-cesium.com/widgets/zoomto-rectangle)\r\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\r\n\r\n### Geometry Editors And Widgets\r\nPart of `AngularCesiumWidgetsModule` are useful geometry editors tool:\r\n+ [`CirlcesEditorService`](https://docs.angular-cesium.com/widgets/shape-editors/circle-editor) - for drawing circles\r\n+ [`EllipsesEditorService`](https://docs.angular-cesium.com/widgets/shape-editors/ellipse-editor) - for drawing ellipses and circles\r\n+ [`PolylinesEditorService`](https://docs.angular-cesium.com/widgets/shape-editors/polyline-editor) - for drawing polylines\r\n+ [`PolygonsEditorService`](https://docs.angular-cesium.com/widgets/shape-editors/polygon-editor) - for drawing polygons\r\n+ [`RectanglesEditorService`](https://docs.angular-cesium.com/widgets/shape-editors/rectangle-editor) - for drawing rectangles\r\n+ [`HippodromeEditorService`](https://docs.angular-cesium.com/widgets/shape-editors/hippodrome-editor) - for drawing hippodromes (path in cesium)\r\n\r\nCheck out the [Geometry Editors Doc](https://docs.angular-cesium.com/widgets/shape-editors)\r\n\r\n### ScreenshotService\r\nTake screenshot of your cesium globe.\r\n\r\n### ContextMenuService - [stackblitz](https://stackblitz.com/edit/angular-cesium-context-menu-example?embed=1&file=src/app/context-menu-layer/context-menu-layer.component.ts)\r\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).\r\n\r\n## Documents\r\n+ #### Docs https://docs.angular-cesium.com/\r\n+ #### [Api Docs](https://articodeltd.github.io/angular-cesium/)\r\n\r\n## License\r\n[Mit License](https://opensource.org/licenses/MIT)\r\n\r\n## Support\r\nAngular Cesium is an open source project, feel free to open issues,ask questions and open PRs.\r\nFor additional support options contact us: [contact@articode.co](mailto:\\\\contact@articode.co).\r\n\r\nArticode is a software company that specializes in GIS solutions and is the creator and the maintainer of angular-cesium.\r\nFeel free to contact us for consulting or any business endeavors.\r\n","readmeFilename":"README.md","_rev":"1-bf38188345f482d0f4cd321e8d347a73"}