Use Leaflet and OSM with density map and clustering #37

Open
yohanboniface opened this Issue Sep 23, 2012 · 3 comments

Comments

Projects
None yet
2 participants
@yohanboniface

As we discussed, I'm starting a branch to work on:

  • moving to Leaflet
  • using OSM tiles (which rendering? Thunderforest has nice ones: http://www.thunderforest.com/ )
  • using some density (choropleth) map at low zoom levels
  • using some client clustering at intermediate/high zoom levels

About the density map: do we want to group per country? Something like this: http://leaflet.cloudmade.com/examples/choropleth.html ?

About the clustering, maybe using the @danzel plugin could do the job: http://danzel.github.com/Leaflet.markercluster/example/marker-clustering-realworld.388.html

@brutasse

This comment has been minimized.

Show comment Hide comment
@brutasse

brutasse Sep 23, 2012

Collaborator

Thanks for the proposal :)

+1 for leaflet

+1 for OSM tiles, we just need a provider able to handle a decent amount of traffic for free (or in exchange of some sort of acknowledgment on the site like we do with Heroku). I don't know what's the traffic like at the moment though.

+1 for the clustering plugin, coupled with an ajax view that returns geoJSON given a client's bounding box it'd work great.

As for density maps: I was thinking about something a bit more advanced than per-country grouping. E.g. implement the marching squares[0] algorithm to determine the boundaries for a given number of density levels, then simply draw those boundaries as leaflet polygons, with a smoothFactor that makes them look good.

Each polygon could have a solid border and a given opacity, for high density zones they'd stack and the overall opacity would increase as the density increases. What do you think of this approach? Polygons should obviously be computed on a daily (or so) basis and cached somewhere. We have redis or postgres for that.

The main limitation is that the current Heroku database plan doesn't support PostGIS. We could ask @jacobian if we can upgrade it but it's something like 5x more expensive. Naive bounding box queries would work at the moment without postgis though so it's probably not blocking anything.

Ping me on IRC if you need some anonymized data!

[0] http://en.wikipedia.org/wiki/Marching_squares

Collaborator

brutasse commented Sep 23, 2012

Thanks for the proposal :)

+1 for leaflet

+1 for OSM tiles, we just need a provider able to handle a decent amount of traffic for free (or in exchange of some sort of acknowledgment on the site like we do with Heroku). I don't know what's the traffic like at the moment though.

+1 for the clustering plugin, coupled with an ajax view that returns geoJSON given a client's bounding box it'd work great.

As for density maps: I was thinking about something a bit more advanced than per-country grouping. E.g. implement the marching squares[0] algorithm to determine the boundaries for a given number of density levels, then simply draw those boundaries as leaflet polygons, with a smoothFactor that makes them look good.

Each polygon could have a solid border and a given opacity, for high density zones they'd stack and the overall opacity would increase as the density increases. What do you think of this approach? Polygons should obviously be computed on a daily (or so) basis and cached somewhere. We have redis or postgres for that.

The main limitation is that the current Heroku database plan doesn't support PostGIS. We could ask @jacobian if we can upgrade it but it's something like 5x more expensive. Naive bounding box queries would work at the moment without postgis though so it's probably not blocking anything.

Ping me on IRC if you need some anonymized data!

[0] http://en.wikipedia.org/wiki/Marching_squares

@yohanboniface

This comment has been minimized.

Show comment Hide comment
@yohanboniface

yohanboniface Sep 23, 2012

I suggest an iterative work, something like:

  1. migrating to Leaflet and OSM
  2. making a simple country based density map for low zoom levels
  3. using ajax GeoJSON and clusters for intermediate zoom levels
  4. implementing a better density map algorithm

What do you think?

I suggest an iterative work, something like:

  1. migrating to Leaflet and OSM
  2. making a simple country based density map for low zoom levels
  3. using ajax GeoJSON and clusters for intermediate zoom levels
  4. implementing a better density map algorithm

What do you think?

@brutasse

This comment has been minimized.

Show comment Hide comment
@brutasse

brutasse Sep 23, 2012

Collaborator

Totally agreed, let's not break all the things at once.

Collaborator

brutasse commented Sep 23, 2012

Totally agreed, let's not break all the things at once.

yohanboniface referenced this issue in yohanboniface/djangopeople Sep 24, 2012

yohanboniface referenced this issue in yohanboniface/djangopeople Sep 24, 2012

yohanboniface referenced this issue in yohanboniface/djangopeople Sep 24, 2012

cf brutasse#37 - Use non compressed leaflet source only in debug mode
Note that you must have DEBUG=True AND your IP in the INTERNAL_IPS to
use the non compressed version.

@yohanboniface yohanboniface referenced this issue Sep 24, 2012

Closed

Osm #39

yohanboniface referenced this issue in yohanboniface/djangopeople Sep 25, 2012

cf brutasse#37 - Serve locally the leaflet statics
Goals:
- serve them in HTTPS
- minify them with our solutions

yohanboniface referenced this issue in yohanboniface/djangopeople Sep 25, 2012

cf brutasse#37 - Naive client clustering implementation with 1000 mar…
…kers

This is just a Proof-of-Concept with the leaflet-markercluster plugin.

yohanboniface referenced this issue in yohanboniface/djangopeople Sep 27, 2012

yohanboniface referenced this issue in yohanboniface/djangopeople Oct 12, 2012

cf brutasse#37 - Poor man client-sive clustering algorithm
Basicaly:
- divide the world in a grids, sized according to zoom level
- for each point, calculate the closest grid node
- take a "random" point of the cluster to set the center

But well, we have a POC working, let's refine it now :)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment