Leaflet map component tooltip

[dsdemaria]

Part of the map component (issue #2 ) requires a tooltip that opens when clicking a neighborhood. Expect that the tooltip contents will be unique depending on the project.

[dsdemaria]

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

[tyreer]

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

[dsdemaria]

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.

[tyreer]

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... 🤔

[evandemaris]

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.

[tyreer]

That's my understanding as well. I just think the Tooltip component in Leaflet is not designed to be position independent. Isn't a tooltip by definition position dependent? All that to say we might just want to open our considerations to other Leaflet components (there seem to be many options) or other solutions beyond a tooltip since that term might no longer apply to this issue.

…

On Mon, Mar 20, 2017 at 9:46 AM Evan Demaris ***@***.***> wrote: 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 <https://github.com/dsdemaria> can certainly clarify that if I'm misreading. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#33 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ATWo9KQDIkpjXlupgXwAJgdNWIpoM9roks5rnq1tgaJpZM4MQiiT> .

[DavideDaniel]

How does it position itself when hovering over something? On Mon, Mar 20, 2017 at 7:24 PM Robert Tyree <notifications@github.com> wrote:

…

That's my understanding as well. I just think the Tooltip component in Leaflet is not designed to be position independent. Isn't a tooltip by definition position dependent? All that to say we might just want to open our considerations to other Leaflet components (there seem to be many options) or other solutions beyond a tooltip since that term might no longer apply to this issue. On Mon, Mar 20, 2017 at 9:46 AM Evan Demaris ***@***.***> wrote: > 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 <https://github.com/dsdemaria> can certainly > clarify that if I'm misreading. > > — > You are receiving this because you commented. > > > Reply to this email directly, view it on GitHub > < #33 (comment) >, > or mute the thread > < https://github.com/notifications/unsubscribe-auth/ATWo9KQDIkpjXlupgXwAJgdNWIpoM9roks5rnq1tgaJpZM4MQiiT > > . > — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#33 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AIZSetQVmrWAk0_pFkE2kWq0cIEXKSrzks5rnzTWgaJpZM4MQiiT> .

[dsdemaria]

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

[tyreer]

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.

[tyreer]

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

[tyreer]

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 Feature/#35 composed donut legend component #36 to approach the spec in Composed donut component with legend #35

• demos a basic GeoJSON layer with Portland neighborhood data from here, which might be applied to a map like in Feature/leaflet #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.

[dsdemaria]

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.