CODEWITHSUNDEEP
openlayers-3
Anton Anton
Anton Anton

Reputation: 201

Openlayers 3. How to make tootlip for feature

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?

Upvotes: 7

Views: 17476

Answers (3)

Teocci
Teocci

Reputation: 8965

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">

Upvotes: 3

Anton Anton
Anton Anton

Reputation: 201

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

Upvotes: 13

rgvassar
rgvassar

Reputation: 5811

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.

Upvotes: 0

Related Questions