/
9.html
168 lines (150 loc) · 5.68 KB
/
9.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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<!------------------------
Step #9
Let's restrict the map
movement to the boundaries
of its parent container.
------------------------>
<html lang="en">
<head>
<title>9 - 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;
position: relative;
top: 0px;
left: 0px;
}
.map-window{
width: 75vw;
height: 50vh;
overflow: hidden;
border: 1px solid black;
}
.dragging {
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
cursor: grabbing;
}
</style>
<script>
'use strict';
window.addEventListener('load', init);
function init(){
let map = new Map('.map-window');
}
class Map{
constructor(windowDiv){
this.windowDiv = document.querySelector(windowDiv);
this.baseLayer = this.windowDiv.querySelector('.base-layer');
this.dragging = false;
this.mouseStart = undefined;
this.mapStart = undefined;
this.mapWindow = undefined;
this.baseLayer.addEventListener('mousedown', event => this.mapMoveStart(event));
this.baseLayer.addEventListener('mousemove', event => this.mapMove(event));
this.baseLayer.addEventListener('mouseup', event => this.mapMoveEnd(event));
}
mapMoveStart(event){
event.preventDefault();
this.dragging = true;
this.mouseStart = {
clientX: event.clientX,
clientY: event.clientY
};
let mapComputedStyle = window.getComputedStyle(this.baseLayer);
this.mapStart = {
left: Number.parseInt(mapComputedStyle.left, 10),
top: Number.parseInt(mapComputedStyle.top, 10),
width: Number.parseInt(mapComputedStyle.width, 10),
height: Number.parseInt(mapComputedStyle.height, 10)
}
let windowDivComputedStyle = window.getComputedStyle(this.windowDiv);
this.mapWindow = {
height: this.windowDiv.clientHeight,
width: this.windowDiv.clientWidth
}
this.baseLayer.classList.add('dragging');
}
mapMove(event){
if(this.dragging){
let deltaX = event.clientX - this.mouseStart.clientX;
let mapLeft = this.mapStart.left + deltaX;
let maxMapLeft = this.mapWindow.width - this.mapStart.width;
if(mapLeft > 0){
mapLeft = 0;
}else if(mapLeft < maxMapLeft){
mapLeft = maxMapLeft;
}
let deltaY = event.clientY - this.mouseStart.clientY;
let mapTop = this.mapStart.top + deltaY;
let maxMapTop = this.mapWindow.height - this.mapStart.height;
if(mapTop > 0){
mapTop = 0;
}else if(mapTop < maxMapTop){
mapTop = maxMapTop;
}
this.baseLayer.style.left = `${mapLeft}px`;
this.baseLayer.style.top = `${mapTop}px`;
}
}
mapMoveEnd(event){
this.dragging = false;
this.mouseStart = undefined;
this.mapStart = undefined;
this.mapWindow = undefined;
this.baseLayer.classList.remove('dragging');
}
}
</script>
</head>
<body>
<h1>Roll Your Own Google Maps - 9</h1>
<p><a href="8.html">≺ Previous</a> | <a href="10.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>