[GIS] OpenLayers: Show a styled title similar to pop-up but always visible

openlayersopenlayers-2popup

I need to basically create boxes with titles inside, set to different styles (different coloured box, different FontAwesome icon etc.) set to specific points on the map, ideally replacing the label titles for LinePoint features.

What would be the best/most ideal solution? I presume creating pop-ups that are always "popped up/visible" – but I don't want the little 'arrow' directly below (nor the white box outline) – I suppose those can be disabled by CSS ? Except I'm using the canvas rendererer (I can change to dom or webgl, I figured canvas looked nicer but unsure which works best for which situations)

Best Answer

Didn't read you wanted to change label titles of LinePoint features, the original answer might still be useful, though. I added more below.

Original Answer:

This is what the ol.Overlay class is for. It puts a given DOM-Object on a certain position of the map.

For example:

var domElement = document.createElement('div');
domElement.className = "myclass";
domElement.innerHTML = "content";

var overlay = new ol.Overlay {
    element: domElement,
    position: [123,456],
    positioning: "top-center" //which point of the element will be on the coordinate
};

map.addOverlay(overlay);

This puts a div with the class .myclass and the content "content" on the point [123,456]. It is anchored on the point "top-center".

For further information on ol.Overlay check: http://openlayers.org/en/master/apidoc/ol.Overlay.html

Instead of using .addOverlay() you can make an array of overlays and pass it to the constructor if ol.Map with the overlays property.

var overlaysArray = [new ol.Overlay(), new ol.Overlay(), new ol.Overlay()];
var map = new ol.Map({ ... , overlays: overlaysArray, ... });

Instead of using build-in javascript methods you could use jQuery, too: 

var jQueryElement = $('<div></div>');
jQueryElement.addClass("myclass");
jQueryElement.text("content");

var overlay = new ol.Overlay {
    element: jQueryElement.get(0),
    position: [123,456],
    positioning: "top-center"
};

map.addOverlay(overlay);

The arrow you mentioned is indeed from css.

Updated Answer:

If you would like to change the titles of features it would be easiest to make that in the original data-source. (i.e. in the kml/geoJSON file or the database). Normally the title would be called the "name". ("description" is normally a describing text).

If you would like to change the titles of features inside your Javascript you can get them by calling the getFeatures() method of the corresponding ol.source Object. See http://openlayers.org/en/master/apidoc/ol.source.Vector.html#getFeatures . It returns an array of features. There you could call .set("name", "yourTitle")

For Example:

var features = source.getFeatures();
features[0].set("name", "yourTitle");

For both variants you still need to create ol.Overlay objects for every feature (changing name in the source, setting it via javascript).

For Example:

source.forEachFeature(function(feature) {
    var domElement = document.createElement('div');
    domElement.innerHTML = feature.get("name");
    map.addOverlay(new ol.Overlay({
    position: ol.extent.getCenter(feature.getGeometry().getExtent())
    }));
});

This creates an overlay for every feature, puts a div inside and writes the title of the feature in it, then its position is setted to the center of the geometry and the whole thing is added to the map. I assume you created source and map before.

Hope this helps!

Related Question