Skip to content

Commit 6096bbd

Browse files
rossengeorgievrossengeorgiev
committed
added labels to horizon rings and vehicles
* label for vehicles shows the callsign * label on each horizon shows range in km/miles * request all gmaps libraries in one go, instead of seperately
1 parent 9cc8419 commit 6096bbd

File tree

5 files changed

+178
-24
lines changed

5 files changed

+178
-24
lines changed

‎build.sh‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ cat jquery* iscroll.js >> mobile.js
2020
VERSION="`git rev-parse --short HEAD`"
2121

2222
# compile the rest
23+
java -jar "../tools/yuicompressor-2.4.8pre.jar" --type=js --disable-optimizations --nomunge gmaps_extentions.js >> mobile.js
2324
java -jar "../tools/yuicompressor-2.4.8pre.jar" --type=js --disable-optimizations --nomunge chasecar.lib.js | sed "s/{VER}/$VERSION/" >> mobile.js
2425
java -jar "../tools/yuicompressor-2.4.8pre.jar" --type=js --disable-optimizations --nomunge nite-overlay.js >> mobile.js
2526
java -jar "../tools/yuicompressor-2.4.8pre.jar" --type=js --disable-optimizations --nomunge tracker.js >> mobile.js

‎cache.manifest-dev‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,7 @@ CACHE MANIFEST
22
# version {VERSION}
33

44
# gogole maps files
5-
http://maps.gstatic.com/cat_js/maps-api-v3/api/js/16/15/%7Bmain,weather%7D.js
6-
http://maps.gstatic.com/maps-api-v3/api/js/16/15/common.js
7-
http://maps.gstatic.com/maps-api-v3/api/js/16/15/map.js
8-
http://maps.gstatic.com/maps-api-v3/api/js/16/15/util.js
9-
http://maps.gstatic.com/maps-api-v3/api/js/16/15/onion.js
10-
http://maps.gstatic.com/maps-api-v3/api/js/16/15/kml.js
11-
http://maps.gstatic.com/maps-api-v3/api/js/16/15/marker.js
12-
http://maps.gstatic.com/maps-api-v3/api/js/16/15/stats.js
13-
http://maps.gstatic.com/maps-api-v3/api/js/16/15/geometry.js
14-
http://maps.gstatic.com/maps-api-v3/api/js/16/15/poly.js
15-
http://maps.gstatic.com/maps-api-v3/api/js/16/15/overlay.js
16-
http://maps.gstatic.com/maps-api-v3/api/js/16/15/weather_impl.js
17-
http://maps.gstatic.com/maps-api-v3/api/js/16/15/controls.js
18-
http://maps.gstatic.com/maps-api-v3/api/js/16/15/infowindow.js
5+
http://maps.gstatic.com/cat_js/maps-api-v3/api/js/16/16/%7Bmain,common,controls,ga,geometry,infowindow,kml,map,marker,onion,overlay,poly,stats,util,weather,weather_impl%7D.js
196
http://fonts.googleapis.com/css?family=Roboto:300,400,500,700
207
http://maps.gstatic.com/mapfiles/undo_poly.png
218
http://maps.gstatic.com/mapfiles/mv/imgs8.png

‎index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -299,9 +299,10 @@ <h2>Chase car mode</h2>
299299
</div>
300300
</div>
301301
</div>
302-
<script src="http://maps.google.com/maps/api/js?v=3.16&sensor=false&libraries=weather&language=en_us&key=AIzaSyCOqkcNey4CCyG4X0X5qxHAhCgD8g5DwXg" type="text/javascript"></script>
302+
<script src="http://maps.google.com/maps/api/js?v=3.16&sensor=false&libraries=map,common,controls,util,marker,onion,kml,ga,infowindow,stats,poly,overlay,weather,weather_impl,geometry&language=en_us&key=AIzaSyCOqkcNey4CCyG4X0X5qxHAhCgD8g5DwXg" type="text/javascript"></script>
303303
<script type="text/javascript" language="javascript" src="js/mobile.js"></script>
304304
<!--
305+
<script type="text/javascript" language="javascript" src="js/gmaps_extentions.js"></script>
305306
<script type="text/javascript" language="javascript" src="js/jquery-1.8.3-min.js"></script>
306307
<script type="text/javascript" language="javascript" src="js/chasecar.lib.js"></script>
307308
<script type="text/javascript" language="javascript" src="js/iscroll.js"></script>

