Search code examples
javascriptopenstreetmaphtmlopenlayers-5

how to get marker or any icon in openstreetmap using OSM

Im using Ol V5.3.1 and working with asp mvc and this is my code for getting the map and a marker or any icon in a specific location to show my location

 var view = new ol.View({
            center: ol.proj.fromLonLat([51.40876293182373, 35.757448286487595]),
            zoom: 12,
            maxZoom: 19,
        });

var rasterLayer = new ol.layer.Tile({
            source: new ol.source.OSM()
        });

        var VactorLayer = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: new ol.Feature({
                    geometry: new ol.geom.Point([51, 35]),
                    name: 'Null Island',
                    population: 4000,
                    rainfall: 500,
                    setStyle: new ol.style.Style({
                        image: new ol.style.Icon({
                            anchor: [0.5, 46],
                            anchorXUnits: 'fraction',
                            anchorYUnits: 'pixels',
                            src: "http://openlayers.org/en/v3.7.0/examples/data/icon.png",
                        })
                    })
                })
            })
        });

var map = new ol.Map({
            target: 'map',
            controls: new ol.control.defaults({
                attributionOptions: {
                    collapsible: false
                }
            }),
            layers: [rasterLayer, VactorLayer],
            view: view,
        });

everything is good and showing the tiles and map with my location and there's no any error in console of my browser for javascripts but just dont show the icon and marker as this is an example of openlayer example working with vector layer at Example_Marker

i also find another way to put marker with overlay in this Example as i code this in below

 var marker = new ol.Overlay({
            position: pos,
            positioning: 'center-center',
            element: document.getElementById('marker'),
            stopEvent: false
        });

    var pos = new ol.proj.fromLonLat([51, 35]);

        map.addOverlay(marker);

but also not showing this one

any suggestion?

Solution

  • Your code is different from the example with the marker

    1. The position of marker isn't transformed into the projection of the map (like you do with the center):
    var VactorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: new ol.Feature({
                geometry: new ol.geom.Point([51, 35]),

    should be:

    var VactorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.fromLonLat([51, 35])),
    1. The features array in the VectorSource should be an array:
    var VactorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: new ol.Feature({
                geometry: new ol.geom.Point([51, 35]),
                name: 'Null Island',
                population: 4000,
                rainfall: 500,
            })

    should be:

    var VactorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [new ol.Feature({
                geometry: new ol.geom.Point([51, 35]),
                name: 'Null Island',
                population: 4000,
                rainfall: 500,
             })]

    Then the "marker" appears, but doesn't have the correct style.

    code snippet:

    html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.map {
  height: 95%;
  width: 100%;
}
    <link rel="stylesheet" href="https://openlayers.org/en/v5.1.3/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>

<div id="map" class="map"></div>
<script>
  var view = new ol.View({
    center: ol.proj.fromLonLat([51.40876293182373, 35.757448286487595]),
    zoom: 6,
    maxZoom: 19,
  });

  var rasterLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

  var VactorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
      features: [new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([51, 35])),
        name: 'Null Island',
        population: 4000,
        rainfall: 500,
        setStyle: new ol.style.Style({
          image: new ol.style.Icon({
            anchor: [0.5, 46],
            anchorXUnits: 'fraction',
            anchorYUnits: 'pixels',
            src: "http://openlayers.org/en/v3.7.0/examples/data/icon.png",
          })
        })
      })]
    })
  });

  var map = new ol.Map({
    target: 'map',
    controls: new ol.control.defaults({
      attributionOptions: {
        collapsible: false
      }
    }),
    layers: [rasterLayer, VactorLayer],
    view: view,
  });
</script>

    screenshot of resulting map

    To use the same Icon as in the example, create it as a "feature" and call setStyle on the feature (there is no setStyle property of a feature).

    var iconFeature = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([51, 35])),
            name: 'Null Island',
            population: 4000,
            rainfall: 500,
        });
iconFeature.setStyle(new ol.style.Style({
                image: new ol.style.Icon({
                    anchor: [0.5, 46],
                    anchorXUnits: 'fraction',
                    anchorYUnits: 'pixels',
                    src: "http://openlayers.org/en/v3.7.0/examples/data/icon.png",
                })
            }));
var VactorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [iconFeature]
    })
});

    code snippet:

    html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.map {
  height: 95%;
  width: 100%;
}
    <link rel="stylesheet" href="https://openlayers.org/en/v5.1.3/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>

<div id="map" class="map"></div>
<script>
  var view = new ol.View({
    center: ol.proj.fromLonLat([51.40876293182373, 35.757448286487595]),
    zoom: 7,
    maxZoom: 19,
  });

  var rasterLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

  var iconFeature = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.fromLonLat([51, 35])),
    name: 'Null Island',
    population: 4000,
    rainfall: 500,
  });
  iconFeature.setStyle(new ol.style.Style({
    image: new ol.style.Icon({
      anchor: [0.5, 46],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      src: "http://openlayers.org/en/v3.7.0/examples/data/icon.png",
    })
  }));
  var VactorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
      features: [iconFeature]
    })
  });

  var map = new ol.Map({
    target: 'map',
    controls: new ol.control.defaults({
      attributionOptions: {
        collapsible: false
      }
    }),
    layers: [rasterLayer, VactorLayer],
    view: view,
  });
</script>

    screenshot of resulting map