-
Notifications
You must be signed in to change notification settings - Fork 9
/
index.html
144 lines (144 loc) · 8.92 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="We consider several ways to show animated google maps markers. They are: native markers, custom div overlay and custom canvas overlay. Perfomance measuring is based on requestAnimationFrame method.">
<meta name="author" content="Alexey Kuznetsov">
<title>Markers animation test</title>
<link rel="stylesheet" media="screen" href="lib/bootstrap-3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" media="screen" href="css/s.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="lib/bootstrap-3.0.0/assets/js/html5shiv.js"></script>
<script src="lib/bootstrap-3.0.0/assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="loading" data-bind="style:{opacity:isVisible()?'0':'1'}"></div>
<div class="container" style="display:none;opacity:0;" data-bind="visible:isReady,style:{opacity:isVisible()?'1':'0'}">
<div class="header">
<h3>Markers animation test</h3>
<p>
We consider several ways to show animated google maps markers.
They are: native markers, custom div overlay and custom canvas overlay.
Perfomance measuring is based on requestAnimationFrame method.
</p>
</div>
<div class="row">
<div class="col-lg-6">
<div class="menu-block">
<form class="form-horizontal" role="form">
<fieldset>
<legend>Draw settings</legend>
<div class="form-group">
<label class="col-lg-4 control-label" for="engine">Draw engine</label>
<div class="col-lg-8">
<!-- ko foreach: engines -->
<button type="button" class="btn btn-default" data-bind="click:$parent.selectEngine.bind($parent,$data),css:{'btn-primary':$parent.engineName()==$data},text:$data"></button>
<!-- /ko -->
</div>
</div>
<!-- ko if: engineName() == "native" -->
<div class="help-block">Native engine uses google maps markers and google maps polylines as markers tracks.</div>
<div class="checkbox"><label><input type="checkbox" data-bind="checked:useSecondPolyline"> Use second polyline for storing static track part</label></div>
<!-- /ko -->
<!-- ko if: engineName() == "divs" -->
<div class="help-block">Div engine uses custom overlay and draws each marker as a small div, tracks (if shown) use native google maps polylines.</div>
<div class="checkbox"><label><input type="checkbox" data-bind="checked:useSecondPolyline"> Use second polyline for storing static track part</label></div>
<div class="checkbox"><label><input type="checkbox" data-bind="checked:optimizeGeoCalculations"> Optimize geo calculations</label></div>
<!-- /ko -->
<!-- ko if: engineName() == "canvas" -->
<div class="help-block">Canvas engine uses one big canvas layer as a custom overlay, that refreshes and redraws all markers and tracks every frame.</div>
<div class="checkbox"><label><input type="checkbox" data-bind="checked:useSecondCanvas"> Use second canvas layer for storing static tracks</label></div>
<div class="checkbox"><label><input type="checkbox" data-bind="checked:prepareIcons"> Prepare and cache canvas icons</label></div>
<div class="checkbox"><label><input type="checkbox" data-bind="checked:optimizeGeoCalculations"> Optimize geo calculations</label></div>
<div class="checkbox"><label><input type="checkbox" data-bind="checked:simplifyTracks"> Use simplify.js from Leaflet with 10px precision</label></div>
<!-- /ko -->
<!-- ko if: engineName() == "canvasTile" -->
<div class="help-block">Canvas tile engine splits one big canvas to tiles and uses custom map type. The advantage is that tiles with tracks do not redraw on map drag.</div>
<div class="checkbox"><label><input type="checkbox" data-bind="checked:useSecondCanvas"> Use canvas tile layer for storing static tracks</label></div>
<div class="checkbox"><label><input type="checkbox" data-bind="checked:prepareIcons"> Prepare and cache canvas icons</label></div>
<div class="checkbox"><label><input type="checkbox" data-bind="checked:optimizeGeoCalculations"> Optimize geo calculations</label></div>
<div class="checkbox"><label><input type="checkbox" data-bind="checked:simplifyTracks"> Use simplify.js from Leaflet with 10px precision</label></div>
<!-- /ko -->
<div class="checkbox"><label><input type="checkbox" data-bind="checked:showTracks"> Show tracks</label></div>
<div class="checkbox"><label><input type="checkbox" data-bind="checked:animate"> Animate markers</label></div>
</fieldset>
</form>
</div>
</div>
<div class="col-lg-6">
<div class="menu-block">
<form class="form-horizontal" role="form">
<fieldset>
<legend>Generator settings</legend>
<div class="form-group">
<label class="col-lg-4 control-label" for="amount">Total amount</label>
<div class="col-lg-3">
<input type="number" class="form-control" id="amount" data-bind="value:amount">
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label">TopLeft bound</label>
<div class="col-lg-4"><input type="number" class="form-control" data-bind="value:bounds.tlLat"></div>
<div class="col-lg-4"><input type="number" class="form-control" data-bind="value:bounds.tlLng"></div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label">Bot.Right bound</label>
<div class="col-lg-4"><input type="number" class="form-control" data-bind="value:bounds.brLat"></div>
<div class="col-lg-4"><input type="number" class="form-control" data-bind="value:bounds.brLng"></div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label">Speed and angle</label>
<div class="col-lg-4">
<input type="number" class="form-control" data-bind="value:speed">
</div>
<div class="col-lg-4">
<input type="number" class="form-control" data-bind="value:angle">
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label" for="prob">Move & hold prob.</label>
<div class="col-lg-4">
<input type="number" class="form-control" id="prob" data-bind="value:moveProb">
</div>
<div class="col-lg-4">
<input type="number" class="form-control" id="prob" data-bind="value:holdProb">
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="menu-block">
<form class="form-inline" role="form">
<fieldset>
<legend>Measurer</legend>
<div class="clearfix">
<div class="pull-left">
<button class="btn btn-primary" data-bind="click:play,visible:state()=='pause'">Play</button>
<button class="btn btn-primary" data-bind="click:pause,visible:state()=='play'">Pause</button>
<span data-bind="visible:state()=='play'">
FPS: <span data-bind="text:fps"></span>
</span>
</div>
<div class="pull-right">
<span class="checkbox"><label><input type="checkbox" data-bind="checked:coloredTracks"> ColoredTracks</label></span>
<span class="checkbox"><label><input type="checkbox" data-bind="checked:showBounds"> Show bounds</label></span>
<button class="btn btn-default" data-bind="click:fitBounds">Fit bounds</button>
<button class="btn btn-default" data-bind="click:resetTracks">Reset tracks</button>
<button class="btn btn-default" data-bind="click:resetMarkers">Reset markers</button>
</div>
</div>
</fieldset>
</form>
</div>
<div class="map-container">
<div id="map" class="map"></div>
</div>
</div>
<script type="text/javascript" src="lib/require-2.1.8.min.js" data-main="js/init"></script>
</body>
</html>