Leaflet component

[DingoEatingFuzz]

The housing team needs a component that takes geojson and renders a leaflet map.

We'll be building this, but I wanted to make an issue first to make sure we aren't duplicating effort across teams!

Ultimately it will fit into a page that looks like this:

So you can expect it to require geojson and provide hover and click events for points and regions.

[DavideDaniel]

How about using https://github.com/PaulLeCam/react-leaflet and working on the tooltip part?

[keirstaple]

Documentation on how to create a tooltip component: https://github.com/PaulLeCam/react-leaflet/blob/master/docs/Components.md#tooltip
Points you to the Leaflet documentation: http://leafletjs.com/reference-1.0.0.html#tooltip

[dsdemaria]

Tonight is a presentation on using leaflet.
https://www.civiclabpdx.com/platform-design-time-1-1-1-1-1

The presentation will cover using transportation team data to build out a map, so for now this seems like the best option to head in.

[joehand]

In addition to the leaflet component, having a component for displaying geojson data would be sweet. I'd used this before which allows you to pass in random geojson data to display on a leaflet map and would be happy to add that here.

I'll be hacking on this tonight with the transportation team!

[dsdemaria]

Housing has updated needs for the map component. The map will include two 'layers' represented by data from the user and a list of demographics. The layers will overlap to show where the user and a selected demographic can live.

[clemf]

I'm taking a stab at this and noticed this in the react-leaflet docs:

Leaflet makes direct calls to the DOM when it is loaded, therefore this library is not compatible with server-side rendering.

Also, see this issue for more discussion on the topic: PaulLeCam/react-leaflet#45

@DavideDaniel Do we need the map component to be compatible with server-side rendering?

[jaronheard]

I'm working on a component that will display geoJSON on top of the leaflet component. I started by copying the existing leafletMap component.

[jaronheard]

This may be a solution to the server-side rendering issue earlier, it essentially just forces the map to render client-side.
https://github.com/masotime/react-leaflet-universal

[jaronheard]

Listening to @DavideDaniel on Leaflet and server-side rendering, I don't think the server-side rendering thing on this module is going to be an issue. AKA he is a man with a plan.

[DavideDaniel]

It does not. Also there are ways to deal with this like checking for presence of window before rendering.

…

On Sun, Mar 26, 2017 at 12:44 PM Clem Freeman ***@***.***> wrote: I'm taking a stab at this and noticed this in the react-leaflet docs <https://github.com/PaulLeCam/react-leaflet/blob/master/docs/How%20it%20works.md#limitations> : Leaflet makes direct calls to the DOM when it is loaded, therefore this library is not compatible with server-side rendering. @DavideDaniel <https://github.com/DavideDaniel> Do we need the map component to be compatible with server-side rendering? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AIZSenLwDZGU2yncJnbnxZwrJyqssc2pks5rpq4pgaJpZM4LuRAc> .

[jaronheard]

@dsdemaria Researched options to show pattern layers on a map using react-leaflet, as shown in the housing team design above. I don’t think there is an existing solution for this. There is a plugin for leaflet (https://github.com/teastman/Leaflet.pattern), but in order to use with react-leaflet, it will need to be adapted. I’m going to work on an extension to react-leaflet that would allow shading to be visualized based on Leaflet.pattern.