CODEWITHSUNDEEP
javascriptmapscesiumjs
KateJean
KateJean

Reputation: 428

Cesium -- on click, change map point to standard marker with icon

I am attempting to mimic the the functionality one would see using the Waze LiveMap (https://www.waze.com/livemap) in Cesium. When a point is clicked, it is converted to a marker with an icon.

I've attempted a few different things with varying levels of success and I'm at my wits end. Does anyone have a good suggestion as to how I can proceed?

Upvotes: 1

Views: 2993

Answers (1)

emackey
emackey

Reputation: 12448

There are a couple different ways of doing this, some high-level and some lower-level. The high-level one is easiest so I'll start there. The Cesium Viewer fires an event called selectedEntityChanged when its own selection changes, and you can wire that up to toggle billboard show flags on and off.

Here's a demo. For this demo, I took the original map pins demo and added some lines of code: I turned off the show flags for all the billboards at the start, I added points to stand in for the now-hidden billboards, and I added the following block of code to toggle the billboard show flags when selected, like this:

var lastSelectedPin;
viewer.selectedEntityChanged.addEventListener(function(newEntity) {
    if (lastSelectedPin && lastSelectedPin.billboard) {
        lastSelectedPin.billboard.show = false;
    }
    lastSelectedPin = newEntity;
    if (lastSelectedPin && lastSelectedPin.billboard) {
        lastSelectedPin.billboard.show = true;
    }
});

This uses Cesium Viewer's own selection system, but toggles the billboard show flag to appear when selected and disappear when de-selected.

Alternatively, you can dig into Cesium's lower levels for finer control, but there will be a longer learning curve. The Picking Demo shows off several types of picking operations, including scene.pick, scene.drillPick, and camera.pickEllipsoid, which offer various ways to detect what contents exist at a particular screen location. Often these functions are called in response to mouse movements or clicks, or touch/pointer events, to see what the user is interacting with.

Upvotes: 1

Related Questions