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.

[clemf]

@jaronheard Your StamenMap component is awesome, but maybe we should merge it with the LeafletMap component. It seems to me it would make more sense for the different tileset and added layer to be set via prop instead of being a new component.

[jaronheard]

@clemf I totally agree. I was thinking the same thing myself. I could merge in my examples to LeafletMap, as those were the only things that were really useful about StamenMap - besides potentially the additional import of GeoJSON from react-leaflet. I'll try to get a PR submitted this week.

Only other worry was if people had started using StamenMap they may have to change their code slightly. But I can give a heads up on the x-frontend Slack channel if we implement this.

[jaronheard]

@clemf #72 is the merge you suggested above.