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
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',
})
})
})