-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
118 lines (92 loc) · 4.21 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="noiseSliderDiv">
<span>ADD NOISE</span>
<input type='range' id="noiseSlider" min="0" max="10" value="0" step="1" onchange="updateNoise(this.value)" />
</div>
<div id="container">
<div id="mapGoogle"></div>
</div>
<script>
//keep the overlays global as it needs to be accessed from the slider onchange
var overlays;
//make sure the noise slider is at 0
document.querySelector("#noiseSlider").value = 0;
//MAP USED FOR NOISE OVERLAY
function NoiseMapType(tileSize, noiseLevel) {
this.tileSize = tileSize;
this.noiseLevel = noiseLevel;
}
NoiseMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
var canvas = ownerDocument.createElement('canvas');
if (this.noiseLevel > 0) {
canvas.width = this.tileSize.width;
canvas.height = this.tileSize.height;
var ctx = canvas.getContext('2d'),
x, y;
for (x = 0; x < canvas.width; x++)
for (y = 0; y < canvas.height; y++)
if (Math.random() * 60 < this.noiseLevel) {
ctx.fillStyle = "rgba(0,0,0,0.4)";
ctx.fillRect(x, y, 1, 1);
}
}
return canvas;
};
/* triggered by slider
re-creates the noise map overlay with the new noise level */
function updateNoise(noiseLevel) {
overlays.removeAt(0);
overlays.insertAt(0, new NoiseMapType(new google.maps.Size(256, 256), noiseLevel))
}
function initGoogleMap() {
var hongKongBounds = new google.maps.LatLngBounds({
lat: 22.11,
lng: 113.91
}, {
lat: 22.45,
lng: 114.48
}),
hongKongCenter = {
lat: 22.28552,
lng: 114.15769
};
var map = new google.maps.Map(document.getElementById('mapGoogle'), {
zoom: 9,
center: hongKongCenter,
mapTypeId: "MIX",
mapTypeControl: false,
streetViewControl: false
});
map.mapTypes.set("MIX", new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
//how many tiles at this zoom level
var scale = 1 << zoom;
//get the tile SW and NE points. We pass from tile coordinates to world coordinates
var wCoordSW = new google.maps.Point(coord.x * 256 / scale, (coord.y * 256 + 255) / scale),
wCoordNE = new google.maps.Point((coord.x * 256 + 255) / scale, coord.y * 256 / scale);
//and translate from world coord to LatLng
var latLngSW = map.getProjection().fromPointToLatLng(wCoordSW),
latLngNE = map.getProjection().fromPointToLatLng(wCoordNE);
var tileBounds = new google.maps.LatLngBounds(latLngSW, latLngNE);
if (hongKongBounds.intersects(tileBounds))
return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
else
return "http://mt.google.com/vt/hl=en&src=app&x=" + coord.x + "&y=" + coord.y + "&z=" + zoom;
},
tileSize: new google.maps.Size(256, 256),
name: "Mix",
maxZoom: 18
}));
map.overlayMapTypes.insertAt(0, new NoiseMapType(new google.maps.Size(256, 256), 0));
overlays = map.overlayMapTypes;
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD5b5eT8tJ-uGNccJpflGNsL1Xug-VcvHE&callback=initGoogleMap"></script>
</body>
</html>