Openlayers 3. How to make tootlip for feature

Question

Now I'm moving my project from openlayers 2 to openlayers 3. Unfortunately I can't find how to show title (tooltip) for feature. In OL2 there was a style named graphicTitle. Could you give me advice how to implement tooltip on OL3?

Truax

Have you tried google? Google it for "ol3 tooltip", there's a lot links – Smallish

Tried, but got no result. Almost all links are moving to OL2 – Truax

See this fiddle if it's what you'd like. – Stenographer

You should check this link OpenLayers 3.10.1 - Feature Popup – Triatomic

Answer 1

This is example from ol3 developers. jsfiddle.net/uarf1888/

var tooltip = document.getElementById('tooltip');
var overlay = new ol.Overlay({
  element: tooltip,
  offset: [10, 0],
  positioning: 'bottom-left'
});
map.addOverlay(overlay);

function displayTooltip(evt) {
  var pixel = evt.pixel;
  var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
    return feature;
  });
  tooltip.style.display = feature ? '' : 'none';
  if (feature) {
    overlay.setPosition(evt.coordinate);
    tooltip.innerHTML = feature.get('name');
  }
};

map.on('pointermove', displayTooltip);

Truax

Answer 2

This is a basic example using the ol library. The most important is to define the overlay object. We will need an element to append the text we want to display in the tooltip, a position to show the tooltip and the offset (x and y) where the tooltip will start.

const tooltip = document.getElementById('tooltip')
const overlay = new ol.Overlay({
  element: tooltip,
  offset: [10, 0],
  positioning: 'bottom-left'
})
map.addOverlay(overlay)

Now, we need to dynamically update the innerHTML of the tooltip.

const displayTooltip = evt => {
    const pixel = evt.pixel;
    const feature = map.forEachFeatureAtPixel(pixel, f => f)
    tooltip.style.display = feature ? '' : 'none'
    if (feature) {
    overlay.setPosition(evt.coordinate)
    tooltip.innerHTML = feature.get('name')
    }
}

map.on('pointermove', displayTooltip)

let styleCache = {}
const styleFunction = (feature, resolution) => {
  // 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a
  // standards-violating <magnitude> tag in each Placemark.  We extract it from
  // the Placemark's name instead.
  const name = feature.get('name')
  const magnitude = parseFloat(name.substr(2))
  const radius = 5 + 20 * (magnitude - 5)
  
  let style = styleCache[radius]
  if (!style) {
    style = [new ol.style.Style({
      image: new ol.style.Circle({
        radius: radius,
        fill: new ol.style.Fill({
          color: 'rgba(255, 153, 0, 0.4)'
        }),
        stroke: new ol.style.Stroke({
          color: 'rgba(255, 204, 0, 0.2)',
          width: 1
        })
      })
    })]
    styleCache[radius] = style
  }
  
  return style
}

const vector = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'https://gist.githubusercontent.com/anonymous/5f4202f2d49d8574fd3c/raw/2c7ee40e3f4ad9dd4c8d9fb31ec53aa07e3865a9/earthquakes.kml',
    format: new ol.format.KML({
      extractStyles: false
    })
  }),
  style: styleFunction
})

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

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

const tooltip = document.getElementById('tooltip')
const overlay = new ol.Overlay({
  element: tooltip,
  offset: [10, 0],
  positioning: 'bottom-left'
})
map.addOverlay(overlay)

const displayTooltip = evt => {
  const pixel = evt.pixel;
  const feature = map.forEachFeatureAtPixel(pixel, f => f)
  tooltip.style.display = feature ? '' : 'none'
  if (feature) {
    overlay.setPosition(evt.coordinate)
    tooltip.innerHTML = feature.get('name')
  }
}

map.on('pointermove', displayTooltip)

#map {
  position: relative;
  height: 100vh;
  width: 100vw;
  
}
.tooltip {
  position: relative;
  padding: 3px;
  background: rgba(0, 0, 0, .7);
  color: white;
  opacity: 1;
  white-space: nowrap;
  font: 10pt sans-serif;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map" class="map">
  <div id="tooltip" class="tooltip"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css">

Zennie

Answer 3

Here's the Icon Symobolizer example from the openlayers website. It shows how to have a popup when you click on an icon feature. The same principle applies to any kind of feature. This is what I used as an example when I did mine.

Baldheaded

This example shows how to customize the buttons tooltips with Bootstrap. I need example how to show tooltip for feature. – Truax

There you go. I edited the link to a relevant example. I was able to use the as an example for doing popups on polygon geometry features. – Baldheaded

Thank you, but I want to make simple title as it was in OL2. Any html element can have this attribute.... If I can't to do so I'll try you example. – Truax

Features are not rendered as html or svg elements in OpenLayers 3. Everything is rendered to a canvas element. For simple tooltips, you may want to have a look at this fiddle: jsfiddle.net/uarf1888. – Snazzy