Skip to content

Commit 94356ad

Browse files
maptastikmaptastik
committed
add the steps for tiles
not sure what was changed...
1 parent 2b9fb98 commit 94356ad

File tree

1 file changed

+142
-0
lines changed

1 file changed

+142
-0
lines changed

‎maps/steps/lucasCo_hungarian-steps.html‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
<!--1. HTML Skeleton-->
2+
3+
<!DOCTYPE html>
4+
<html>
5+
<head>
6+
<meta charset="UTF-8">
7+
<title>mbtiles on baselayer</title>
8+
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
9+
</head>
10+
11+
<body>
12+
13+
</body>
14+
</html>
15+
16+
17+
<!--2. Add mapbox.js and mapbox.css under meta tag-->
18+
19+
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
20+
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
21+
22+
23+
<!--3. Add map div in body-->
24+
25+
<!--map div-->
26+
<div id='map'></div>
27+
<!--End map div-->
28+
29+
30+
<!--4. Basic style for body and map div. Add in head under mapbox.css link-->
31+
32+
<style>
33+
body { margin:0; padding:0; }
34+
#map { position:absolute; top:0; bottom:0; width:100%; }
35+
</style>
36+
37+
38+
<!--5. Add script area after map div with mapbox access token-->
39+
40+
<script>
41+
// Access your Mapbox account
42+
// Make sure you use your own!
43+
// https://www.mapbox.com/account/apps/
44+
// Default public token
45+
L.mapbox.accessToken = 'pk.eyJ1IjoibWFwdGFzdGlrIiwiYSI6IjNPMkREV1kifQ.2KGPFZD0QaGfvYzXYotTXQ';
46+
</script>
47+
48+
49+
<!--6. Initialize the map. Add this under the access token-->
50+
51+
<script> // <- don't add
52+
// Initialize the map
53+
var map = L.mapbox.map('map', undefined, {
54+
infoControl: true,
55+
attributionControl: false
56+
});
57+
</script> <!-- <- don't add-->
58+
59+
60+
<!--7. Add Stamen toner basemap under map initialization-->
61+
62+
<script> // <- don't add
63+
var stamenLayer = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
64+
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>.'
65+
}).addTo(map);
66+
</script> <!-- <- don't add-->
67+
68+
69+
<!--8. Add the mbtiles we made earlier under the toner basemap-->
70+
71+
<script> // <- don't add
72+
// Adds the mbtiles we made of Lucas Co to the map
73+
var lucasCoLayer = L.mapbox.tileLayer('maptastik.toledo_hungarian').addTo(map);
74+
</script> <!-- <- don't add-->
75+
76+
77+
<!--9. Add the UTF grid and interactivity under our mbtiles-->
78+
79+
<script> // <- don't add
80+
// Let's bring out the interactivity
81+
// Adds UTF grid from our Lucas Co tiles to the map
82+
var myGridLayer = L.mapbox.gridLayer('maptastik.toledo_hungarian').addTo(map);
83+
// Creates access to interaction with the UTF grid from our Lucas co tiles
84+
var myGridControl = L.mapbox.gridControl(myGridLayer).addTo(map);
85+
</script> <!-- <- don't add-->
86+
87+
88+
<!--10. Set our starting location and zoom under UTF-->
89+
90+
<script> // <- don't add
91+
//Sets our starting location and zoom
92+
map.setView([41.56633, -83.63830], 10);
93+
</script> <!-- <- don't add-->
94+
95+
96+
<!--11. Add legend div at the very top of the body-->
97+
98+
<!--Legend-->
99+
<!--We're creating the legend, but the style="display:none;" means we're not going to draw it initially-->
100+
<div id='legend' style='display:none;'>
101+
<strong>Hungarian Ancestry in Lucas County, OH</strong><br />
102+
<small>% of population claiming Hungarian ancestry by census tract</small>
103+
<nav class='legend clearfix'>
104+
<span style='background:rgba(255,255,204,0.5);'></span>
105+
<span style='background:rgba(194,230,153,0.5);'></span>
106+
<span style='background:rgba(120,198,121,0.5);'></span>
107+
<span style='background:rgba(49,163,84,0.5);'></span>
108+
<span style='background:rgba(0,104,55,0.5);'></span>
109+
<label>&lt;1%</label>
110+
<label>1% - 3.9%</label>
111+
<label>4% - 6.9%</label>
112+
<label>7% - 9.9%</label>
113+
<label>&gt;= 10%</label>
114+
<small>Source: <a href="http://factfinder2.census.gov" target="_blank">ACS 2012 (5yr)</a></small>
115+
</nav>
116+
</div>
117+
<!--End legend-->
118+
119+
120+
<!--12. Add style for legend to bottom of style tag in head-->
121+
122+
<style> /* <- Don't add
123+
.legend label,
124+
.legend span {
125+
display:block;
126+
float:left;
127+
height:15px;
128+
width:20%;
129+
text-align:center;
130+
font-size:9px;
131+
color:#808080;
132+
}
133+
</style> <!-- <- Don't add -->
134+
135+
136+
<!--13. Add legend to map. This is the very last thing in the script tag-->
137+
138+
<script> // <- don't add
139+
//Remember earlier when we made the legend, but didn't display it?
140+
//Now it's getting displayed
141+
map.legendControl.addLegend(document.getElementById('legend').innerHTML);
142+
</script> <!-- <- don't add-->

0 commit comments

Comments
 (0)