Merge pull request #13982 from MoonE/kml-timezone

Fix kml-timezone example calculations

examples/data/kml/timezones.kml

@@ -530,7 +530,7 @@
 			</MultiGeometry>
 		</Placemark>
 		<Placemark>
-			<name>GMT -03.30</name>
+			<name>GMT -03:30</name>
 		<description><![CDATA[<div style="width:300px;height:50px;"  id="clock" ></div>
 <script language="JavaScript">
       var int=self.setInterval("tick()",50);

examples/kml-timezones.js

@@ -14,20 +14,13 @@ import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
  * daylight savings, so don't use it to plan your vacation.
  */
 const styleFunction = function (feature) {
-  let offset = 0;
+  const tzOffset = feature.get('tz-offset');
-  const name = feature.get('name'); // e.g. GMT -08:30
+  const local = new Date();
-  const match = name.match(/([\-+]\d{2}):(\d{2})$/);
+  local.setTime(
-  if (match) {
+    local.getTime() + (local.getTimezoneOffset() + (tzOffset || 0)) * 60000
-    const hours = parseInt(match[1], 10);
-    const minutes = parseInt(match[2], 10);
-    offset = 60 * hours + minutes;
-  }
-  const date = new Date();
-  const local = new Date(
-    date.getTime() + (date.getTimezoneOffset() + offset) * 60000
   );
   // offset from local noon (in hours)
-  let delta = Math.abs(12 - local.getHours() + local.getMinutes() / 60);
+  let delta = Math.abs(12 - (local.getHours() + local.getMinutes() / 60));
   if (delta > 12) {
     delta = 24 - delta;
   }
@@ -52,6 +45,28 @@ const vector = new VectorLayer({
   style: styleFunction,
 });
 
+/**
+ * @param {string} name e.g. GMT -08:30
+ * @return {number|null} The offset from UTC in minutes
+ */
+function parseOffsetFromUtc(name) {
+  const match = name.match(/([+-]?)(\d{2}):(\d{2})$/);
+  if (!match) {
+    return null;
+  }
+  const sign = match[1] === '-' ? -1 : 1;
+  const hours = Number(match[2]);
+  const minutes = Number(match[3]);
+  return sign * (60 * hours + minutes);
+}
+
+vector.getSource().on('featuresloadend', function (evt) {
+  evt.features.forEach(function (feature) {
+    const tzOffset = parseOffsetFromUtc(feature.get('name'));
+    feature.set('tz-offset', tzOffset, true);
+  });
+});
+
 const raster = new TileLayer({
   source: new Stamen({
     layer: 'toner',