NOTICE: help.openstreetmap.org is no longer in use from 1st March 2024. Please use the OpenStreetMap Community Forum

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>

asked 17 Sep '20, 06:53

funOne's gravatar image

funOne
16114
accept rate: 0%

edited 17 Sep '20, 21:48

TZorn's gravatar image

TZorn
12.3k764225

1

Could you fix/edit your question please? The links have gone missing.

(17 Sep '20, 07:41) TZorn

I tried to paste my entire html document into a code block, but about half of it did not arrive inside the code block, and I don't know why not. If there is somebody who knows how to edit my question, so as to format the text so that everything between "<!DOCTYPE html>" and "</html>" appears as code, then I thank you.

(17 Sep '20, 20:39) funOne

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's gravatar image

TZorn
12.3k764225
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 diagonal arrows pointing inward to dot 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

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Question tags:

×122
×98
×63

question asked: 17 Sep '20, 06:53

question was seen: 10,958 times

last updated: 18 Sep '20, 08:21

NOTICE: help.openstreetmap.org is no longer in use from 1st March 2024. Please use the OpenStreetMap Community Forum