[GIS] How to add marker dynamically when clicked on map using OpenLayers 3

markersopenlayerspointstyle

I'm trying to add point (marker) on map click with custom style using OpenLayers 3. I tried this code, but nothing happens when user click on the map:

  var map = new ol.Map({
            layers: [
          new ol.layer.Tile({
              source: new ol.source.MapQuest({layer: 'sat'})
          }),
          new ol.layer.Vector({
              source: vectorSource
          })
      ],
            target: 'map',
            view: new ol.View({
              center: [0, 0],
              zoom: 2
            })
          });

    var styles = {
            'square': new ol.style.Style({
                image: new ol.style.RegularShape({
                    fill: fillColor,
                    stroke: stroke,
                    points: 4,
                    radius: 10,
                    angle: Math.PI / 4
                })
            }),
            'triangle': new ol.style.Style({
                image: new ol.style.RegularShape({
                    fill: fillColor,
                    stroke: stroke,
                    points: 3,
                    radius: 10,
                    rotation: Math.PI / 4,
                    angle: 0
                })
            })
    };

    var stroke,
        fillColor;

    map.on("click", function(evt) {

        stroke = new ol.style.Stroke({color: 'black', width: 1});

        var coords = evt.coordinate;

        var addedMarker =  new ol.geom.Point( [
        ol.proj.transform(coords, 'EPSG:4326', 'EPSG:3857')]);
            fillColor = 'blue';


         var featurething = new ol.Feature({
                name: "Marker 01",
                geometry: addedMarker
            });

            featurething.setStyle(styles['triangle']);

            vectorSource.addFeature( featurething );

    });

Best Answer

self.map.on("singleclick", function(evt){
   setPinOnMap(evt);
})


setPinOnMap: function(evt){
            var self = this;

            var latLong = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
            var lat     = latLong[1];
            var long    = latLong[0];

            self.params.options.mapClick({lat: lat, long: long});

            if(self.dinamicPinLayer !== undefined){
                console.log("moove")
                self.iconGeometry.setCoordinates(evt.coordinate);
                  //or create another pin  
            } else {
                self.iconGeometry = new ol.geom.Point(evt.coordinate);
                var iconFeature = new ol.Feature({
                    geometry: self.iconGeometry,
                    name: 'Null Island',
                    population: 4000,
                    rainfall: 500
                });
                var iconStyle = new ol.style.Style({
                    image: new ol.style.Icon(({
                        anchor: [0.5, 46],
                        anchorXUnits: 'fraction',
                        anchorYUnits: 'pixels',
                        size: [48, 48],
                        opacity: 1,
                        src: '/resources/cloud/controls/cloudMap/img/redmarker_small.png'
                    }))
                });

                iconFeature.setStyle(iconStyle);

                var vectorSource = new ol.source.Vector({
                    features: [iconFeature]
                });
                self.dinamicPinLayer = new ol.layer.Vector({
                    source: vectorSource
                });
                self.map.addLayer(self.dinamicPinLayer); 
            }


        },
Related Question