Render resource geojson data

[rufuspollock]

When we get a resource with geojson data we should render it as a simple map rather than a table.

Some examples:

http://data.okfn.org/data/core/geo-admin1-us
http://data.okfn.org/data/core/geo-nuts-administrative-boundaries

Tasks

Research:

• Clarify what type of data we want to render
  • only point and Multi Polygon?
• Explore which library we have to use
  • Is plotly good enough ?
  • What are the other options?
• Come up with recommendation on what we use.
• Explore How the old code in data.okfn.org has been implemented
  • Answer: backend checks if geojson uses reclinejs

Implementation:

• Write a test using sample data packages (locally)
  • Find sample data
    • https://github.com/frictionlessdata/example-geojson
    • https://github.com/frictionlessdata/example-topojson
  • Write render test for a LeafletMap component that is a thin wrapper around Leaflet (this will not exist yet => failing test at this point)
• Start developing the component to stop that test failing
  • Is there a react + leaflet component out there - we can use or use it as a guide
    • https://github.com/PaulLeCam/react-leaflet
    • Also see old recline code https://github.com/okfn/recline/blob/master/src/view.map.js
• resource -> [map spec] -> leaflet config
  • Generate specs for leafletjs from datapackage.json resource item
  • Hook in to code that generates resource previews to handle geojson or topojson
• Integrate with dpr-api (if any integration needed)

Acceptance Criteria

• A resource with geojson data renders properly in data package details page.
• A resource with topojson data renders properly (optional - only do if easy)

Research

Requirements

We want to render geojson data in the data package view page.

Reference: http://frictionlessdata.io/guides/publish/geo/

What I got from above reference is that we mainly support

• Multi Polygon
• Point

It can be mix and match of both.

Explore which library we have to use

Is plotly good enough?

We have plotly in our dependency list already. So it would be great if we can use it for geo json render also.

In plotly.js we have some support for Multi Polygon but not points and polygon etc. Here are two issues in plotly:

• Plotting points on a city map plotly/plotly.js#249
  • Plotting in a city map is not very easy (and limited functionality)
• Create choropleth map based on GeoJSON file plotly/plotly.js#326
  • plotly.js maps don't support GeoJSON data nor city-level basemaps at the moment. They recommend leaflet

In summary:

• Plotly does not support GeoJson directly
• mix and match of Multi Polygon and point is not possible
• City level plotting is not possible

What are the other options?

leafletjs is really good choice as it directly support geojson. It has support for:

• Point
• Line String
• Polygon
• Multi Point
• Multi Line String
• Multi Polygon
• Geometry Collection.

And we can mix and match all types of data.

Come up with recommendation on what we use

Clearly leafletjs is winner between the two

[subhankarb]

Updated the summary with the results of research: we should use leaflet.

Next step is to plan implementation of leaflet

[subhankarb]

FIXED.
We can check it on https://staging.datapackaged.com/core/ex-geojson

[rufuspollock]

FIXED.