title: Move an OpenLayer point
body: <p>I want to draw a rectangle and be able to move it by moving its corners. I want it to remain a rectangle all the time. I drew the rectangle and its corners, and I know how to erase its sides.
  I would like to put an EventListener on its corners, and be able to erase or move its corners. Do you know how to do that ? Thank you.</p>
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css&quot; type=&quot;text/css&quot;&gt;
      &lt;script src=&quot;https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js&quot;&gt;&lt;/script&gt;
      &lt;style&gt;
        .map {
          height: 600px;
          width: 100%;
        }
      &lt;/style&gt;
      &lt;title&gt;OpenLayers example&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h2&gt;My Map&lt;/h2&gt;
      &lt;div id=&quot;map&quot; class=&quot;map&quot;&gt;
      &lt;/div&gt;
      &lt;script&gt;
  
  //alert(&quot;Rectangle_interactif_Openlayers.js&quot;);
  
  // Fonction renvoyant une ligne.
  function create_line(lon1, lon2, lat1, lat2) {
    var points = [ [lon1, lat1], [lon2, lat2] ];
    for (var i = 0; i &lt; points.length; i++) { // Partie à revoir
      points[i] = ol.proj.transform(points[i], 'EPSG:4326', 'EPSG:3857');
    }
    var featureLine = new ol.Feature({
      geometry: new ol.geom.LineString(points)
    });
    var vectorLine = new ol.source.Vector({});
    vectorLine.addFeature(featureLine);
    var vectorLineLayer = new ol.layer.Vector({
      source: vectorLine,
      style: new ol.style.Style({
          fill: new ol.style.Fill({ color: '#007bff', weight: 4 }),
          stroke: new ol.style.Stroke({ color: '#007bff', width: 2 })
      })
    });
    return vectorLineLayer
  }
  
  // Fonction renvoyant la liste des lignes traçant un rectangle
  function create_rectangle(lon1, lon2, lat1, lat2) {
    let r = []; // liste des traits traçant le rectangle
    n = 50;
    step_lon = (lon2-lon1)/n;
    step_lat = (lat2-lat1)/n;
    for (let i = 0; i &lt; n; i++) {
      lon = lon1 + i*step_lon;
      lat = lat1 + i*step_lat
      a = create_line(lon, lon + step_lon, lat1, lat1);
      r.push(a);
      b = create_line(lon, lon + step_lon, lat2, lat2);
      r.push(b);
      c = create_line(lon1, lon1, lat, lat + step_lat);
      r.push(c);
      d = create_line(lon2, lon2, lat, lat + step_lat);
      r.push(d);
    }
    return r;
  }
  
  // fonction traçant les traits d'un tableau
  function draw_lines_tab(t) {
    t.forEach(function(line){
      map.addLayer(line);
  });
  }
  
  // fonction effaçant les traits d'un tableau
  function erase_lines_tab(t) {
    t.forEach(function(line){
      map.removeLayer(line);
  });
  }
  
  // Longitudes et latitudes de départ du rectangle.
  lon1 = 2;
  lon2 = -74;
  lat1 = 48;
  lat2 = 40;
  
  // generate the 4 points
  const features = [];
  p1 = new ol.geom.Point(ol.proj.fromLonLat([lon1, lat1]));
  p2 = new ol.geom.Point(ol.proj.fromLonLat([lon1, lat2]));
  p3 = new ol.geom.Point(ol.proj.fromLonLat([lon2, lat1]));
  p4 = new ol.geom.Point(ol.proj.fromLonLat([lon2, lat2]));
  points_rectangle = [p1, p2, p3, p4];
  for (i = 0; i &lt; 4; i++) {
    features.push(new ol.Feature({
      geometry: points_rectangle[i]
    }));
  }
  
  // create the source and layer for random features
  const vectorSource = new ol.source.Vector({
    features
  });
  const vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: new ol.style.Style({
      image: new ol.style.Circle({
        radius: 5,
       fill: new ol.style.Fill({color: 'blue'})
      })
    })
  });
  // create map and add layers
  const map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      }),
      vectorLayer
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([-36, 44]),
      zoom: 4
    })
  });
  
  rectangle = create_rectangle(lon1, lon2, lat1, lat2);
  //line = create_line(lon1, lon2, lat1, lat2);
  draw_lines_tab(rectangle);
  //erase_lines_tab(rectangle);
  
  p1.addEventListener('click', function(){
    alert(&quot;click p1&quot;);
  });
  
  p2.addEventListener('click', function(){
    alert(&quot;click p2&quot;);
  });
  
  p3.addEventListener('click', function(){
    alert(&quot;click p3&quot;);
  });
  
  p4.addEventListener('click', function(){
    alert(&quot;click p4&quot;);
  });
  
  // Fonction main
  function main() {
    
  }
  
  main();
  
      &lt;/script&gt;
      &lt;script src=&quot;Rectangle_interactif_Openlayers.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>