CODEWITHSUNDEEP
openlayers
Jordan Carter
Jordan Carter

Reputation: 1336

OpenLayers basic marker

I'm using the latest CDN version of OpenLayers, and I'm struggling to just add a marker to my map. Here's what I have so far....(some variables have been omitted for the client's privacy)

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([long, lat]),
    zoom: 14
  })
});

//Adding a marker on the map
var marker = new ol.Feature({
  geometry: new ol.geom.Point(
    ol.proj.fromLonLat([long, lat])
  ),
  name: name,
});

var iconStyle = new Style({
  image: new Icon(({
    anchor: [0.5, 46],
    anchorXUnits: 'fraction',
    anchorYUnits: 'pixels',
    src: icon_src
  }))
});

marker.setStyle(iconStyle);

var vectorSource = new ol.source.Vector({
  features: [marker]
});

var markerVectorLayer = new ol.layer.Vector({
  source: vectorSource,
});

map.addLayer(markerVectorLayer);
<div id="map" class="map" style="width:1022px;height:240px;margin-top:15px;"></div>

I get "Style is not defined" in the console, then if I try to import style like is shown in the examples, it mentions how imports can only be done at the top of the module...I think it needs webpack, or something similar, and I'm pretty sure my site doesn't run that. I just need a very basic map marker, like the red Google Maps icon, nothing fancy.

Upvotes: 0

Views: 590

Answers (1)

Mike
Mike

Reputation: 17897

The syntax for CDN version of OL5 is the same as OL4

var iconStyle = new ol.style.Style({
  image: new ol.style.Icon(({

It can be useful to bookmark the version 4 API, but always cross-check with version 5 in case of other changes http://openlayers.org/en/v4.6.5/apidoc/index.html

Upvotes: 1

Related Questions