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?

Have you tried google? Google it for "ol3 tooltip", there's a lot links — Ricardo Pontual, Mar 07 '16 at 16:26
Tried, but got no result. Almost all links are moving to OL2 — Anton Anton, Mar 07 '16 at 16:35
See [this fiddle](http://jsfiddle.net/jonataswalker/Lg0eurr5/) if it's what you'd like. — Jonatas Walker, Mar 08 '16 at 17:22
You should check this link [OpenLayers 3.10.1 - Feature Popup](https://gis.stackexchange.com/questions/166613/openlayers-3-10-1-feature-popup) — gxet4n, Aug 04 '18 at 20:38

score 12 · Accepted Answer · answered Mar 09 '16 at 04:02

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);

Teocci · Answer 2 · 2023-07-10T01:04:57.377

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/ol@v7.4.0/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.4.0/ol.css">

rgvassar · Answer 3 · 2016-03-08T16:51:42.227

0

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.

edited Mar 08 '16 at 16:51

answered Mar 07 '16 at 20:35

rgvassar

5,635
1
24
31

This example shows how to customize the buttons tooltips with Bootstrap. I need example how to show tooltip for feature. – Anton Anton Mar 08 '16 at 16:41
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. – rgvassar Mar 08 '16 at 16:53
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. – Anton Anton Mar 08 '16 at 18:05
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: http://jsfiddle.net/uarf1888/. – ahocevar Mar 08 '16 at 20:05

Openlayers 3. How to make tootlip for feature

3 Answers3

Linked