-
Notifications
You must be signed in to change notification settings - Fork 29
Leaflet map component tooltip #33
Comments
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. |
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... 🤔 |
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. |
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>
.
|
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>
.
|
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. |
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. |
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 |
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:
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. |
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. |
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.
The text was updated successfully, but these errors were encountered: