title: How to add markers on OpenLayers 3 giving coordinates
body: <p>I need to add a marker on my map when I call the method addMarker(long, lat).
  The only example I have found is <a href="http://openlayers.org/en/v3.8.2/examples/icon.html" rel="nofollow noreferrer">this</a> one in the OpenLayers example list, but it adds only one marker in a specific place.</p>
  
  <p>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).</p>
  
  <p>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.</p>
  
  <pre><code>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
    })
  });
  </code></pre>
  
  <p>I believe I can create an array of features, something like that(an example I saw <a href="https://stackoverflow.com/questions/24315801/how-to-add-markers-with-openlayers-3">here</a>):</p>
  
  <pre><code>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);
  </code></pre>
  
  <p>Here is my method so far:</p>
  
  <pre><code>class map{
      private markerFeatures = [];
  
      //receive an array of coordinates
      public addMarkers(markers: Array&lt;Marker&gt;): 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);
          }            
      }
  } 
  </code></pre>
  
  <p>But nothing happened when I did that.</p>
  
  <p>Obs: I created the map, the layer and called the method.
  I'm using OL v3.7</p>