Skip to content

Instantly share code, notes, and snippets.

View MateoV's full-sized avatar

Matt Greene MateoV

  • West Bloomfield, MI
View GitHub Profile
@MateoV
MateoV / outline
Created January 3, 2012 16:08
quick-start guide outline
1. Importing
- Brief overview of supported data types
- Steps to import CSV [[complete](http://mapbox.com/tilemill/docs/tutorials/point-data/)]
- Steps to import SHP [nate]
2. Styling/Displaying Data
- Basic Styling / Changing Save&Style options
- Adding Conditional Styling [[complete](http://mapbox.com/tilemill/docs/tutorials/conditional-styles/)]
3. Adding Optional Components
/9j/4AAQSkZJRgABAgEASABIAAD/7QAsUGhvdG9zaG9wIDMuMAA4QklNA+0AAAAAABAASAAAAAEAAQBIAAAAAQAB/+FJoGh0dHA6
Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8APD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQi
Pz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEu
MTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMu
b3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAg
ICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPgogICAgICAgICA8ZGM6Zm9ybWF0PmltYWdl
L2pwZWc8L2RjOmZvcm1hdD4KICAgICAgICAgPGRjOnRpdGxlPgogICAgICAgICAgICA8cmRmOkFsdD4KICAgICAgICAgICAgICAg
PHJkZjpsaSB4bWw6bGFuZz0ieC1kZWZhdWx0Ij5QcmludDwvcmRmOmxpPgogICAgICAgICAgICA8L3JkZjpBbHQ+CiAgICAgICAg
IDwvZGM6dGl0bGU+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgog
ICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOnhtcEdJ
function(options, data) { switch (options.format) { case 'full': return ''; break; case 'location': return ''; break; case 'teaser': default: return '<div class="census-int"><div class="int-title">' + data.name10 + '</div><div class="pop-int">Population:' + data.pop2010 + '</div><div class="chg-int">Change from 2000-2010: <span class="poppct-int">' + data.usat36_pct + '%</span></div><div class="regavg-int">Regional Average: <span class="regnum-int">' + data.usat36_avgreg + '%</span></div><div class="natavg-int">National Average: <span class="natnum-int">' + data.usat36_avgnat + '%</span></div><div class="chart-int"><img src="http://chart.apis.google.com/chart?chf=bg,s,FFFFFF00&chxl=0:|Non-Hispanic|Hispanic|+|2+or+More|White|Other|Hawaii/Oth+Pacific|Black|Asian|Am+Indian/Alaskan|1:|0|20|40|60|80|100|||2:|||||||Change|&chbh=6,0,8&chxr=1,0,140&chxs=0,252525,10,1,l,252525|1,3A3A3A,10,0,l,3A3A3A|2,3A3A3A,10,0,l,3A3A3A&chxt=y,x,t&chs=280x250&cht=bhg&chco=969696,3A3A3A&
function(options, data) { if not data.usat36_pct {var censusint = '<div class="census-int"><div class="int-title">' + data.namelsad10 + ', ' + data.stusab + '</div><div class="pop-int">No Data Available</div></div>';} else {var censusint = '<div class="census-int"><div class="int-title">' + data.namelsad10 + ', ' + data.stusab + '</div><div class="pop-int">Population:' + data.pop2010 + '</div><div class="chg-int">Change from 2000-2010: <span class="poppct-int">' + data.usat36_pct + '%</span></div><div class="regavg-int">State Average: <span class="regnum-int">' + data.usat36_avgst + '%</span></div><div class="regavg-int">Regional Average: <span class="regnum-int">' + data.usat36_avgreg + '%</span></div><div class="natavg-int">National Average: <span class="natnum-int">' + data.usat36_avgnat + '%</span></div><div class="chart-int"><img src="http://chart.apis.google.com/chart?chf=bg,s,FFFFFF00&chxl=0:|Non-Hispanic|Hispanic|+|2+or+More|White|Other|Hawaii/Oth+Pacific|Black|Asian|Am+Indian/Alaskan|1:|0|20|40|60|80
function(options, data) { if (data.pop2010 == 0) || (data.usat36_pct == "undefined"){var censusint = '<div class="census-int"><div class="int-title">' + data.namelsad10 + ', ' + data.countyname + '</div><div class="pop-int">No Data Available</div></div>';} else {var censusint = '<div class="census-int"><div class="int-title">' + data.namelsad10 + ', ' + data.countyname + '</div><div class="pop-int">Population:' + data.pop2010 + '</div><div class="chg-int">Change from 2000-2010: <span class="poppct-int">' + data.usat36_pct + '%</span></div><div class="regavg-int">State Average: <span class="regnum-int">' + data.usat36_avgst + '%</span></div><div class="regavg-int">Regional Average: <span class="regnum-int">' + data.usat36_avgreg + '%</span></div><div class="natavg-int">National Average: <span class="natnum-int">' + data.usat36_avgnat + '%</span></div><div class="chart-int"><img src="http://chart.apis.google.com/chart?chf=bg,s,FFFFFF00&chxl=0:|Non-Hispanic|Hispanic|+|2+or+More|White|Other|Hawaii/Oth+Pacific|Bl
<div id="wax-legend-census" style="text-align:center;">
<a href="http://www.npr.org">
<img style="display:block;margin:0px auto;" src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4QfkaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49J++7vycg
aWQ9J1c1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCc/Pgo8eDp4bXBtZXRhIHhtbG5zOng9J2Fkb2JlOm5zOm1ldGEvJz4KPHJkZjpS
REYgeG1sbnM6cmRmPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjJz4KCiA8cmRmOkRlc2NyaXB0
aW9uIHhtbG5zOmRjPSdodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyc+CiAgPGRjOmZvcm1hdD5pbWFnZS9qcGVnPC9k
Yzpmb3JtYXQ+CiAgPGRjOnRpdGxlPgogICA8cmRmOkFsdD4KICAgIDxyZGY6bGkgeG1sOmxhbmc9J3gtZGVmYXVsdCc+UHJpbnQ8
L3JkZjpsaT4KICAgPC9yZGY6QWx0PgogIDwvZGM6dGl0bGU+CiA8L3JkZjpEZXNjcmlwdGlvbj4KCiA8cmRmOkRlc2NyaXB0aW9u
IHhtbG5zOnhtcD0naHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyc+CiAgPHhtcDpNZXRhZGF0YURhdGU+MjAxMS0wOS0yN1Qw
OToxOTowOS0wNDowMDwveG1wOk1ldGFkYXRhRGF0ZT4KICA8eG1wOk1vZGlmeURhdGU+MjAxMS0wOS0yN1QxMzoxOToxNFo8L3ht
<div id="wax-legend-census" style="text-align:center;">
<a href="http://www.npr.org">
<img style="display:block;margin:0px auto;" src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4QfkaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49J++7vycg
aWQ9J1c1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCc/Pgo8eDp4bXBtZXRhIHhtbG5zOng9J2Fkb2JlOm5zOm1ldGEvJz4KPHJkZjpS
REYgeG1sbnM6cmRmPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjJz4KCiA8cmRmOkRlc2NyaXB0
aW9uIHhtbG5zOmRjPSdodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyc+CiAgPGRjOmZvcm1hdD5pbWFnZS9qcGVnPC9k
Yzpmb3JtYXQ+CiAgPGRjOnRpdGxlPgogICA8cmRmOkFsdD4KICAgIDxyZGY6bGkgeG1sOmxhbmc9J3gtZGVmYXVsdCc+UHJpbnQ8
L3JkZjpsaT4KICAgPC9yZGY6QWx0PgogIDwvZGM6dGl0bGU+CiA8L3JkZjpEZXNjcmlwdGlvbj4KCiA8cmRmOkRlc2NyaXB0aW9u
IHhtbG5zOnhtcD0naHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyc+CiAgPHhtcDpNZXRhZGF0YURhdGU+MjAxMS0wOS0yN1Qw
OToxOTowOS0wNDowMDwveG1wOk1ldGFkYXRhRGF0ZT4KICA8eG1wOk1vZGlmeURhdGU+MjAxMS0wOS0yN1QxMzoxOToxNFo8L3ht
function(options, data) { switch (options.format) { case 'full': return ''; break; case 'location': return ''; break; case 'teaser': default: return '<div class="census-int"><div class="int-title">' + data.name10 + '</div><div class="pop-int">Population:' + data.pop2010 + '</div><div class="chg-int">Change from 2000-2010: <span class="poppct-int">' + data.usat36_pct + '%</span></div><div class="regavg-int">Regional Average: <span class="regnum-int">' + data.usat36_avgreg + '%</span></div><div class="natavg-int">National Average: <span class="natnum-int">' + data.usat36_avgnat + '%</span></div><div class="chart-int"><img src="http://chart.apis.google.com/chart?chf=bg,s,FFFFFF00&chxl=0:|Non-Hispanic|Hispanic|+|2+or+More|White|Other|Hawaii/Oth+Pacific|Black|Asian|Am+Indian/Alaskan|1:|0|20|40|60|80|100|||2:|||||||Change|&chbh=6,0,8&chxr=1,0,140&chxs=0,252525,10,1,l,252525|1,3A3A3A,10,0,l,3A3A3A|2,3A3A3A,10,0,l,3A3A3A&chxt=y,x,t&chs=280x250&cht=bhg&chco=969696,3A3A3A&
<div class='overlay-legend-top'>
<div class='title-top'>
Completed Radio Towers
</div>
<div class='text-top'>
<div class='tower'>
<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAZCAYAAAA4/K6pAAAABHNCSVQICAgIfAhkiAAAAAlwSFlz
AAAEmgAABJoBLnDN3gAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAJlSURB
VDiN7ZQxaJ5VFIaf97k/kkKhwcWArYqD2KUqQYrQlAqhdBERHWoXAy5FKqSDoHaQLkUnQQVB0GKU
TrYEtCCuioMldcikEjGiLm2FXxCaBu9x+RJ+lSxODp7x3Pd5ee+9595UFZOV5D71RFXNJpkFqKqV
<div>
<ul class='carousel'>
<li>
<div class='title'>
<strong>PROJECT</strong><span class='count'> 1 of 2 at this location</span>
<h3>Documentary PROJECT REBIRTH<span> by </span>AXA Equitable</h3>
</div>
<div class='content'>
<div class='scrollbar'><div class='track'><div class='thumb'><div class='end'></div></div></div></div>
<div class='viewport'>