ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Timezone offset in a tooltip

Browse Source
This commit is contained in:
Tim Schaub
2013-06-27 14:45:28 -06:00
parent aab5c8472c
commit a2bc986785
2 changed files with 56 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
examples/kml-timezones.html
View File

@@ -8,6 +8,17 @@
<link rel="stylesheet" href="../resources/layout.css" type="text/css"> <link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css"> <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Timezones in KML</title> <title>Timezones in KML</title>
<style>
#map {
position: relative;
}
#info {
position: absolute;
height: 1px;
width: 1px;
z-index: 100;
}
</style>
</head> </head>
<body> <body>
@@ -29,7 +40,7 @@
<div class="row-fluid"> <div class="row-fluid">
<div class="span12"> <div class="span12">
<div id="map" class="map"></div> <div id="map" class="map"><div id="info"></div></div>
</div> </div>
</div> </div>
@@ -48,6 +59,8 @@
</div> </div>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="loader.js?id=kml-timezones" type="text/javascript"></script> <script src="loader.js?id=kml-timezones" type="text/javascript"></script>
<script src="../resources/social-links.js" type="text/javascript"></script> <script src="../resources/social-links.js" type="text/javascript"></script>

55
examples/kml-timezones.js
View File

@@ -16,28 +16,29 @@ goog.require('ol.style.Style');
/** /**
* Register a function to be used in a symbolizer. Here we want the opacity * Register a function to be used in a symbolizer. Here we want the opacity
* of polygons to be based on the offset from local noon. For example, a * of polygons to be based on the offset from local noon. For example, a
* timezone where it is currently noon would have an opacity of 1. And a * timezone where it is currently noon would have an opacity of 0.75. And a
* timezone where it is currently 6:00am would have an opacity of 0.5. * timezone where it is currently midnight would have an opacity of 0. This
* doesn't account for daylight savings, so don't use it to plan your vacation.
*/ */
ol.expr.register('getOpacity', function() { ol.expr.register('getOpacity', function() {
var feature = this; var feature = this;
var opacity = 0; var offset = 0;
var name = feature.get('name'); // e.g. GMT -08:30 var name = feature.get('name'); // e.g. GMT -08:30
var match = name.match(/([-+]\d{2}):(\d{2})$/); var match = name.match(/([-+]\d{2}):(\d{2})$/);
if (match) { if (match) {
var hours = parseInt(match[1], 10); var hours = parseInt(match[1], 10);
var minutes = parseInt(match[2], 10); var minutes = parseInt(match[2], 10);
var date = new Date(); offset = 60 * hours + minutes;
var diff = 60 * hours + minutes + date.getTimezoneOffset();
var remote = new Date(date.getTime() + diff * 60000);
// offset from local noon (in hours)
var offset = Math.abs(12 - remote.getHours() + (remote.getMinutes() / 60));
if (offset > 12) {
offset = 24 - offset;
}
opacity = 1 - offset / 12;
} }
return opacity; var date = new Date();
var local = new Date(date.getTime() +
(date.getTimezoneOffset() + offset) * 60000);
// offset from local noon (in hours)
var delta = Math.abs(12 - local.getHours() + (local.getMinutes() / 60));
if (delta > 12) {
delta = 24 - delta;
}
return 0.75 * (1 - delta / 12);
}); });
var style = new ol.style.Style({rules: [ var style = new ol.style.Style({rules: [
@@ -75,6 +76,34 @@ var map = new ol.Map({
}) })
}); });
var info = $('#info');
info.tooltip({
animation: false,
trigger: 'manual'
});
map.on(['click', 'mousemove'], function(evt) {
var pixel = evt.getPixel();
info.css({
left: pixel[0] + 'px',
top: (pixel[1] - 15) + 'px'
});
map.getFeatures({
pixel: pixel,
layers: [vector],
success: function(layerFeatures) {
var feature = layerFeatures[0][0];
if (feature) {
info.tooltip('hide')
.attr('data-original-title', feature.get('name'))
.tooltip('fixTitle')
.tooltip('show');
} else {
info.tooltip('hide');
}
}
});
});
var kml = new ol.parser.KML({dimension: 2}); var kml = new ol.parser.KML({dimension: 2});
var url = 'data/kml/timezones.kml'; var url = 'data/kml/timezones.kml';