How to change openlayer 2 marker to openlayer 3

Question

Working code of openlayer 2 Working copy

Need - new ol.Map instead of new OpenLayers.Map for full code

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 jsfiddle (something like ol.Style.Icon )

Below is the 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" ) ); 

 html, body { height:100%; width: 100%; padding:5px; margin:0px; } #map { height:90%; width: 95%; } 

 <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <link href="http://openlayers.org/en/v3.16.0/css/ol.css" rel="stylesheet"/> <script src="http://openlayers.org/api/OpenLayers.js"></script> <p> <label for="amount">Minimum number</label> <input type="text" id="amount" value="1000000" style="border:0; color:#f6931f; font-weight:bold;"> </p> <div id="slider-range-max"></div> <div id="map" style="width:600px;height:600px;"></div> 

Answer 1

In OL3 you will have to add the points as a vector layer.

to create the points you'll have to use :

var point1 = new ol.geom.Point([coord1, coord2]);
var marker1 = new ol.Feature({
    geometry: point1
});
marker1.setStyle(
    new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
            anchor: [0.5, 0],
            anchorOrigin: 'bottom-left',
            anchorXUnits: 'fraction',
            anchorYUnits: 'pixels',
            src: 'yourImage.png'
        }))
    })

);

now you add your point to a vector layer like this :

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

there are other ways to do it, for example giving to each feature its own layer

Edit

Now to update the radius of your circle, you have to create it first :

var radius=10;
var circle = new ol.geom.Circle([coord1, coord2], radius);
var featureCircle = new ol.Feature({
     geometry: circle
});

and you keep the same code for interacting with the slider

Answer 2

for the points, circle and style

<!DOCTYPE html>
<html>
<head>
    <title>Simple Map</title>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.17.1/css/ol.css" type="text/css">
    <script src="http://openlayers.org/en/v3.17.1/build/ol.js"></script>
</head>
<body>
    <div id="map" class="map"></div>
    <script>

        // create map
      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })


        ],
        target: 'map',
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });


        // points     


       pointFeatures = [];

      var point1 = new ol.Feature({
          geometry: new ol.geom.Point([0, 0]),
          name: 'point 1'
      })

      var point2 = new ol.Feature({
          geometry: new ol.geom.Point([1000000, 1000000]),
          name: 'point2'
      })

      var point3 = new ol.Feature({
          geometry: new ol.geom.Point([2000000, 2000000]),
          name: 'point3'
      })


      pointFeatures.push(point1)
      pointFeatures.push(point2)
      pointFeatures.push(point3)

      var vectorSource = new ol.source.Vector({
          features: pointFeatures
      });

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

      map.addLayer(vectorLayer)


        // circle
      var circle = new ol.Feature({
          geometry: new ol.geom.Circle(point2.getGeometry().getCoordinates(), 100000),
          name: 'circle uno'
      })

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

      var circleLayer = new ol.layer.Vector({
          source: circleSource
      });

      map.addLayer(circleLayer)




        // style

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

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

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

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


      point1.setStyle(marker1);
      point2.setStyle(marker2);
      point3.setStyle(marker3);
      circle.setStyle(circleStyle);

    </script>
</body>
</html>

Answer 3

 var features = []; var radius = 100000; var longitude = 400000; var latitude = 300000; var point1 = new ol.Feature( new ol.geom.Point([400000, 400000]) ); //console.log(point1); //alert(radius); //var point1 = new ol.geom.Point(400000,400000); var circle = new ol.geom.Circle([longitude, latitude], radius); features.push(new ol.Feature({ geometry: circle })); var vectorSource = new ol.source.Vector({ features: features }); var layer = new ol.layer.Vector({ source: vectorSource, style: [ new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'blue', width: 3 }), fill: new ol.style.Fill({ color: 'rgba(0, 0, 255, 0.1)' }) })] }); // create map var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], target: 'map', view: new ol.View({ center: [400000, 300000], zoom: 6 }) }); map.addLayer(layer); function updateTextInput(val) { document.getElementById('range').value=val; radius = $( "#range" ).val(); } 

 html, body { height:100%; width: 100%; padding:5px; margin:0px; } #map { height:90%; width: 95%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="http://openlayers.org/en/v3.17.1/css/ol.css" type="text/css"> <script src="http://openlayers.org/en/v3.17.1/build/ol.js"></script> <div> <input type="range" class="slider" name="rangeInput" min="10" max="50" onchange="updateTextInput(this.value);"> <input type="text" id="range" value="10"> </div> <div id="map"></div>