Timezones in KML

This example uses OpenLayers v4.0.1. The latest is v.

#### Timezones in KML

Demonstrates rendering timezones from KML.

This example parses a KML file and renders the features as a vector layer. The layer is given a `ol.style.Style` that fills timezones yellow with an opacity calculated based on the current offset to local noon.

Related API documentation:

- ol.Map
,
- ol.View
,
- ol.format.KML
,
- ol.layer.Tile
,
- ol.layer.Vector
,
- ol.source.Stamen
,
- ol.source.Vector
,
- ol.style.Fill
,
- ol.style.Stroke
,
- ol.style.Style

Copy Edit
Timezones in KML Demonstrates rendering timezones from KML. /* * Compute the style of the feature. Here we want the opacity 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 0.75. And a 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. */ var styleFunction = function(feature) { var offset = 0; var name = feature.get('name'); // e.g. GMT -08:30 var match = name.match(/([\-+]\d{2}):(\d{2})$/); if (match) { var hours = parseInt(match[1], 10); var minutes = parseInt(match[2], 10); offset = 60 * hours + minutes; } 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; } var opacity = 0.75 * (1 - delta / 12); return new ol.style.Style({ fill: new ol.style.Fill({ color: [0xff, 0xff, 0x33, opacity] }), stroke: new ol.style.Stroke({ color: '#ffffff' }) }); }; var vector = new ol.layer.Vector({ source: new ol.source.Vector({ url: 'https://openlayers.org/en/v4.0.1/examples/data/kml/timezones.kml', format: new ol.format.KML({ extractStyles: false }) }), style: styleFunction }); var raster = new ol.layer.Tile({ source: new ol.source.Stamen({ layer: 'toner' }) }); var map = new ol.Map({ layers: [raster, vector], target: 'map', view: new ol.View({ center: [0, 0], zoom: 2 }) }); var info = $('#info'); info.tooltip({ animation: false, trigger: 'manual' }); var displayFeatureInfo = function(pixel) { info.css({ left: pixel[0] + 'px', top: (pixel[1] - 15) + 'px' }); var feature = map.forEachFeatureAtPixel(pixel, function(feature) { return feature; }); if (feature) { info.tooltip('hide') .attr('data-original-title', feature.get('name')) .tooltip('fixTitle') .tooltip('show'); } else { info.tooltip('hide'); } }; map.on('pointermove', function(evt) { if (evt.dragging) { info.tooltip('hide'); return; } displayFeatureInfo(map.getEventPixel(evt.originalEvent)); }); map.on('click', function(evt) { displayFeatureInfo(evt.pixel); }); #map { position: relative; } #info { position: absolute; height: 1px; width: 1px; z-index: 100; } <div id="map" class="map"><div id="info"></div></div>

    <!DOCTYPE html>
    <html>
      <head>
        <title>Timezones in KML</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
        <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
        <script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
        <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <style>
          #map {
            position: relative;
          }
          #info {
            position: absolute;
            height: 1px;
            width: 1px;
            z-index: 100;
          }
        </style>
      </head>
      <body>
        <div id="map" class="map"><div id="info"></div></div>
        <script>
          /*
           * Compute the style of the feature.  Here we want the opacity 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 0.75.  And a 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.
           */
          var styleFunction = function(feature) {
            var offset = 0;
            var name = feature.get('name'); // e.g. GMT -08:30
            var match = name.match(/([\-+]\d{2}):(\d{2})$/);
            if (match) {
              var hours = parseInt(match[1], 10);
              var minutes = parseInt(match[2], 10);
              offset = 60 * hours + minutes;
            }
            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;
            }
            var opacity = 0.75 * (1 - delta / 12);
            return new ol.style.Style({
              fill: new ol.style.Fill({
                color: [0xff, 0xff, 0x33, opacity]
              }),
              stroke: new ol.style.Stroke({
                color: '#ffffff'
              })
            });
          };

          var vector = new ol.layer.Vector({
            source: new ol.source.Vector({
              url: 'https://openlayers.org/en/v4.0.1/examples/data/kml/timezones.kml',
              format: new ol.format.KML({
                extractStyles: false
              })
            }),
            style: styleFunction
          });

          var raster = new ol.layer.Tile({
            source: new ol.source.Stamen({
              layer: 'toner'
            })
          });

          var map = new ol.Map({
            layers: [raster, vector],
            target: 'map',
            view: new ol.View({
              center: [0, 0],
              zoom: 2
            })
          });

          var info = $('#info');
          info.tooltip({
            animation: false,
            trigger: 'manual'
          });

          var displayFeatureInfo = function(pixel) {
            info.css({
              left: pixel[0] + 'px',
              top: (pixel[1] - 15) + 'px'
            });
            var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
              return feature;
            });
            if (feature) {
              info.tooltip('hide')
                  .attr('data-original-title', feature.get('name'))
                  .tooltip('fixTitle')
                  .tooltip('show');
            } else {
              info.tooltip('hide');
            }
          };

          map.on('pointermove', function(evt) {
            if (evt.dragging) {
              info.tooltip('hide');
              return;
            }
            displayFeatureInfo(map.getEventPixel(evt.originalEvent));
          });

          map.on('click', function(evt) {
            displayFeatureInfo(evt.pixel);
          });
        </script>
      </body>
    </html>