How to add text labels to point markers in OpenStreetMap?

Question

I have looked at this webpage: link text [https://mediarealm.com.au/articles/openstreetmap-openlayers-map-markers/] and I learned from it how to make markers on Openstreetmap. But I can't figure out how to make simple text labels appear beside the markers. My question is what is the simplest way to add labels to point markers ?

Here is "my" html code, which executes fine, but I want very much to place labels beside some or all of the point markers.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>OpenStreetMap &amp; OpenLayers - Marker Example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>

  <script>
    /* OSM & OL example code provided by https://mediarealm.com.au/ */
    var map;
    var mapLat = 48.7776;
        var mapLng = 9.2325;
    var mapDefaultZoom = 18;

    function initialize_map() {
      map = new ol.Map({
        target: "map",
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM({
                      url: "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"
                })
            })
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([mapLng, mapLat]),
            zoom: mapDefaultZoom
        })
      });
    }

    function add_map_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://upload.wikimedia.org/wikipedia/commons/e/ec/RedDot.svg"
          })
        })
      });

      map.addLayer(vectorLayer); 
    }


  </script>
</head>
<body onload="initialize_map(); 
add_map_point(48.77896195414604,9.230028522859172); 
add_map_point(48.7786801583205,9.230559183581361);
add_map_point(48.77839084836044,9.231098387395592);
add_map_point(48.77821941685653,9.231418825146253);
add_map_point(48.77804116552051,9.231760731524432);
add_map_point(48.77798478095757,9.231857591770742);
add_map_point(48.77793479182441,9.231959233055916);
add_map_point(48.77789216864531,9.232040697691321);
add_map_point(48.77784976059397,9.232119391875452);
add_map_point(48.77781607964182,9.232180591830247);
add_map_point(48.77777605784195,9.232255409342331);
add_map_point(48.777739956673585,9.23232386240085);
add_map_point(48.777706621280934,9.232386290075267);
add_map_point(48.77763025798431,9.232529500384944);
add_map_point(48.77761124414772,9.232578962345501);
add_map_point(48.777568643085125,9.232685348589783);
add_map_point(48.77754476950222,9.232746865393798);
add_map_point(48.77750088469463,9.232827356487206);
add_map_point(48.77745878318328,9.232910790311317);
add_map_point(48.77741595800813,9.232988600498913);
add_map_point(48.777372755115806,9.233068552599766);
add_map_point(48.777201514799266,9.233379369818085);
add_map_point(48.77702467842831,9.23369803172393);
add_map_point(48.776762657751405,9.234164000387091);
add_map_point(48.77647984081625,9.234622534964592); 
">
  <div id="map" style="width: 100vw; height: 100vh;"></div>
hallo
</body>
</html>

Accepted Answer

3

Without knowing what you have tried so far (your question does not include links) I suggest you have a look at uMap. There you are flexible to add markers with text labels of different kinds and appearances. Chose one of the instances given on the wiki page I linked to and give it a try.

permanent link

answered 17 Sep '20, 08:34

TZorn
12.3k●7●64●225
accept rate: 15%

Thank you for telling me about uMap. That would be a perfectly good solution, except that their tiles won't load to a zoom level greater than 17 in the area that I am concerned with. Here is the map I created with uMap: [http://umap.openstreetmap.fr/en/map/anonymous-edit/499933:HZ_0NpNev93W6HehUzJ2OItXQsw ]. An alternative solution might be something like what is contained in this script here: [http://dev.openlayers.org/examples/vector-features-with-text.html ]. There you can see markers, but there are also text labels with the markers. I have tried to download the html source code of that page and to load it from my own computer, but that doesn't work, possibly because my browser doesn't know where to find some remote scripts that are given with reltive path names. So I am not even able to dissect that example, which is surprisingly the only example of Openlayers that I could find where label appear beside markers.

At the end of the day, all I want to do is place a marker at a location in WGS84 coordinates and place a text label beside the marker, and then zoom in to level 19. Any help is appreciated!

(17 Sep '20, 20:22) funOne

2

@funOne for me tiles are loading to a max zoom of 20 with that umap link. If the server has not had to display that area recently it can take a while to render depending on server load.

Note also that the umap background can be changed to openstreetmap.org's default if you wish (although that only goes to z19).

You can set the starting view with the icon on the right.

(17 Sep '20, 21:17) InsertUser

I have waited for more than one hour, in which time the tile still has not loaded. Thanks for suggesting that I try changing from umap background to openstreetmap background. Openstreetmap background tile loads within 4.2 seconds: good enough. You mentioned how to set the starting view using the graphical interface. But how to set the starting map background to use Openstreetmap rather than OSM-Fr?

(17 Sep '20, 23:26) funOne

1

You can change the starting layer also in the right hand editing panel. It's the same icon as in the left hand panel.

(18 Sep '20, 08:21) TZorn

How to add text labels to point markers in OpenStreetMap?

Follow this question

Related questions