This is an example application demonstrating Angular2 and Leaflet v1.0 integration. The application displays the unemployment rate for all of the French cities.
The application uses the Leaflet.VectorGrid plugin to display a large geoJSON file (~36000 polygons / 11MB).
-
The geographic mapping comes from the simplified version of OpenStreetMap's delimiting of french cities as of January 1st 2015. This mapping was simplified using MapShaper to reduce the size of the geoJSON file.
-
The unemployment rate values come from INSEE's 2013 census information.
Some code was adapted from various examples, including :
- Mike Bostock's Threshold Choropleth
- Mike Bostock's Threshold Key
- Leaflet's Interactive Choropleth Map example
-
Adding mouse interaction would be nice.
-
Reduce the size of the geoJSON file. Maybe using compression, and / or topoJSON conversion.
-
Have a server build the vector tiles, similar to MapZen's implementation.
Released under the The MIT License.