My idea was to make the user able to write a comment, after click I try to add a new Point to the existing layer with draw interaction and tooltip where user can write the comment, cancel (remove tooltip) or draw point in another place. After set draw to map and set layer.getsource() to draw interaction and drawing something, I have error that feature already exists. I noticed that OL does not take another free id, simply this id is already used. It happens after a few drawings. Can anyone help?
let commentLayer = this.map.getLayers().getArray().find((layer) => layer.get('title') === 'Comments')
const writeComments = () => {
if (this.mode === 'read') {
this.map.getInteractions().forEach((interaction) => {
if (interaction && interaction.get('name') === 'select comment') this.map.removeInteraction(interaction);
});
}
this.mode = 'write'
if (commentLayer) {
draw = new ol.interaction.Draw({
source: commentLayer.getSource(),
type: "Point",
});
draw.set('name', 'comments interaction')
this.map.addInteraction(draw);
};
draw.on('drawstart', (evt) => {
// if last draw was not saved delete tooltip and features
if (commentLayer) {
const layerArr = commentLayer.getSource().getFeatures();
if (feature !== null) {
if (document.getElementById('OutputElement')) {
const elem = document.getElementById('OutputElement');
elem.parentNode.removeChild(elem);
}
if (document.getElementById('InputElement')) {
commentLayer.getSource().removeFeature(feature);
feature = null
const elem = document.getElementById('InputElement');
elem.parentNode.removeChild(elem);
};
};
};
});
// create tooltip on draw end
draw.on('drawend', (evt) => {
if (tooltip) this.map.removeOverlay(tooltip);
feature = evt.feature
const pointCoordinates = feature.getGeometry().getFlatCoordinates();
feature.set('type', 'comment');
tooltipElement = document.createElement('div');
tooltipElement.id = 'InputElement';
tooltipElement.className = 'ol-tooltip ol-tooltip-measure';
tooltipElement.appendChild(createTooltip(feature));
tooltip = new ol.Overlay({
element: tooltipElement,
offset: [0, -15],
positioning: 'bottom-center'
});
tooltip.setPosition(pointCoordinates);
this.map.addOverlay(tooltip);
});
};