Skip to content

Commit d1a4213

Browse files
itaywitayw
committed
#1 migrated to mapbox/leaflet
1 parent a0ea039 commit d1a4213

File tree

6 files changed

+318
-105
lines changed

6 files changed

+318
-105
lines changed

‎index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ joola.init({}, function (err) {
1313
joola.users.verifyAPIToken({user: joola.SYSTEM_USER}, 'apitoken-demo', function (err, user) {
1414
function generateRandomData() {
1515
var date = new Date();
16-
var randomGeoPoints = generateRandomPoints({'lat': 32.476664, 'lon': 34.974388}, 1000, 5);
16+
var randomGeoPoints = generateRandomPoints({'lat': 32.476664, 'lon': 34.974388}, 5000, 5);
1717
randomGeoPoints.forEach(function (point) {
1818
point.timestamp = date;
1919
date.setMilliseconds(date.getMilliseconds() - 5);

‎public/css/default.css

+120-29
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ html, body, #map-canvas {
55
padding: 0px
66
}
77

8+
body {
9+
overflow-x: hidden;
10+
}
11+
812
* {
913
-webkit-box-sizing: inherit;
1014
-moz-box-sizing: inherit;
@@ -29,7 +33,11 @@ html, body, #map-canvas {
2933
font-weight: 300;
3034
padding: 0 11px 0 13px;
3135
text-overflow: ellipsis;
32-
width: 250px;
36+
width: 90%;
37+
max-width: 350px;
38+
39+
top: -5px;
40+
position: relative;
3341
}
3442

3543
select.mcontrols {
@@ -147,48 +155,29 @@ select.mcontrols {
147155
}
148156

149157
.left-pane {
150-
position: fixed;
151-
top: -480px;
158+
overflow: scroll;
159+
position: absolute;
160+
top: 0;
152161
left: 0;
153-
height: 600px;
154-
width: 300px;
162+
height: 100%;
163+
min-width: 350px;
164+
width: 350px;
155165
background-color: whitesmoke;
156-
157166
border: 1px solid transparent;
158167
box-sizing: border-box;
159168
-moz-box-sizing: border-box;
160-
161169
outline: none;
162170
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
163-
164171
border-bottom-right-radius: 10px;
165-
/*transition: all 0.5s;
166-
transition-timing-function: ease-in-out;*/
172+
transition: all 0.5s;
173+
transition-timing-function: ease-in-out;
167174
}
168175

169176
.left-pane .logo {
170177
margin-bottom: 30px;
171178
transition: all 0.5s;
172179
transition-timing-function: ease-in-out;
173-
}
174-
175-
.left-pane .logo {
176-
position: relative;
177-
top: 480px;
178-
}
179-
180-
.left-pane.expanded .logo {
181-
top: 0;
182-
left: 0;
183-
}
184-
185-
.left-pane.expanded {
186-
top: 0;
187-
left: 0;
188-
height: 100%;
189-
width: 19%;
190-
border-bottom-right-radius: 0;
191-
min-width: 305px;
180+
margin-right: 20px;
192181
}
193182

194183
.left-pane .content {
@@ -424,4 +413,106 @@ select.mcontrols {
424413
position: absolute;
425414
cursor: col-resize;
426415
z-index: 999
416+
}
417+
418+
.col-sm-3 {
419+
min-width: 300px;
420+
max-width: 350px;
421+
}
422+
423+
.col-sm-12 {
424+
width: 98%;
425+
}
426+
427+
.col-sm-3, .col-sm-9, .col-sm-12 {
428+
min-width: 300px;
429+
padding-left: 0;
430+
}
431+
432+
#drawing-tools-container {
433+
height: 28px;
434+
}
435+
436+
.showmore {
437+
padding-top: 8px;
438+
font-size: 12px;
439+
color: #333;
440+
}
441+
442+
.showmore a {
443+
color: #333;
444+
}
445+
446+
.showmore a:hover {
447+
color: #333;
448+
text-decoration: none;
449+
}
450+
451+
.hide-controls .controls {
452+
display: none;
453+
}
454+
455+
.hide-controls td, .hide-controls th {
456+
font-size: 14px;
457+
padding: 2px !important;
458+
}
459+
460+
.hide-controls .metricboxes {
461+
display: none;
462+
}
463+
464+
.hide-controls [jio-type=table] {
465+
font-size: 12px;
466+
}
467+
468+
.hide-controls .paging-wrapper, .hide-controls .showing {
469+
display: none !important;
470+
}
471+
472+
.menu-ui {
473+
background:#fff;
474+
position:absolute;
475+
top:10px;right:10px;
476+
z-index:1;
477+
border-radius:3px;
478+
width:120px;
479+
border:1px solid rgba(0,0,0,0.4);
480+
}
481+
.menu-ui a {
482+
font-size:13px;
483+
color:#404040;
484+
display:block;
485+
margin:0;padding:0;
486+
padding:5px 10px;
487+
text-decoration:none;
488+
border-bottom:1px solid rgba(0,0,0,0.25);
489+
text-align:center;
490+
}
491+
.menu-ui a:first-child {
492+
border-radius:3px 3px 0 0;
493+
}
494+
.menu-ui a:last-child {
495+
border:none;
496+
border-radius:0 0 3px 3px;
497+
}
498+
.menu-ui a:hover {
499+
background:#f8f8f8;
500+
color:#404040;
501+
}
502+
.menu-ui a.active {
503+
background:#3887BE;
504+
color:#FFF;
505+
}
506+
.menu-ui a.active:hover {
507+
background:#3074a4;
508+
}
509+
510+
.ui-control {
511+
background:#fff;
512+
position:absolute;
513+
bottom:10px;
514+
left:10px;
515+
padding:10px;
516+
border-radius:3px;
517+
z-index:1001;
427518
}

‎public/index.html

+87-65
Original file line numberDiff line numberDiff line change
@@ -8,97 +8,119 @@
88
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
99
<link rel="stylesheet" href="/css/default.css">
1010

11-
11+
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.css' rel='stylesheet' />
12+
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.css' rel='stylesheet' />
13+
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v0.0.4/leaflet.fullscreen.css' rel='stylesheet' />
14+
1215
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
1316
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
1417
<script src="http://layout.jquery-dev.com/lib/js/jquery.layout-latest.js"></script>
1518

16-
<script
17-
src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places,drawing,geometry"></script>
19+
<!--<script
20+
src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places,drawing,geometry"></script>-->
21+
22+
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.js'></script>
23+
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.js'></script>
24+
25+
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v0.0.4/Leaflet.fullscreen.min.js'></script>
26+
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-geodesy/v0.1.0/leaflet-geodesy.js'></script>
27+
<script src="/js/leaflet.js"></script>
1828
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
29+
1930
<script src="http://localhost:8080/joola.js?APIToken=apitoken-demo"></script>
2031
<script src="/js/state.js"></script>
2132
<script src="/js/wireframe.js"></script>
2233
<script src="/js/geohash.js"></script>
2334
<script src="/js/joola.js"></script>
24-
<script src="/js/map.js"></script>
25-
35+
2636
</head>
2737
<body>
2838

2939
<div id="map-canvas"></div>
30-
<div class="left-pane expanded resizable">
40+
<!--
41+
<nav class='menu-ui'>
42+
<a href='#' id='grid' class='active'>Interactivity</a>
43+
<a href='#' id='legend'>Legend</a>
44+
<a href='#' id='zoomer' class='active'>Zoomer</a>
45+
<a href='#' id='fullscreen'>Fullscreen</a>
46+
<a href='#' id='attribution' class='active'>Attribution</a>
47+
<a href='#' id='hash'>Hash</a>
48+
<a href='#' id='geocoder'>Geocoder</a>
49+
<a href='#' id='infocontrol'>Info Control</a>
50+
</nav>-->
51+
<div id='position' class='ui-control'>
52+
<code id='mousemove'></code><br/>
53+
</div>
54+
<div class="left-pane expanded resizable" style="display:none;">
3155
<div id="dragbar"></div>
3256
<div class="content map-controls">
3357
<div class="expand"><i class="glyphicon glyphicon-collapse-up"></i></div>
3458
<img src="http://joo.la/img/joola_full_blue.png" class="logo">
59+
<input id="pac-input" class="mcontrols" type="text" placeholder="Search Box"/>
3560

3661
<div class="outer-wrapper">
37-
<input id="pac-input" class="mcontrols" type="text" placeholder="Search Box"/>
38-
39-
40-
<h3 style="margin-bottom:0;margin-top:40px;">Map overlay</h3>
41-
42-
<p>Control the map look & feel</p>
43-
44-
<div class="row">
45-
<div class="col-md-3">
46-
<form>
47-
<div class="form-group">
48-
<select id="maptype" class="mcontrols">
49-
<option value="hybrid">Hybrid Map</option>
50-
<option value="terrain" selected>Terrain map</option>
51-
<!--<option id="road">Road</option>-->
52-
<option value="satellite">Satellite map</option>
53-
</select>
54-
</div>
55-
<div class="form-group">
56-
<select id="show-heatmap" class="mcontrols">
57-
<option value="heatmap">Show heatmap</option>
58-
<option value="markers" selected>Show markers</option>
59-
</select>
60-
</div>
61-
<div class="form-group">
62-
<select id="show-refresh" class="mcontrols">
63-
<option value="1">Refresh every 1 second</option>
64-
<option value="5" selected>Refresh every 5 seconds</option>
65-
<option value="15">Refresh every 15 seconds</option>
66-
<option value="30">Refresh every 30 seconds</option>
67-
</select>
68-
</div>
69-
<div class="form-group">
70-
<select id="show-leave" class="mcontrols">
71-
<option value="1">Leave a 5 seconds tail</option>
72-
<option value="5" selected>Leave a 15 seconds tail</option>
73-
<option value="15">Leave a 30 seconds tail</option>
74-
<option value="30">Leave a 60 seconds tail</option>
75-
</select>
76-
</div>
77-
</form>
78-
</div>
79-
<div class="col-md-3">
80-
<div class="content filters">
81-
<h3 style="margin-bottom:0;margin-top:0;">Filters</h3>
8262

83-
<p style="padding-top:10px;">Draw polygons to indicate what geo sources should be included and filter by
84-
dimensions
85-
and metrics to further refine the results.</p>
86-
<h4 id="drawing-tools-label">Drawing tools</h4>
63+
<div class="col-sm-3">
64+
<h3 style="margin-bottom:0;margin-top:20px;">Map overlay</h3>
8765

88-
<p>Draw polygons and filter results.</p>
66+
<p>Control the map look & feel</p>
8967

90-
<div id="drawing-tools-container"></div>
68+
<form>
69+
<div class="form-group">
70+
<select id="maptype" class="mcontrols">
71+
<option value="hybrid">Hybrid Map</option>
72+
<option value="terrain" selected>Terrain map</option>
73+
<!--<option id="road">Road</option>-->
74+
<option value="satellite">Satellite map</option>
75+
</select>
76+
</div>
77+
<div class="form-group">
78+
<select id="show-heatmap" class="mcontrols">
79+
<option value="heatmap">Show heatmap</option>
80+
<option value="markers" selected>Show markers</option>
81+
</select>
82+
</div>
83+
<div class="form-group">
84+
<select id="show-refresh" class="mcontrols hideonshrink">
85+
<option value="1">Refresh every 1 second</option>
86+
<option value="5" selected>Refresh every 5 seconds</option>
87+
<option value="15">Refresh every 15 seconds</option>
88+
<option value="30">Refresh every 30 seconds</option>
89+
</select>
90+
</div>
91+
<div class="form-group">
92+
<select id="show-leave" class="mcontrols hideonshrink">
93+
<option value="1">Leave a 5 seconds tail</option>
94+
<option value="5" selected>Leave a 15 seconds tail</option>
95+
<option value="15">Leave a 30 seconds tail</option>
96+
<option value="30">Leave a 60 seconds tail</option>
97+
</select>
98+
</div>
99+
</form>
100+
<div class="showmore"><a href="#" class="">show more...</a>
101+
</div>
91102
</div>
92-
</div> </div>
103+
<div class="col-sm-3">
104+
<div class="filters" style="padding-top:0">
105+
<h3 style="margin-bottom:0;margin-top:20px;">Filters</h3>
93106

94-
<div class="row">
95-
<div class="col-md-9">
96-
<div class="visualizations">
97-
<div id="table"></div>
98-
</div>
107+
<p style="padding-top:10px;">Draw polygons and filter by
108+
dimensions
109+
and metrics to refine the results.</p>
110+
111+
<div id="drawing-tools-container"></div>
112+
</div>
113+
<div class="showmore"><a href="#" class="">show more...</a>
99114
</div>
100115
</div>
101116

117+
<div class="col-sm-12">
118+
<div class="visualizations">
119+
<div id="table"></div>
120+
</div>
121+
</div>
122+
123+
102124
<p class="bounds" style="padding-top:30px;">Map visible boundaries:
103125
<br/>
104126
<span id="bounds-right-top" class="bounds"></span><br/>
@@ -109,12 +131,12 @@ <h4 id="drawing-tools-label">Drawing tools</h4>
109131
</div>
110132

111133

112-
<div class="right-pane">
134+
<div class="right-pane" style="visibility:hidden;">
113135

114136
<div class="eps-counter">
115137
<div class="eps-label"></div>
116138
<div class="eps-chart"></div>
117-
<div id="player">
139+
<div id="player"style="display:none;">
118140
<div id="volume"></div>
119141
</div>
120142
</div>

0 commit comments

Comments
 (0)