/
4.html
88 lines (81 loc) · 3.33 KB
/
4.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<!------------------------
Step #4
Now let's tackle the whole-browser
scroll issue by adding a map-window.
You can scroll the inner "base-layer"
with your arrow keys, but notice what
happens if you try to use your mouse
to scroll. (You are grabbing an
individual image instead of scrolling.)
Also, note the appropriate use of
pixel-based sizing in base-layer
and viewport-based relatative sizing
in map-window.
------------------------>
<html lang="en">
<head>
<title>4 - RYOGM</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1,
user-scalable=yes">
<meta name="name" content="Scott Davis <scott@thirstyhead.com">
<meta name="description" content="">
<meta name="keywords" content="">
<style>
.base-layer{
width: 2048px;
height: 1024px;
font-size: 0;
}
.map-window{
width: 75vw;
height: 50vh;
/* NOTE: try [hidden] and [scroll] to see different effects */
overflow: scroll;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Roll Your Own Google Maps - 4</h1>
<p><a href="3.html">≺ Previous</a> | <a href="5.html">Next ≻</a></p>
<div class="map-window">
<div class="base-layer">
<img src="img/tiles/tile-0.jpg" alt="Earth Tile 0">
<img src="img/tiles/tile-1.jpg" alt="Earth Tile 1">
<img src="img/tiles/tile-2.jpg" alt="Earth Tile 2">
<img src="img/tiles/tile-3.jpg" alt="Earth Tile 3">
<img src="img/tiles/tile-4.jpg" alt="Earth Tile 4">
<img src="img/tiles/tile-5.jpg" alt="Earth Tile 5">
<img src="img/tiles/tile-6.jpg" alt="Earth Tile 6">
<img src="img/tiles/tile-7.jpg" alt="Earth Tile 7">
<img src="img/tiles/tile-8.jpg" alt="Earth Tile 8">
<img src="img/tiles/tile-9.jpg" alt="Earth Tile 9">
<img src="img/tiles/tile-10.jpg" alt="Earth Tile 10">
<img src="img/tiles/tile-11.jpg" alt="Earth Tile 11">
<img src="img/tiles/tile-12.jpg" alt="Earth Tile 12">
<img src="img/tiles/tile-13.jpg" alt="Earth Tile 13">
<img src="img/tiles/tile-14.jpg" alt="Earth Tile 14">
<img src="img/tiles/tile-15.jpg" alt="Earth Tile 15">
<img src="img/tiles/tile-16.jpg" alt="Earth Tile 16">
<img src="img/tiles/tile-17.jpg" alt="Earth Tile 17">
<img src="img/tiles/tile-18.jpg" alt="Earth Tile 18">
<img src="img/tiles/tile-19.jpg" alt="Earth Tile 19">
<img src="img/tiles/tile-20.jpg" alt="Earth Tile 20">
<img src="img/tiles/tile-21.jpg" alt="Earth Tile 21">
<img src="img/tiles/tile-22.jpg" alt="Earth Tile 22">
<img src="img/tiles/tile-23.jpg" alt="Earth Tile 23">
<img src="img/tiles/tile-24.jpg" alt="Earth Tile 24">
<img src="img/tiles/tile-25.jpg" alt="Earth Tile 25">
<img src="img/tiles/tile-26.jpg" alt="Earth Tile 26">
<img src="img/tiles/tile-27.jpg" alt="Earth Tile 27">
<img src="img/tiles/tile-28.jpg" alt="Earth Tile 28">
<img src="img/tiles/tile-29.jpg" alt="Earth Tile 29">
<img src="img/tiles/tile-30.jpg" alt="Earth Tile 30">
<img src="img/tiles/tile-31.jpg" alt="Earth Tile 31">
</div>
</div>
</body>
</html>