Skip to content

Commit ce1d04f

Browse files
maptastikmaptastik
committed
created hungarian-tiles.html
1 parent a6eed90 commit ce1d04f

File tree

2 files changed

+80
-0
lines changed

2 files changed

+80
-0
lines changed

‎maps/Untitled-1‎

Whitespace-only changes.

‎maps/hungarian-tiles.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>mbtiles on baselayer</title>
6+
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
7+
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
8+
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
9+
10+
<style>
11+
body { margin:0; padding:0; }
12+
#map { position:absolute; top:0; bottom:0; width:100%; }
13+
14+
.legend label,
15+
.legend span {
16+
display:block;
17+
float:left;
18+
height:15px;
19+
width:20%;
20+
text-align:center;
21+
font-size:9px;
22+
color:#808080;
23+
}
24+
</style>
25+
</head>
26+
<body>
27+
<!--We're creating the legend, but the style="display:none;" means we're not going to draw it initially-->
28+
<div id='legend' style='display:none;'>
29+
<strong>Hungarian Ancestry in Lucas County, OH</strong><br />
30+
<small>% of population claiming Hungarian ancestry by census tract</small>
31+
<nav class='legend clearfix'>
32+
<span style='background:rgba(255,255,204,0.5);'></span>
33+
<span style='background:rgba(194,230,153,0.5);'></span>
34+
<span style='background:rgba(120,198,121,0.5);'></span>
35+
<span style='background:rgba(49,163,84,0.5);'></span>
36+
<span style='background:rgba(0,104,55,0.5);'></span>
37+
<label>&lt;1%</label>
38+
<label>1% - 3.9%</label>
39+
<label>4% - 6.9%</label>
40+
<label>7% - 9.9%</label>
41+
<label>&gt;= 10%</label>
42+
<small>Source: <a href="http://factfinder2.census.gov" target="_blank">ACS 2012 (5yr)</a></small>
43+
</nav>
44+
</div>
45+
46+
<!--map div-->
47+
<div id='map'></div>
48+
<!--End map div-->
49+
<script>
50+
// Access your Mapbox account
51+
// Make sure you use your own!
52+
// https://www.mapbox.com/account/apps/
53+
// Default public token
54+
L.mapbox.accessToken = 'pk.eyJ1IjoibWFwdGFzdGlrIiwiYSI6IjNPMkREV1kifQ.2KGPFZD0QaGfvYzXYotTXQ';
55+
56+
var map = L.mapbox.map('map', undefined, {
57+
infoControl: true,
58+
attributionControl: false
59+
});
60+
61+
var stamenLayer = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
62+
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.'
63+
}).addTo(map);
64+
65+
var lucasCoLayer = L.mapbox.tileLayer('maptastik.toledo_hungarian').addTo(map);
66+
67+
// Let's bring out the interactivity
68+
// Adds UTF grid from our Lucas Co tiles to the map
69+
var myGridLayer = L.mapbox.gridLayer('maptastik.toledo_hungarian').addTo(map);
70+
// Creates access to interaction with the UTF grid from our Lucas co tiles
71+
var myGridControl = L.mapbox.gridControl(myGridLayer).addTo(map);
72+
73+
map.setView([41.56633, -83.63830], 10);
74+
map.legendControl.addLegend(document.getElementById('legend').innerHTML);
75+
76+
</script>
77+
78+
79+
</body>
80+
</html>

0 commit comments

Comments
 (0)