‎js/gmaps_extentions.js‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
2+
// custom label function
3+
4+
google.maps.Label = function(opt_options) {
5+
// init default values
6+
this.set('visible', true);
7+
this.set('opacity', 1);
8+
this.set('clickable', false);
9+
this.set('strokeColor', "#00F");
10+
this.set('text', "");
11+
this.set('textOnly', false); // true only text, false text within a box
12+
13+
this.setValues(opt_options);
14+
15+
var span = this.span_ = document.createElement('span');
16+
span.style.cssText = 'position: relative; left: -50%;' +
17+
'white-space: nowrap; color: #000;';
18+
19+
span.style.cssText += !this.get('textOnly') ?
20+
'border: 1px solid '+this.get('strokeColor')+'; border-radius: 5px; ' +
21+
'top:-12px;font-size:9px;padding: 2px; background-color: white'
22+
:
23+
'top:-8px;font-size:12px;font-weight: bold; text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;'
24+
;
25+
26+
var div = this.div_ = document.createElement('div');
27+
div.appendChild(span);
28+
div.style.cssText = 'position: absolute; display: none';
29+
};
30+
31+
google.maps.Label.prototype = new google.maps.OverlayView();
32+
33+
34+
// Implement onAdd
35+
google.maps.Label.prototype.onAdd = function() {
36+
var pane = this.getPanes().overlayImage;
37+
pane.appendChild(this.div_);
38+
39+
// redraw if any option is changed
40+
var ctx = this;
41+
var callback = function() { ctx.draw(); };
42+
this.listeners_ = [
43+
google.maps.event.addListener(this, 'opacity_changed', callback),
44+
google.maps.event.addListener(this, 'position_changed', callback),
45+
google.maps.event.addListener(this, 'visible_changed', callback),
46+
google.maps.event.addListener(this, 'clickable_changed', callback),
47+
google.maps.event.addListener(this, 'text_changed', callback),
48+
google.maps.event.addListener(this, 'zindex_changed', callback),
49+
google.maps.event.addDomListener(this.div_, 'click', function() {
50+
if (me.get('clickable')) {
51+
google.maps.event.trigger(me, 'click');
52+
}
53+
})
54+
];
55+
};
56+
57+
58+
// Implement onRemove
59+
google.maps.Label.prototype.onRemove = function() {
60+
this.div_.parentNode.removeChild(this.div_);
61+
62+
// remove all listeners
63+
for (var i = 0, j = this.listeners_.length; i < j; i++) {
64+
google.maps.event.removeListener(this.listeners_[i]);
65+
}
66+
};
67+
68+
69+
// Implement draw
70+
google.maps.Label.prototype.draw = function() {
71+
var projection = this.getProjection();
72+
var position = projection.fromLatLngToDivPixel(this.get('position'));
73+
74+
var div = this.div_;
75+
if(position !== null) {
76+
div.style.left = position.x + 'px';
77+
div.style.top = position.y + 'px';
78+
}
79+
80+
div.style.display = this.get('visible') && this.get('opacity') >= 0.6 ? 'block' : 'none';
81+
this.span_.style.cursor = this.get('clickable') ? 'pointer' : '';
82+
div.style.zIndex = this.get('zIndex');
83+
this.span_.innerHTML = this.get('text').toString();
84+
};

‎js/tracker.js‎

