CODEWITHSUNDEEP
openlayers-3
Pri Santos
Pri Santos

Reputation: 409

How to add markers on OpenLayers 3 giving coordinates

I need to add a marker on my map when I call the method addMarker(long, lat). The only example I have found is this one in the OpenLayers example list, but it adds only one marker in a specific place.

I need to be able to call my method anytime I need and pass the coordinates (the general idea is to have a simple menu where the user can type the long and lat and click a submit button and the marker is drawn on the map).

In the example, if I got it right, they created a feature and its style, then created a layer to draw the icon and initialized the map using that layer.

var iconFeature = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.transform([-72.0704, 46.678], 'EPSG:4326', 'EPSG:3857')),
  name: 'Null Island',
  population: 4000,
  rainfall: 500
});

var iconStyle = new ol.style.Style({
  image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
    anchor: [0.5, 46],
    anchorXUnits: 'fraction',
    anchorYUnits: 'pixels',
    opacity: 0.75,
    src: 'data/icon.png'
  }))
});

iconFeature.setStyle(iconStyle);

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

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

var map = new ol.Map({
  layers: [new ol.layer.Tile({ source: new ol.source.OSM() }), vectorLayer],
  target: document.getElementById('map'),
  view: new ol.View2D({
    center: [0, 0],
    zoom: 3
  })
});

I believe I can create an array of features, something like that(an example I saw here):

var iconFeatures=[];

var iconFeature = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.transform([-72.0704, 46.678], 'EPSG:4326',     
  'EPSG:3857')),
  name: 'Null Island',
  population: 4000,
  rainfall: 500
});

var iconFeature1 = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.transform([-73.1234, 45.678], 'EPSG:4326',     
  'EPSG:3857')),
  name: 'Null Island Two',
  population: 4001,
  rainfall: 501
});

iconFeatures.push(iconFeature);
iconFeatures.push(iconFeature1);

Here is my method so far:

class map{
    private markerFeatures = [];

    //receive an array of coordinates
    public addMarkers(markers: Array<Marker>): void { 
        for (var i in markers) {
            var markFeature = new ol.Feature({
              geometry: new ol.geom.Point(ol.proj.transform([markers[i].long, markers[i].lat], 'EPSG:4326',     
              'EPSG:3857')),
              name: 'Null Island',
              population: 4000,
              rainfall: 500
            });

            this.markerFeatures.push(markFeature);
        }            
    }
}

But nothing happened when I did that.

Obs: I created the map, the layer and called the method. I'm using OL v3.7

Upvotes: 2

Views: 6588

Answers (1)

Bob Holmes
Bob Holmes

Reputation: 626

Assuming you have a layer containing a vector source, you just need to add one more step to your addMarkers function:

myVectorSource.addFeatures(markerFeatures);

Upvotes: 3

Related Questions