Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

183
Views
Add new Feature Point to existing layer with draw interaction in OpenLayers

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);
          });
        };
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!