Lines changed: 90 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -354,7 +354,7 @@ function load() {
354354
overlay.draw = function() {};
355355
overlay.setMap(map);
356356

357-
google.maps.event.addListener(map, 'idle', function() {
357+
google.maps.event.addListener(map, 'zoom_changed', function() {
358358
updateZoom();
359359
});
360360

@@ -530,9 +530,13 @@ function habitat_data(jsondata) {
530530
function updateAltitude(vcallsign) {
531531
var pixel_altitude = 0;
532532
var zoom = map.getZoom();
533-
var position = vehicles[vcallsign].curr_position;
533+
var vehicle = vehicles[vcallsign];
534+
var position = vehicle.curr_position;
534535

535-
if(vehicles[vcallsign].marker.mode == 'landed') return;
536+
if(vehicle.marker.mode == 'landed') {
537+
vehicle.marker.setPosition(vehicle.marker.getPosition());
538+
return;
539+
}
536540

537541
if(zoom > 18) zoom = 18;
538542
if(position.gps_alt > 0) {
@@ -543,15 +547,22 @@ function updateAltitude(vcallsign) {
543547
} else if(position.gps_alt > 55000) {
544548
position.gps_alt = 55000;
545549
}
546-
vehicles[vcallsign].marker.setAltitude(pixel_altitude);
550+
vehicle.marker.setAltitude(pixel_altitude);
547551
}
548552

549553
function updateZoom() {
550-
for(var vcallsign in vehicles) {
551-
if(vehicles[vcallsign].vehicle_type == "balloon") {
552-
updateAltitude(vcallsign);
554+
for(var vcallsign in vehicles) {
555+
var vehicle = vehicles[vcallsign];
556+
557+
if(vehicle.vehicle_type == "balloon") {
558+
updateAltitude(vcallsign);
559+
} else {
560+
vehicle.marker.setPosition(vehicle.marker.getPosition());
561+
}
562+
563+
if(vehicle.marker_shadow)
564+
vehicle.marker_shadow.setPosition(vehicle.marker_shadow.getPosition());
553565
}
554-
}
555566
}
556567

557568
function focusVehicle(vcallsign, ignoreOpt) {
@@ -1189,13 +1200,13 @@ function addPosition(position) {
11891200
};
11901201
}
11911202
this.setIcon(img);
1203+
this.setPosition(this.getPosition());
11921204
};
11931205
marker.setAltitude = function(alt) {
11941206
var pos = overlay.getProjection().fromLatLngToDivPixel(this.shadow.getPosition());
11951207
pos.y -= alt;
11961208
this.setPosition(overlay.getProjection().fromDivPixelToLatLng(pos));
11971209
};
1198-
marker.setAltitude(0);
11991210

12001211
horizon_circle = new google.maps.Circle({
12011212
map: map,
@@ -1210,6 +1221,35 @@ function addPosition(position) {
12101221
editable: false
12111222
});
12121223
horizon_circle.bindTo('center', marker_shadow, 'position');
1224+
1225+
// label
1226+
var label = new google.maps.Label({ map: map, strokeColor: horizon_circle.get('strokeColor') });
1227+
//label.bindTo('visible', horizon_circle, 'visible');
1228+
label.bindTo('opacity', horizon_circle, 'strokeOpacity');
1229+
label.bindTo('zIndex', horizon_circle, 'zIndex');
1230+
label.bindTo('strokeColor', horizon_circle, 'strokeColor');
1231+
1232+
var refresh_func = function() {
1233+
if(marker.mode == "landed") return;
1234+
1235+
var north = google.maps.geometry.spherical.computeOffset(horizon_circle.getCenter(), horizon_circle.getRadius(), 0);
1236+
var south = google.maps.geometry.spherical.computeOffset(horizon_circle.getCenter(), horizon_circle.getRadius(), 180);
1237+
1238+
var projection = label.getProjection();
1239+
var dist = projection.fromLatLngToDivPixel(south).y -
1240+
projection.fromLatLngToDivPixel(north).y;
1241+
1242+
var val = horizon_circle.getRadius() / 1000;
1243+
val = offline.get('opt_imperial') ? Math.round(val * 0.621371192) + "mi" : Math.round(val) + "km";
1244+
1245+
label.set('visible', (75 < dist));
1246+
label.set('position', google.maps.geometry.spherical.computeOffset(horizon_circle.getCenter(), horizon_circle.getRadius(), 180));
1247+
label.set('text', val);
1248+
};
1249+
1250+
google.maps.event.addListener(horizon_circle, 'center_changed', refresh_func);
1251+
google.maps.event.addListener(horizon_circle, 'radius_changed', refresh_func);
1252+
12131253
subhorizon_circle = new google.maps.Circle({
12141254
map: map,
12151255
radius: 1,
@@ -1223,7 +1263,48 @@ function addPosition(position) {
12231263
editable: false
12241264
});
12251265
subhorizon_circle.bindTo('center', marker_shadow, 'position');
1266+
1267+
var label2 = new google.maps.Label({ map: map, strokeColor: subhorizon_circle.get('strokeColor') });
1268+
//label2.bindTo('visible', subhorizon_circle, 'visible');
1269+
label2.bindTo('opacity', subhorizon_circle, 'strokeOpacity');
1270+
label2.bindTo('zIndex', subhorizon_circle, 'zIndex');
1271+
label2.bindTo('strokeColor', subhorizon_circle, 'strokeColor');
1272+
1273+
refresh_func = function() {
1274+
if(marker.mode == "landed") return;
1275+
1276+
var north = google.maps.geometry.spherical.computeOffset(subhorizon_circle.getCenter(), subhorizon_circle.getRadius(), 0);
1277+
var south = google.maps.geometry.spherical.computeOffset(subhorizon_circle.getCenter(), subhorizon_circle.getRadius(), 180);
1278+
1279+
var projection = label2.getProjection();
1280+
var dist = projection.fromLatLngToDivPixel(south).y -
1281+
projection.fromLatLngToDivPixel(north).y;
1282+
1283+
var val = subhorizon_circle.getRadius() / 1000;
1284+
val = offline.get('opt_imperial') ? Math.round(val * 0.621371192) + "mi" : Math.round(val) + "km";
1285+
1286+
label2.set('visible', (75 < dist));
1287+
label2.set('position', google.maps.geometry.spherical.computeOffset(subhorizon_circle.getCenter(), subhorizon_circle.getRadius(), 180));
1288+
label2.set('text', val);
1289+
};
1290+
google.maps.event.addListener(subhorizon_circle, 'center_changed', refresh_func);
1291+
google.maps.event.addListener(subhorizon_circle, 'radius_changed', refresh_func);
1292+
1293+
marker.setAltitude(0);
12261294
}
1295+
1296+
// add label above every marker
1297+
var mlabel = new google.maps.Label({map: map, textOnly: true, position: marker.getPosition() });
1298+
mlabel.bindTo('text', marker, 'title');
1299+
mlabel.bindTo('zIndex', marker, 'zIndex');
1300+
google.maps.event.addListener(marker, 'position_changed', function() {
1301+
var pos = mlabel.getProjection().fromLatLngToDivPixel(marker.getPosition());
1302+
pos.y -= marker.icon.size.height + 10;
1303+
mlabel.set('position',mlabel.getProjection().fromDivPixelToLatLng(pos));
1304+
});
1305+
marker._label = mlabel;
1306+
marker.setPosition(marker.getPosition()); // activates the logic above to reposition the label
1307+
12271308
var vehicle_info = {
12281309
uuid: elm_uuid++,
12291310
vehicle_type: vehicle_type,

0 commit comments

Comments
 (0)