Skip to content

Instantly share code, notes, and snippets.

@bsudekum
Created May 24, 2012 02:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save bsudekum/2779071 to your computer and use it in GitHub Desktop.
Save bsudekum/2779071 to your computer and use it in GitHub Desktop.
Files for TileMill Interactivity Example
#crime[aggravated<=150] {
line-color:#594;
line-width:0.5;
polygon-opacity:1;
polygon-fill:#FFFFB2;
}
#crime[aggravated>=150][aggravated<=300] {
line-color:#594;
line-width:0.5;
polygon-opacity:1;
polygon-fill:#FECC5C;
}
#crime[aggravated>=301][aggravated<=400] {
line-color:#594;
line-width:0.5;
polygon-opacity:1;
polygon-fill:#FD8D3C;
}
#crime[aggravated>401] {
line-color:#594;
line-width:0.5;
polygon-opacity:1;
polygon-fill:#c75658;
}
<DOCTYPE html>
<html>
<head>
<title>Crime Rates</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lte IE 8]><link rel="stylesheet" href="leaflet.ie.css" /><![endif]-->
<script src="http://code.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
<script src='../wax/dist/wax.leaf.min.js' type='text/javascript'></script>
<link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" />
<![endif]-->
<style rel="stylesheet" type="text/css">
.wax-tooltip {
position: absolute;
right:0px;
top:0px;
padding:10px;
background-color:#FFFFFF;
opacity:0.9;
border-radius: 10px;
-moz-border-radius: 10px;
width: 300px;
z-index: 5;
}
body{
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<div id="map-div" style="width: 100%; height: 100%"></div>
</body>
<script type="text/javascript">
var map;
var interaction;
$(document).ready(function() {
wax.tilejson('http://visuallybs.com/maps/tiles/crimemap/1.0.0/crime/metadata.json',
function(tilejson) {
map = new L.Map('map-div')
.addLayer(new wax.leaf.connector(tilejson))
.setView(new L.LatLng(38.9026,-100), 4);
interaction = wax.leaf.interaction(map, tilejson);
});
});
</script>
</body>
</html>
<h5 style="text-align:center;">U.S. Crime Rates</h5>
<img src="http://chart.apis.google.com/chart?chbh=a,5,15&chs=300x150&cht=bvg&chco=4D89F9,000000,FF9900&chd=t:{{{murder and}}}|{{{robbery ra}}}|{{{forcible r}}}&chdl=Muder|Robbery|Forcible+Rape" width="300" height="150" alt="" />
grid({
"attribution": "",
"description": "",
"center": "-96.6797,39.4362,4",
"bounds": "-175.6055,4.9158,-42.8906,73.2774",
"minzoom": "3",
"version": "1.0.0",
"template": "{{#__location__}}{{/__location__}}{{#__teaser__}}<h5 style=\"text-align:center;\">U.S. Crime Rates</h5>\n<img src=\"http://chart.apis.google.com/chart?chbh=a,5,15&chs=300x150&cht=bvg&chco=4D89F9,000000,FF9900&chd=t:{{{murder and}}}|{{{robbery ra}}}|{{{forcible r}}}&chdl=Muder|Robbery|Forcible+Rape\" width=\"300\" height=\"150\" alt=\"\" />{{/__teaser__}}{{#__full__}}{{/__full__}}",
"maxzoom": "6",
"legend": "",
"name": "crime",
"scheme":"tms",
"tiles":["http://visuallybs.com/maps/tiles/crimemap/1.0.0/crime/{z}/{x}/{y}.png"],
"grids":["http://visuallybs.com/maps/tiles/crimemap/1.0.0/crime/{z}/{x}/{y}.grid.json"]
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment