advanced web-based geospatial visualization using leaflet
DESCRIPTION
In Intel Analytic DC's first meetup, Danny Holloway presented a tool that allows users to find and map the latest tweets in Australia using Leaflet, TileMill, MongoDB, and other technologies. Given the audience interest in geospatial technologies/analytics and web-based mapping, this presentation introduces and provides examples using the HumanGeo Data Visualization Framework, a soon to be released open source JavaScript framework based on CloudMade's Leaflet web-mapping framework. The goal of the Data Visualization Framework is to provide a core set of capabilities for visualizing data using Leaflet while simplifying common tasks and reducing the amount of code that developers need to write in order to create compelling geospatial visualizations.TRANSCRIPT
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: [email protected]