Add simple markers/points with OpenLayers

Question

I've been searching for a day about how to place a list (array) of markers on an OSM/OpenLayers, but unfortunately, the official example wouldn't work for me. Can you please show me the best way to show the map and then add it an array of coordinates using a custom PNG marker icon?

I am using OpenLayers 5.

When you say "the official example wouldn't work for me", what do you mean? Which example were you using? Was it [this one](https://openlayers.org/en/v5.3.0/examples/icon.html)? [That works for me](http://www.geocodezip.com/OL_5.3.0_icon.html). Were you getting javascript errors? — geocodezip, Jan 16 '19 at 03:03
Yeah, it was the one you linked. I was getting JS errors because imports are not possible in JavaScript. Do you have a working example without imports? Thanks. — BlueskyFR, Jan 16 '19 at 06:27
See the [link](http://www.geocodezip.com/OL_5.3.0_icon.html) in my comment. — geocodezip, Jan 16 '19 at 06:41
Thanks, but I want to add multiple markers to the map, and set my icon size. Where can I add my new points? In vectorSource's feature? — BlueskyFR, Jan 16 '19 at 07:22
Something like [this](http://www.geocodezip.com/OL_5.3.0_simpleMultipleMarkerExample.html)? — geocodezip, Jan 16 '19 at 14:38

score 1 · Answer 1 · answered Jan 16 '19 at 13:18

The simplest way to mark an array of coordinates is to use the array in a MultiPoint geometry. If the coordinates are LonLat the geometry will need to be transformed to map coordinates:

  var iconFeature = new ol.Feature({
    geometry: new ol.geom.MultiPoint([[-90, 0], [-45, 45], [0, 0], [45, -45], [90, 0]]).transform('EPSG:4326','EPSG:3857'),
    name: 'Null Islands',
    population: 4000,
    rainfall: 500
  });

Icons will by default be displayed at the natural size of the image, but you can change that by setting a scale option:

  var iconStyle = new ol.style.Style({
    image: new ol.style.Icon(/** @type {module:ol/style/Icon~Options} */ ({
      anchor: [0.5, 46],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      src: 'https://openlayers.org/en/v5.3.0/examples/data/icon.png',
      scale: 0.5
    }))
  });

http://mikenunn.16mb.com/demo/OL_5.3.0_multi-icon.html

Add simple markers/points with OpenLayers

1 Answers1