1. A concise explanation of the problem you’re experiencing.
Under http://www.deepship.ai/#/home I have leafet listmarkers installed and a flyto event.
Under http://www.deepship.ai/#/globe
I have a 3D setup where i installed a server side event script that streams czml data to all targets that are 50 km from the camera.
This also updates a list of ships which is updated once a second.
Nevertheless I can not figure out how to get a flyto context in the DOM domain of Cesium or anything similar to the homebutton event.
2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.
I am in Angular 6, Cesium 1.44
since we are streaming data, the lat lon/data is dynamic.
In the component:
I call an updated timer.
ngOnInit() {
const timerc = timer(10000, 10000);
timerc.subscribe(t => {
this.ticks = t;
this.forceUpdate();
});
}
I declare some dom elements.
public element = document.getElementsByClassName(“cesium-widget”);
public para = document.createElement(“DIV”);
public textnode = document.createElement(“TABLE”);
this.para.appendChild(this.textnode);
this.para.setAttribute(“class”, “foo”);
this.element[0].appendChild(this.para);
The update function generates the html every. The specifics are a bit of a left over from various attempts. Here one with knock out.
forceUpdate() {
var mytext += ‘
this.textnode.innerHTML = mytext;
for (var j = 0; j < this.viewer.dataSources._dataSources[0]._entityCollection._entities.length; ++j) {
if (j < 20) {
mytext += ’
}
}
this.textnode.innerHTML = mytext;
}
Knockout succeeds when I add an element static. But dynamic I can not get anything out of the the inputs, buttons and so on.
// The viewModel tracks the state of our mini application.
var viewModel = {
lalaa: 1,
alpha: 0.1
};
// Convert the viewModel members into knockout observables.
Cesium.knockout.track(viewModel);
// var wohin = document.getElementById();
console.log(this.textnode);
//Cesium.knockout.cleanNode(wohin);
Cesium.knockout.applyBindings(viewModel, this.textnode);
Cesium.knockout.getObservable(viewModel, ‘alpha’).subscribe(
function (newValue) {
console.log(newValue);
}
);
Cesium.knockout.getObservable(viewModel, ‘lalaa’).subscribe(
function (newValue) {
console.log(newValue);
}
);
I tried several things dynamically
Cesium.knockout.cleanNode(this.textnode);
Cesium.knockout.applyBindings(viewModel, this.textnode);
Stuff like this on the Knockout page doesn’t work either. What is this gets confused as angular has its own management.
http://knockoutjs.com/examples/clickCounter.html
I also tried
Cesium.Camera.prototype.flyTo(dest)
I saw the home button in Cesium is linked to data-bind:click:command. But I don’t know what command is or how to access this. Any similar attempts failed on my side in my dynamically generated list.
3. Context. Why do you need to do this? We might know a better way to accomplish your goal.
I essentially just want any way to dynamically generate a fly to button to an dynamically generated entity in a list like Leaflet.listmarkers.
They do it via L.Domevent.
I don’t care how 
I am just two months into Angular. javascript, typescript Cesium and Leaflet so apologies if I oversaw anything glaringly obvious. The last 3d stuff I did was in C++ (Ogre3d), Shockwave lingo, some Unity etc
4. The Cesium version you’re using, your operating system and browser.
Windows 10 64Chrome Version 66.0.3359.139 (Official Build) (64-bit)
Visual studio Code:
Version 1.23.0
Commit 7c7da59c2333a1306c41e6e7b68d7f0caa7b3d45
Date 2018-05-03T16:44:55.614Z
Shell 1.7.12
Renderer 58.0.3029.110
Node 7.9.0
Architecture x64
package.json
{
“name”: “deepship”,
“version”: “0.0.0”,
“license”: “Commercial”,
“scripts”: {
“ng”: “ng”,
“start”: “ng serve”,
“build”: “ng build --prod”,
“test”: “ng test”,
“lint”: “ng lint”,
“e2e”: “ng e2e”
},
“private”: true,
“dependencies”: {
“@angular/animations”: “^5.2.9”,
“@angular/cdk”: “^5.2.4”,
“@angular/common”: “^5.2.0”,
“@angular/compiler”: “^5.2.0”,
“@angular/core”: “^5.2.9”,
“@angular/flex-layout”: “^5.0.0-beta.14”,
“@angular/forms”: “^5.2.0”,
“@angular/http”: “^5.2.0”,
“@angular/material”: “^5.2.4”,
“@angular/platform-browser”: “^5.2.9”,
“@angular/platform-browser-dynamic”: “^5.2.9”,
“@angular/router”: “^5.2.0”,
“@asymmetrik/ngx-leaflet”: “^3.0.2”,
“@asymmetrik/ngx-leaflet-markercluster”: “^1.0.0”,
“@mapbox/point-geometry”: “^0.1.0”,
“@mapbox/vector-tile”: “^1.3.1”,
“@types/eventsource”: “^1.0.1”,
“@types/geojson”: “^7946.0.2”,
“@types/leaflet.markercluster”: “^1.0.3”,
“angular-cesium”: “0.0.48”,
“angular-svg-icon”: “^5.0.0”,
“angular2parse”: “^1.0.6”,
“bootstrap”: “^4.0.0”,
“cesium”: “^1.44.0”,
“core-js”: “^2.4.1”,
“event-source”: “^0.1.1”,
“event-source-polyfill”: “0.0.12”,
“eventsource”: “^1.0.5”,
“hammerjs”: “^2.0.8”,
“http”: “0.0.0”,
“https”: “^1.0.0”,
“jquery”: “^3.3.1”,
“leaflet”: “git+https://github.com/Leaflet/Leaflet.git#v1.0.3”,
“leaflet-list-markers”: “git+https://github.com/stefanocudini/leaflet-list-markers.git”,
“leaflet-rotatedmarker”: “^0.2.0”,
“leaflet.markercluster”: “^1.3.0”,
“leaflet.vectorgrid”: “^1.3.0”,
“material-design-icons”: “^3.0.1”,
“npm”: “^6.0.0”,
“popper”: “^1.0.1”,
“rxjs”: “^6.1.0”,
“rxjs-compat”: “^6.1.0”,
“svg-country-flags”: “^1.2.1”,
“zone.js”: “^0.8.19”
},
“devDependencies”: {
“@angular/cli”: “^6.0.0”,
“@angular/compiler-cli”: “^5.2.0”,
“@angular/language-service”: “^5.2.0”,
“@types/jasmine”: “~2.8.3”,
“@types/jasminewd2”: “~2.0.2”,
“@types/leaflet”: “^1.2.6”,
“@types/node”: “~6.0.60”,
“codelyzer”: “^4.0.1”,
“jasmine-core”: “~2.8.0”,
“jasmine-spec-reporter”: “~4.2.1”,
“karma”: “~2.0.0”,
“karma-chrome-launcher”: “~2.2.0”,
“karma-coverage-istanbul-reporter”: “^1.2.1”,
“karma-jasmine”: “~1.1.0”,
“karma-jasmine-html-reporter”: “^0.2.2”,
“protractor”: “~5.1.2”,
“ts-node”: “~4.1.0”,
“tslint”: “~5.9.1”,
“typescript”: “~2.5.3”,
“@angular-devkit/build-angular”: “~0.6.0”
}
}
