OpenLayers - remove marker

A button changing something on the map! onclick event removes a feature from a vector layer

<html>
<head>
   <title>OpenLayers - remove marker</title>
   <style>
   #mapdiv {
      width: 400px;
      height: 220px;
      float:left;
   }
   #buttons {
      float:left;
      background:YELLOW;
      padding: 10px;
      margin: 10px;
   }
   </style>
</head>
<body>
  <div id="mapdiv"></div>
  <div id="buttons">
     <input type="button" value="Remove marker" onClick="removeMarker();" />
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/lib/OpenLayers.js"></script>           
  <script>
  
    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());
    
    epsg4326 =  new OpenLayers.Projection("EPSG:4326"); //WGS 1984 projection
    projectTo = map.getProjectionObject(); //The map projection (Spherical Mercator)
   
    var lonLat = new OpenLayers.LonLat( -0.1279688, 51.5077286 ).transform(epsg4326, projectTo);
          
    var zoom=2;
    map.setCenter (lonLat, zoom);

var vectorLayer = new OpenLayers.Layer.Vector("Overlay");
    
    var feature = new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.Point( -0.1279688, 51.5077286 ).transform(epsg4326, projectTo),
            {description:'This is the value of<br>the description attribute'} ,
            {externalGraphic: './img/marker.png', graphicHeight: 25, graphicWidth: 21, graphicXOffset:-12, graphicYOffset:-25  }
        );
 
    
    vectorLayer.addFeatures(feature);

map.addLayer(vectorLayer);
    
    
    function removeMarker() {
       vectorLayer.removeFeatures( [ feature ] );
    }
  </script>

</body>
</html>

view directly

Home
Blog
About
Maps
Other
Contact

Harry Wood

OpenLayers - remove marker