Moving overlayed div with selected billboard

[tcl...@gmail.com]

Hi,

I'm loading a bunch of billboards via Cesium.GeoJsonDataSource. When clicking the billboard, I'm showing an absolute positioned div on top of the billboard. I do this using wgs84ToWindowCoordinates.

What I'm trying to do now is to have the div follow the billboard when panning and zooming, however, I'm not getting the results I'm expecting when subscribing to the scene.preRender event to get the position. The first log I'm getting gives me a selected entity with position coordinates. But from the second one, I seem to be logging the billboard, and I can't seem to get coordinates from that.

Can anyone point me in the right direction on how to get the correct coordinates for the selected entity/billboard in the preRender event?

Thanks in advance!

I'll add my code below:

function sourdoughMap() {
if (!$('.page-library-map').length) {
return;
}
var viewer = new Cesium.Viewer('cesiumContainer', {
animation: false,
baseLayerPicker: false,
fullscreenButton: false,
geocoder: false,
homeButton: false,
infoBox: false,
sceneModePicker: false,
selectionIndicator: false,
timeline: false,
navigationHelpButton: false,
navigationInstructionsInitiallyVisible: false,
imageryProvider: new Cesium.UrlTemplateImageryProvider({
url : 'XXXX',
credit : 'Mapbox',
tilingScheme : new Cesium.WebMercatorTilingScheme(),
maximumLevel : 20
})
});

var dataSource = new Cesium.GeoJsonDataSource();
var promise = dataSource.load('/profiles/did/themes/didtheme/json/geodata.json');

promise.then(function(dataSource) {
viewer.dataSources.add(dataSource);

var entities = dataSource.entities.values;

for (var i = 0; i < entities.length; i++) {
var entity = entities[i];
entity.point = undefined;
entity.billboard = new Cesium.BillboardGraphics({
image: new Cesium.ConstantProperty("/profiles/did/themes/didtheme/images/sourdough/icon-perfect.svg"),
scaleByDistance: new Cesium.NearFarScalar(1.5e2, 0.5, 1.5e7, 0.15),
width: 56,
height: 56
});
};

var scene = viewer.scene;
scene.preRender.addEventListener(function(scene, time) {
if(viewer.selectedEntity) {
console.log(viewer.selectedEntity.options);
}
})

var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);

handler.setInputAction(function(event) {
var pickedObject = scene.pick(event.position);
if(Cesium.defined(pickedObject)) {
var pos = Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, pickedObject.primitive.position);

if ($('#cesiumContainer .infobox').length) {
$('#cesiumContainer .infobox').fadeOut(250, function() {
$(this).remove();
$('#cesiumContainer').append('<div class="infobox"><div class="balloonshadow"></div><div class="title">Name of the sourdough</div><div class="badges-wrapper"><div class="badge-perfect achieved"></div><div class="badge-featured"></div><div class="badge-library"></div></div><div class="explore"><a class="button">Explore</a></div></div>');
$('.infobox').css({left: Math.round(pos.x), top: Math.round(pos.y)});
});
} else {
$('#cesiumContainer').append('<div class="infobox"><div class="balloonshadow"></div><div class="title">Name of the sourdough</div><div class="badges-wrapper"><div class="badge-perfect achieved"></div><div class="badge-featured"></div><div class="badge-library"></div></div><div class="explore"><a class="button">Explore</a></div></div>');
$('.infobox').css({left: Math.round(pos.x), top: Math.round(pos.y)});
}
}

}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
});
}

[Hannah Pinkos]

Hello,

To get the position, you need to use position.getValue(time)

Here is an example:

scene.preRender.addEventListener(function(scene, time) {
  if(viewer.selectedEntity) {
    var position = viewer.selectedEntity.position.getValue(time); //Cartesian3 position
  }
});

Best,

Hannah

[tcl...@gmail.com]

That does the trick, thank you!

[tcl...@gmail.com]

I have a followup question. The billboard graphics quality is not up to the standard we'd like to have in this site. I tried png and svg both, but the billboards are blurry and jagged. Sometimes there's also a small black border visible. So the question is twofold:
1. Is there any way to up the render quality for these billboards, or
2. Is there a way to detect if a billboard is behind or in front of the globe. In that case, I'd just make the billboard transparent and place my own divs on top.

Thanks!

[Hannah Pinkos]

I'm unaware of any poor rendering quality issues with billboards.  Could you take a screenshot so I can see what you're talking about?

The transparent billboard problem is a known issue. We have an issue open here to look into it: https://github.com/AnalyticalGraphicsInc/cesium/issues/2130

Best,

Hannah

[tcl...@gmail.com]

Sure, here it is: http://www.didstaging.com/tmp/billboards.png

The left icon is what is rendered by the billboard, the right one is one that is placed on top of the canvas.

[Hannah Pinkos]

Thanks.  I'm not sure what would be causing that, so I opened up a new issue: https://github.com/AnalyticalGraphicsInc/cesium/issues/4235

-Hannah

[Hannah Pinkos]

Lively discussion on GitHub over how to fix this problem. 

Could you attach the icon you're using and the position it's located at so we can test with it?

Thanks!

-Hannah

On Thursday, August 25, 2016 at 10:48:03 AM UTC-4, tcl...@gmail.com wrote:

[tcl...@gmail.com]

I can confirm the rendering is a lot better when using png instead of svg. Fully zoomed in (at 0.5 scale since it's retina-ready) it's workable (http://www.didstaging.com/tmp/cesium/billboards2.png). However, when zooming out and panning it still shows some issues.

Here are the images, both png and svg, that I used:

http://www.didstaging.com/tmp/cesium/icon-featured.svg
http://www.didstaging.com/tmp/cesium/icon-perfect.svg
http://www.didstaging.com/tmp/cesium/icon-library.svg

http://www.didstaging.com/tmp/cesium/icon-sourdo...@2x.png
http://www.didstaging.com/tmp/cesium/icon-sourdo...@2x.png
http://www.didstaging.com/tmp/cesium/icon-sourdo...@2x.png

[Hannah Pinkos]

Great, thank you.  I've added more details to the issue.

-Hannah

On Friday, August 26, 2016 at 4:38:24 AM UTC-4, tcl...@gmail.com wrote:

On Thursday, August 25, 2016 at 10:31:28 PM UTC+2, Hannah Pinkos wrote:
> Lively discussion on GitHub over how to fix this problem. 
> Could you attach the icon you're using and the position it's located at so we can test with it?
>
>
> Thanks!
>
>
> -Hannah
>
> On Thursday, August 25, 2016 at 10:48:03 AM UTC-4, tcl...@gmail.com wrote:Sure, here it is: http://www.didstaging.com/tmp/billboards.png
> The left icon is what is rendered by the billboard, the right one is one that is placed on top of the canvas.

I can confirm the rendering is a lot better when using png instead of svg. Fully zoomed in (at 0.5 scale since it's retina-ready) it's workable (http://www.didstaging.com/tmp/cesium/billboards2.png). However, when zooming out and panning it still shows some issues.

Here are the images, both png and svg, that I used:

http://www.didstaging.com/tmp/cesium/icon-featured.svg
http://www.didstaging.com/tmp/cesium/icon-perfect.svg
http://www.didstaging.com/tmp/cesium/icon-library.svg

http://www.didstaging.com/tmp/cesium/icon-sourdough-feat...@2x.png
http://www.didstaging.com/tmp/cesium/icon-sourdough-perfect@2x.png
http://www.didstaging.com/tmp/cesium/icon-sourdough-library@2x.png