Time Series Proportional Symbol Maps with Leaflet and jQuery
Richard G. Donohue, Carl M. Sack, Robert E. Roth · Cartographic Perspectives · 2014
The following tutorial describes how to make a time series proportional symbol map using the Leaflet (leafletjs.com) and jQuery (jquery.com)code libraries.The tutorial is based on a laboratory assignment created in Spring of 2013 for an advanced class on Interactive Cartography and Geovisualization at the University of Wisconsin-Madison (www.geography.wisc.edu/courses/ geog575).This is the first of two On the Horizon tutorials on the topic of web mapping, with the next tutorial covering multivariate choropleth mapping using the D3 library.Commented source code for the tutorial is available through a Creative Commons license at geography.wisc. edu/cartography/tutorials.The tutorial assumes a basic understanding of the open web platform, particularly the HTML, CSS, and JavaScript standards.It also is assumes that you are familiar with the manipulation of JavaScript objects as well as jQuery-style DOM element selection.Tutorials and reference documentation for HTML, CSS, and JavaScript are available at such resources as developer.mozilla.org,www.lynda.com,www.codecademy.com,and www.w3schools.com.Further, it is assumed that you are familiar with in-browser development tools such as Chrome Developer Tools (develop- ers.google.com/chrome-developer-tools)or Firebug (get- firebug.com).Finally, the tutorial assumes that you have access to a web server, either running remotely or as a local host; MAMP for Mac (www.mamp.info/en)and WAMP for Windows (www.wampserver.com/en)are useful for this.Example 6: Loading the GeoJSON (in: main.js).