GreenInfo-Network / seattle-building-dashboard

Energy benchmarking for Seattle
https://greeninfo-network.github.io/seattle-building-dashboard/
ISC License
1 stars 0 forks source link

Add tooltip with building name and ID on hover #80

Closed tomay closed 8 months ago

tomay commented 8 months ago

This would apply to the points and footprints

See this example: https://github.com/CartoDB/carto.js/blob/develop/examples/TheHobbitLocations/js/app.js

Though that example relies on a callback from createVis, which we're not using here. So we'll have to feel our way though this using 8 year old docs and examples

tomay commented 8 months ago

One big issue, footprints do not have any attributes, apart from an id back to the building data (and this has a different name than it does on the building data)

So this is not going to be straightforward at all

tomay commented 8 months ago

Okay, I've got a roll-your-own tooltip in place:

image

@danrademacher any thoughts on style or layout? The ID in particular, I'm not sure what treatment makes sense for that. For now it's just pasted in as

`${name}, ${id}`

This is up on staging: https://greeninfo-network.github.io/seattle-building-dashboard/

tomay commented 8 months ago

Inspired by the map popup, I went ahead and gave the tooltip look a similar treatment for Name and ID:

image

Feel free to reopen if this needs anything else

danrademacher commented 8 months ago

looks excellent!