openlayersopenstreetmap

How to put optional label and/or tooltip on OpenLayers map marker


I'm using this function to put multiple map markers with OpenLayers. It works great. Now, I want to add a hover tooltip to each marker to note what the map marker is for. Is this easily done? What about placing a label under the marker?

function add_ssb_point(lat, lng) {
      var vectorLayer = new ol.layer.Vector({
        source:new ol.source.Vector({
          features: [new ol.Feature({
          geometry: new ol.geom.Point(ol.proj.transform([parseFloat(lng), parseFloat(lat)], 'EPSG:4326', 'EPSG:3857')),
            })]
        }),
        style: new ol.style.Style({
            image: new ol.style.Icon({
            anchor: [0.5, 0.5],
            anchorXUnits: "fraction",
            anchorYUnits: "fraction",
            src: "https://www.qsomap.com/images/red-dot.png"
          })
        })
      });

      map.addLayer(vectorLayer); 
    }

I can't find any examples of anyone just putting a marker on a map with hover text. You can see my 1st map here: https://thesaegers.com/osm.php Each marker represents a call sign (e.g. N9XYZ) When a user hovers their mouse over N9XYZ's marker I would like "N9XYZ" to be the hover text.


Solution

  • I figured out how to add labels to the markers. I'm still trying to see if I can add hover/tooltip text. My new OSM map: https://thesaegers.com/osm2.php

    I figured out how to add hover text and an info window to each marker using the Leaflet library. Example: 
    
    https://thesaegers.com/osm.htm