Search code examples
openlayersopenlayers-6

OpenLayers 6 add maker labels or text

Just started to use OL (v6) and I'm stuck in adding labels to markers in a map. Is there any easy way to show a label/text close to a marker? (e.g. 'point1' and 'point2' in this example). Appreciate your help.

Here the basic jsfiddle code I'm using to add the markers:

const p1 = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([-115.20, 38.])),
  name: 'uno',
});

const p2 = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([-115.22, 38.01])),
  name: 'zero',
});

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),

    new ol.layer.Vector({
      source: new ol.source.Vector({
        features: [p1, p2]
      }),
      style: new ol.style.Style({
        image: new ol.style.Icon({
          anchor: [0.5, 46],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: 'https://icon-library.net/images/google-maps-gps-icon/google-maps-gps-icon-14.jpg',
          scale: 0.1
        })
      })
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([-115.21, 38]),
    zoom: 11
  })
});
Solution

  • Related question: Add a Text next to the point Open Layer

    Add a label style to each feature. Get the name of the feature (or other property) to use as the label. Your code modified:

    var iconStyle = new ol.style.Style({
  image: new ol.style.Icon({
    anchor: [0.5, 46],
    anchorXUnits: 'fraction',
    anchorYUnits: 'pixels',
    src: 'https://icon-library.net/images/google-maps-gps-icon/google-maps-gps-icon-14.jpg',
    scale: 0.1
  })

});
var labelStyle = new ol.style.Style({
  text: new ol.style.Text({
    font: '12px Calibri,sans-serif',
    overflow: true,
    fill: new ol.style.Fill({
      color: '#000'
    }),
    stroke: new ol.style.Stroke({
      color: '#fff',
      width: 3
    }),
    offsetY: -12
  })
});
var style = [iconStyle, labelStyle];

    proof of concept fiddle

    screenshot of resulting map

    code snippet:

    const p1 = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([-115.20, 38.])),
  name: 'uno',
});

const p2 = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([-115.22, 38.01])),
  name: 'zero',
});
var iconStyle = new ol.style.Style({
  image: new ol.style.Icon({
    anchor: [0.5, 46],
    anchorXUnits: 'fraction',
    anchorYUnits: 'pixels',
    src: 'https://www.geocodezip.net/mapIcons/google-maps-gps-icon-14.jpg',
    scale: 0.1
  })

});
var labelStyle = new ol.style.Style({
  text: new ol.style.Text({
    font: '12px Calibri,sans-serif',
    overflow: true,
    fill: new ol.style.Fill({
      color: '#000'
    }),
    stroke: new ol.style.Stroke({
      color: '#fff',
      width: 3
    }),
    offsetY: -12
  })
});
var style = [iconStyle, labelStyle];
var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),

    new ol.layer.Vector({
      source: new ol.source.Vector({
        features: [p1, p2]
      }),
      style: function(feature) {
        labelStyle.getText().setText(feature.get('name'));
        return style;
      }
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([-115.21, 38]),
    zoom: 11
  })
});
    html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.map {
  height: 100%;
  width: 100%;
}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
<div id="map" class="map"></div>