title: How to change openlayer 2 marker to openlayer 3
body: <p>Working code of openlayer 2 <a href="http://jsfiddle.net/zLjae81b/18/" rel="nofollow">Working copy</a></p>
  
  <p>Need - <code>new ol.Map</code> instead of <code>new OpenLayers.Map</code> for full code</p>
  
  <p>I am trying to convert this using openlayer 3. But there are lot of changes there are no marker in openlayer 3.. can any body suggest how to change this working example <a href="http://jsfiddle.net/zLjae81b/18/" rel="nofollow">jsfiddle</a> (something like <code>ol.Style.Icon</code>)</p>
  
  <p>Below is the code </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function updateIcon(f) {
      f.style.externalGraphic = "marker.png";
      vector.drawFeature(f);
  }
  
   options = {
      div: "map",
      zoom: 2,
      center: [0, 0],
      layers: [
          new OpenLayers.Layer.OSM()
      ]
  };
  map = new OpenLayers.Map(options);
  vector = new OpenLayers.Layer.Vector();
  map.addLayer(vector);
  
  
  var point1 = new OpenLayers.Geometry.Point(0,0);
  var point2 = new OpenLayers.Geometry.Point(1000000, 1000000);
  var point3 = new OpenLayers.Geometry.Point(2000000, 2000000);
  var radius = $( "#amount" ).val();
   var mycircle = OpenLayers.Geometry.Polygon.createRegularPolygon(point2,radius,40,0);
       var featurecircle = new OpenLayers.Feature.Vector(mycircle);
       
  
  
  // var selected_polygon_style = {
  //     strokeWidth: 5,
  //     strokeColor: '#ff0000'
  //     // add more styling key/value pairs as your need
  // };
  
  // featurecircle.style = selected_polygon_style;
  
  marker1 = new OpenLayers.Feature.Vector(point1, null, {
      externalGraphic: "marker.png",
      graphicWidth: 32,
      graphicHeight: 32,
      fillOpacity: 1
  });
  marker1.style = { display: 'none' };
  
  marker2 = new OpenLayers.Feature.Vector(point2, null, {
      externalGraphic: "marker.png",
      graphicWidth: 32,
      graphicHeight: 32,
      fillOpacity: 1
  });
  
  marker3 = new OpenLayers.Feature.Vector(point3, null, {
      externalGraphic: "marker.png",
      graphicWidth: 32,
      graphicHeight: 32,
      fillOpacity: 1
  });
  vector.addFeatures([marker1, marker2, marker3, featurecircle]);
  
  
  
  $( "#slider-range-max" ).slider({
        range: "max",
        min: 1000000,
        max: 3000000,
        value: 1000000,
        slide: function( event, ui ) {
          $( "#amount" ).val( ui.value );
           radius =  $( "#amount" ).val();
  
       vector.removeFeatures([featurecircle]);
  var mycircle = OpenLayers.Geometry.Polygon.createRegularPolygon
  (
      point2,
      radius,
      40,
      0
  );
  
  featurecircle = new OpenLayers.Feature.Vector(mycircle);
  vector.addFeatures([featurecircle]);
  
           console.log(radius);
  
        }
      });
      $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
  $( radius ).val( $( "#slider-range-max" ).slider( "value" ) );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
      height:100%;
      width: 100%;
      padding:5px;
      margin:0px;
  }
  #map {
      height:90%;
      width: 95%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/&gt;
  &lt;link href="http://openlayers.org/en/v3.16.0/css/ol.css" rel="stylesheet"/&gt;
  &lt;script src="http://openlayers.org/api/OpenLayers.js"&gt;&lt;/script&gt;
  
  
  &lt;p&gt;
    &lt;label for="amount"&gt;Minimum number&lt;/label&gt;
    &lt;input type="text" id="amount" value="1000000"  style="border:0; color:#f6931f; font-weight:bold;"&gt;
  &lt;/p&gt;
  &lt;div id="slider-range-max"&gt;&lt;/div&gt;
  &lt;div id="map" style="width:600px;height:600px;"&gt;&lt;/div&gt; </code></pre>
  </div>
  </div>
  </p>