CODEWITHSUNDEEP
javascriptopenlayersopenstreetmap
dewi suci
dewi suci

Reputation: 19

Remove added marker before adding new marker

I'm trying to develop web application with tag location feature using openlayers. I want to add maximum one marker to map when it is clicked. When user clicked on map for the second times, the previous marker will be deleted. But, I can't find appropriate way to remove the marker before add the new one.

<script type="text/javascript">
    var myMap = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([118.0149, -2.5489]),
            zoom: 5
        })
    });

    var features = [];

    myMap.on('click', function(evt) {
        var coordinates = evt.coordinate;
        var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
        var lon = lonlat[0];
        var lat = lonlat[1];

        var Markers = {lat: lat, lng: lon};
        addPin(Markers);
    });

    function addPin(Markers) {
        var item = Markers;
        var longitude = item.lng;
        var latitude = item.lat;

        var iconFeature = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.transform([longitude, latitude], 'EPSG:4326', 'EPSG:3857'))
        });

        var iconStyle = new ol.style.Style({
            image: new ol.style.Icon(({
                anchor: [0.5, 1],
                src: "http://cdn.mapmarker.io/api/v1/pin?text=P&size=50&hoffset=1"
            }))
        });

        iconFeature.setStyle(iconStyle);
        features.push(iconFeature);

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

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

        myMap.addLayer(vectorLayer);
    }

Upvotes: 0

Views: 1452

Answers (2)

Shah Hassan
Shah Hassan

Reputation: 146

If you want to get just the current location of the marker I would suggest you should not save the previous values in your features array. Here is the basic solution on JS fiddle.

In your addPin function change this

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

You can see the working copy here https://jsfiddle.net/shahhassancs/xgw5jus7/4/

Upvotes: 1

pavlos
pavlos

Reputation: 3081

You have several ways to do it. The most proper way is to use: 

vectorLayer.getSource().clear();

or: 

vectorSource.clear();

But in your case as each time you add a marker you also add a new layer, just removing the layer from map before adding it should be just enough:

var vectorLayer;
function addPin(Markers) {
        //here it is
        myMap.removeLayer(vectorLayer) 
        var item = Markers;
        var longitude = item.lng;
        var latitude = item.lat;
        .........................
        .........................
        //and here remove the keyword var , so init the one declared in global section
        vectorLayer = new ol.layer.Vector({
        source: vectorSource
        });

Dont forget to declare your vector layer in the global section and not inside the addPin function or else you will get errors

Upvotes: 2

Related Questions