0

I have a following short HTML code, which displays a map. I can't find any way to add a marker on this map. I've tried different examples, but everything's failed so far. Here I post one of the codes I've tried.

<html>
<head>
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/css/ol.css">


</head>
<body>
    <div id="mymap" style="width:100%;height:100%;"></div>
    <script>      

    var icon = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.transform([16.9278, 52.4044], 'EPSG:4326', 'EPSG:3857'))
    });

    var iconLayerSource = new ol.layer.Vector({
        features: [icon]
    });

    var iconLayer = new ol.layer.Vector({
        source: iconLayerSource,
        style: new ol.style.Style({
            image: new ol.style.Icon({
                src:'https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Map_marker_font_awesome.svg/200px-Map_marker_font_awesome.svg.png'
            })
        })
    })

    var map = new ol.Map({
        view: new ol.View({center: ol.proj.transform([16.9278, 52.4044], 'EPSG:4326', 'EPSG:3857'), zoom:12}),
        layers: [new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        iconLayer],
        target:'mymap'
    });



    </script>
</body>

  • Do you get an error message in your browser's console? developers.google.com/web/tools/chrome-devtools/console/… – Mesa Aug 21 '18 at 11:15
  • See this example or this answer. This related post indicates the OpenLayers.Marker has been deprecated in OL2, while you are using OL5. – JGH Aug 21 '18 at 11:28
  • I've updated the code. It's still not working. I can't see the map nor the icon, just the "zoom" tool on the left side of the screen. When I remove the "iconLayer" reference from the "layers" in "map" variable, I can see the map, but not the icon. – Piotr Koller Aug 22 '18 at 7:49
  • Correct var iconLayerSource = new ol.layer.Vector({ to var iconLayerSource = new ol.source.Vector({ and it should work. – Mike Aug 27 '18 at 23:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.