'OpenLayers Interaction is immediately removed after mouse click?

I have created a map according to OpenLayers 5.3. according the docs @ here https://openlayers.org/en/v5.3.0/examples/draw-features.html I draw a feature/interaction, however this 'point' is immediately removed after mouse click. you may view my live map @ https://ramzingate.com/map.html and view the source code try to click on the map to create a point/feature. but it is Removed !!!!! I need to keep this point, and get the LonLat coordinates..

///// Creating a centering point on the map view and drawing a circle around it
var centerLongitudeLatitude = ol.proj.fromLonLat([51.338076, 35.699756]);
const source = new ol.source.Vector({
                                    wrapX: false,
//                                  projection: 'EPSG:4326',
//                                  features: [new ol.Feature(new ol.geom.Circle(centerLongitudeLatitude, 550))]
                                    });

    var layer = new ol.layer.Vector({
      source: source,
      style: [
        new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: '#f75f62',
            width: 2
          }),
          fill: new ol.style.Fill({
            color: 'rgba(247,95,98, 0.35)'
          })
        })
      ]
    });
    
    raster = new ol.layer.Tile({
      source: new ol.source.OSM(),
    });

    var myMap = new ol.Map({
        layers: [layer],
        target: 'map',
        key: 'web.uNSRgsxSeuCdyNCZSMvciGHZBCDatUaXbGgaHN05',
        maptype: 'dreamy-gold',
        poi: true,
        traffic: false,
        view: new ol.View({
            center: ol.proj.fromLonLat([51.338076, 35.699756]),
            zoom: 15
        })
    });


    //// Here is where I am trying to enable draw a feature with interaction
    let draw; //// global so we can remove it later
    
    function addInteraction() {

    // myMap.removeInteraction(draw);

      draw = new ol.interaction.Draw({
         source: source,
         type: 'Point', // Point,Polygon,Circle
      });
        
    // draw.removeLastPoint();
      myMap.addInteraction(draw);
    }

    
    //////////////// Call the Draw Interaction
    addInteraction();

need help

openlayersopenlayers-5


Solution 1:[1]

You cannot see the drawn points because your style does not include image or text which are the only style types which support point geometry. Adding an image to the style will fix it, for example

    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: '#f75f62',
        width: 2
      }),
      fill: new ol.style.Fill({
        color: 'rgba(247,95,98, 0.35)'
      }),
      image: new ol.style.Circle({
        radius: 6,
        fill: new ol.style.Fill({
          color: '#f75f62',
        })
      })
    })

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mike

Related Questions