Leaflet map component tooltip about component-library HOT 12 CLOSED

The tooltip has been updated. This version sidesteps dealing with hover entirely. It is also more mobile-first friendly.

from component-library.

Just a note from the Data Visualization class that react-leaflet's Popup and Tooltip components might be useful in building this out.

from component-library.

Originally the tooltip was going to be activated on hover, but now it's just below the map. There were concerns for mobile use, but with the section anchored at the bottom of the map we avoid this completely.

from component-library.

Worked on this a bit today but didn't get too far. One issue I ran up against was the positioning of the tooltip being based on the GeoJSON feature (the neighborhood). I adjusted the leaflet.css file in the assets folder to offset the positioning of the tooltip (.leaflet-tooltip class), but I could still only manage to position the tooltip relative to the center of the GeoJSON feature—and not relative to the entire map, which is clearly what we want.

Wonder if simply rendering data from a clicked neighborhood in a StoryCard component below the map might be a simple option? Basically making our own tooltip, though I do wonder a little if "tooltip" is still an accurate term for content that's rendered in a position independent of the mouse position... 🤔

from component-library.

I'd assume the tooltip is intended to be position independent, as Derek mentioned in his last comment "...the section anchored at the bottom of the map...", but @dsdemaria can certainly clarify that if I'm misreading.

from component-library.

from component-library.

from component-library.

I guess It's not really a tooltip anymore, now it's an independent component that's just set at the bottom of the map.

See the map below.

housing-desktop.pdf

from component-library.

Not sure if this is the right direction, but I wonder if the custom control in this Leaflet choropleth example is along the lines of what we're trying to make. It is position independent, and it seems like the display content can be specified and styled just like any div.

I'm scratching my head at the React-leaflet LayersControl component and trying to find out if it allows for the same functionality as Leaflet's Control.

Might not be where we want to take things, but thought I'd put it out there in case others can pick this up and run with it or advise that it's a dead end.

from component-library.

Having a little bit of success with extending react-leaflet's MapControl following this post's suggestion.

Able to get a div and load it with other components from the component library. That's promising since we're aiming to pull in the donut chart component. But running into the same problem as the post linked in previous paragraph regarding updating the custom control in a way that triggers a rerender.

Might need to really refactor my code, which is perhaps unnecessarily complicated by the higher-order component (HOC) exercise from Data Viz class. If anyone wants to take a look at my mess of a WIP branch, here's the folder

from component-library.

Ended up scrapping the custom control and just rendering a div below the map—far more straightforward. The branch I've been working on can be pulled down from here.

This branch:

• brings in the RechartsPie component from #36 to approach the spec in #35

• demos a basic GeoJSON layer with Portland neighborhood data from here, which might be applied to a map like in #37

• extends the GeoJSON data with mock demographic data to model something from the Data Viz class (thanks for the model @drabelpdx! The countByZip function here for others)

• provides a minimal proof of concept for how a click event on a neighborhood could update the data visualized below the map.

This is all pretty rough, but thought there was enough to share as a potential option for how we could approach building out the UI in the housing wireframe.

from component-library.

Since we've departed from having the information housed in a tooltip in favor of that bottom panel, I'm going to close this issue.

Look at map info panel instead.

from component-library.