I have my openlayers-based website, and we are planning to add a timezone map. We want to show a clock with the current time on top of each area. Is that even possible with Openlayers and Javascript?

  • Welcome to gis.stackexchange! Please note that a good question on this site is expected to show some degree of research on your part, i.e. what you have tried and - if applicable - code so far. For more info, you can check our faq. – underdark Sep 3 '16 at 11:42

The OpenLayers 3 Example page is always a good start.

Here you can find a very good kml-timezones example. This is the essential part to create your timezone-layer:

var vector = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'http://openlayers.org/en/v3.18.2/examples/data/kml/timezones.kml',
    format: new ol.format.KML({
      extractStyles: false
  style: styleFunction

Instead of using the displayFeatureInfo function of that example you want to display labels for the features at the top of the map.

The vector-labels example helps you to understand how to create text labels. Adjust the createTextStyle function how you want your text to look like:

var createTextStyle = function(feature, resolution, dom) {
  var align = dom.align.value;
  var baseline = dom.baseline.value; // use 'bottom' to display your label at the top!
  var size = dom.size.value;
  var offsetX = parseInt(dom.offsetX.value, 10);
  var offsetY = parseInt(dom.offsetY.value, 10);
  var weight = dom.weight.value;
  var rotation = parseFloat(dom.rotation.value);
  var font = weight + ' ' + size + ' ' + dom.font.value;
  var fillColor = dom.color.value;
  var outlineColor = dom.outline.value;
  var outlineWidth = parseInt(dom.outlineWidth.value, 10);

  return new ol.style.Text({
    textAlign: align,
    textBaseline: baseline,
    font: font,
    text: getText(feature, resolution, dom),
    fill: new ol.style.Fill({color: fillColor}),
    stroke: new ol.style.Stroke({color: outlineColor, width: outlineWidth}),
    offsetX: offsetX,
    offsetY: offsetY,
    rotation: rotation

To display the labels at the top of your map you have to set the baseline to bottom.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.