Advanced Web-Based Geospatial Visualization using Leaflet

Intel Analytics DCDec. 11, 2012

Scott Fairgrieve

2

Agenda

• Web mapping challenges• Leaflet Overview• Overview of HumanGeo’s Leaflet Data Visualization

Framework• Examples• Next Steps

3

Challenges

• Deciding what mapping framework to use– There are lots of options (Google Maps, Bing, Yahoo, OpenLayers, etc.), each with

its own API– This presentation focuses on Leaflet

• Understanding the structure/format of the data that’s going to be visualized– Is it web map/JavaScript friendly?– Does it work well with the mapping framework you’ve chosen? – Will you always be dealing with the same format?– Integrating data from a variety of sources typically requires custom code or

code to standardize formats

• Lots of different ways of specifying location: lat/lon, grid formats, addresses, country/state codes, city names, etc. – Handling location formats other than lat/lon can be difficult and often requires

additional web services

4

Visualizing Data on a 2D (Web) Map

• Want to highlight variations in data• Typical approach: Vary the styling of points,

lines, and polygons based on one or more values of the data

• Primary options– Marker Size/Radius– Color/Fill Color

• Other options– Line weight – useful when illustrating variation

between line features– Opacity – useful for illustrating time, counts,

etc.– Polygons – filled vs. empty, border vs. no border– Line style – dashed vs. solid

Examples – USGS Earthquakes Map

http://earthquake.usgs.gov/earthquakes/map/

6

Examples – Choropleth/Infographics

EngineYard.com

Bureau of Education and Cultural Affairs

Bill and Melinda Gates Foundation

7

Leaflet Overview

• Developed by CloudMade• Relatively new (first released in 2011)• Simple compared to other JavaScript web mapping

frameworks a pro and a con• Smooth animation and works well on mobile devices• Pretty good documentation/examples• http://leafletjs.com/index.html

8

Leaflet Basic Options

• Displaying point, line, and polygon features– L.Marker and L.Marker w/

L.DivIcon– L.CircleMarker– L.Polyline– L.Polygon

• Loading data– L.GeoJSON

Images from the Leaflet website

9

Leaflet Vector Layers

• Leaflet is Scalable Vector Graphics (SVG) based• Behind the scenes, non-image based markers are

drawn using an SVG path element<path [path attributes] d=”[path data (e.g. M548 254L548 49L676 49L676 254L548 254z)]"></path>

• Leaflet style options are mapped to path attributes• Style options include: color, fillColor, opacity,

fillOpacity, weight, dashArray, stroke, fill, radius• We can create custom markers dynamically by

inheriting from the L.Path class

10

HumanGeo’s Leaflet Data Visualization Framework

• Started as a side project (a few hours per week)• A work in progress (still in the alpha phase)• Goals:– Enable cool, interactive, infographic style visualizations– Support displaying data in any JSON-based data format– Eliminate redundant code/tasks related to displaying data– Standardize the way in which data are loaded/displayed– Minimize dependency on server-side components for

typical use cases (e.g. visualizing data by state or country)– Remain consistent with Leaflet’s coding style

11

Color – RGB

• Most of us are familiar with RGB color, but it’s not always the best approach

• What color is this? rgb(213,154,10) or #D59A0A

• Hue, Saturation, Luminosity/Lightness or HSL color provides a more intuitive color definition than RGB and is great for scientific visualizations/geo analytics

Gold

12

Color - HSL

• Hue represents a degree value on the color wheel– Varies according to the colors of

the visible spectrum – the rainbow ROYGBIV pattern that is familiar to most people

• Saturation represents the percentage of the given hue that is present in a color:– 0% = gray– 100% = full hue

• Luminosity represents the percentage of lightness in a color:– 0% = black– 50% = hue– 100% = white

< L H > L R G B0 255 0 0

30 255 127 0

60 255 255 0

90 127 255 0

120 45 255 0

150 45 255 84

180 43 255 255

210 13 95 255

240 0 0 255

270 99 0 255

300 249 0 255

330 249 0 112

360 255 0 0

Source: Wikipedia

13

Framework Basics – Linear Functions for Dynamic Styling

• y = mx + b• Useful for varying one property linearly

with respect to another property (e.g. mapping temperature to marker radius)– x = data property– y = style property

• Numeric properties (radius, weight, opacity, fillOpacity) L.LinearFunction

• color, fillColor L.HSLHueFunction, L.HSLLuminosityFunction, L.HSLSaturationFunction, other color function classes

Image Source: Wikipedia

14

Framework Basics – New Marker Types

• L.RegularPolygonMarker• Charts:

– L.PieChartMarker

– L.BarChartMarker

– L.RadialBarChartMarker

– L.CoxcombChartMarker

– L.RadialMeterMarker

15

Framework Basics – Data Layers

• L.DataLayer– Automates the work of displaying data

regardless of the structure of the data– Handles country codes, state codes, and

custom location formats in addition to lat/lon

– Provides a legend for free• L.MarkerDataLayer• L.ChoroplethDataLayer• Charts

– L.PieChartDataLayer– L.BarChartDataLayer– L.RadialBarChartDataLayer– L.CoxcombChartDataLayer

16

Examples

• USGS Earthquakes• Meetup Finder• Election Maps

17

USGS Earthquakes

18

Meetup Finder

19

Election Maps

20

Next Steps

• Clean up, simplify, test, and document code• Write tutorials/blog posts (in the works)• Consider additional marker and data layer types and

additional classes/functions for making things easier• Release code on GitHub

21

Interested in Using the Framework?

• Look for code to be released on HumanGeo’s GitHub site: https://github.com/humangeo

• Watch for updates/tutorials on HumanGeo’s blog: http://blog.thehumangeo.com

• Send me an e-mail if you’re interested or want to contribute: scott@thehumangeo.com