I am trying to get a marker/label/tooltip placed on top of a 3d building but cannot seem to find a solution. I’ve started looking at Threebox and seem to have been able to place a tooltip on the building following the example given in Threebox docs. The issue here is this section of the example code places the popup at the bottom of the building, whereas the tooltip is at the top.
function onSelectedFeatureChange(e) {
let feature = e.detail;
if (feature && feature.state && feature.state.select) {
if (popup) popup.remove();
let center = [];
let coords = tb.getFeatureCenter(feature, null, 0);
center.push([coords[0], coords[1]]);
//TODO: this creates a Mapbox popup in the same coords the Threebox popup to see the difference
popup = new mapboxgl.Popup({ offset: 0 })
.setLngLat(center[0].slice())
.setHTML('<strong>' + (feature.id || feature.type) + '</strong >')
.addTo(map);
let geoJson = {
"geometry": feature.geometry,
"type": "Feature",
"properties": feature.properties
}
console.log(JSON.stringify(geoJson, null, 2))
}
}
-
How can I place the popup in the same position as the tooltip?
-
If I am not able to place the popup in the location of the tooltip, how can I change the value inside of the tooltip?
-
If I cannot change the value inside of the tooltip, how do I add a new tooltip to the selected building? The
feature
that is returned in theonSelectedFeatureChange
function has aaddTooltip
method, but it requires anobj
in order to place the tooltip.