0

I have a LineString in OL5 and I want to iterate over each segment and display a label at the segment end. I have this mostly working, but all the Overlay labels magically end up at the last position inserted.

I have this code:

function createMeasureTooltip() {
    let measureTooltipElement = document.createElement('div');
    measureTooltipElement.className = 'tooltip tooltip-measure';
    let measureTooltip = new Overlay({
        element: measureTooltipElement,
        offset: [0, -15],
        positioning: 'bottom-center'
    });

    return measureTooltip;
}

draw.on('drawend',
    function(evt) {
        let out = '';
        let measureTooltipElement;
        let geom = evt.feature.getGeometry();
        console.log('In drawend');
        console.log(evt);
        if (geom instanceof LineString) {
            geom.forEachSegment(function (a, b) {
                out = formatSegment(a, b);
                let measureTooltip = createMeasureTooltip();
                measureTooltipElement = measureTooltip.getElement();

                measureTooltipElement.innerHTML = out;
                measureTooltipElement.className = 'tooltip tooltip-static';
                measureTooltip.setOffset([0, -7]);
                measureTooltip.setPosition(b);
                console.log(b);
                console.log(out);
                console.log(measureTooltip);
                map.addOverlay(measureTooltip);
                measureTooltip = null;
            });
            measureTooltipElement.innerHTML = out + ', (' +
                formatLength(geom) + ')';
        }
        // unset sketch
        sketch = null;
        $('.tooltip-measure').remove();
        unByKey(listener);
    }, this);

the drawend code is from my sketch Interaction draw handler.

I get all the labels correctly generated, but they do not stay where they are initially positioned at, and are all located at the end of the LineString.

Any ideas on how to fix this? I've run out of ideas and nothing seems to help.

  • You are looping on each segments. Why do you overwrite measureTooltipElement each time you loop (e.g let measureTooltipElement; and you overwrite it in the loop geom.forEachSegment)? – ThomasG77 Jun 18 at 20:34
  • Can you try to remove let measureTooltipElement; and set let measureTooltipElement = measureTooltip.getElement(); instead of measureTooltipElement = measureTooltip.getElement(); ? – ThomasG77 Jun 18 at 20:36
  • Tried that but no joy. createMeasureTooltip() creates a new Overlay and attaches a new DIV to it, so let measureTooltipElement; is just a local reference to the new object that I'm modifying in the loop. Also it defined outside the loop, so I can modify the last label and append the total LineString length to the label. – Stephen Woodbridge Jun 18 at 20:48
  • I'm wondering if the default Overlay obj or the Vector layer the sketch has some change event that is modifying the position of the previously added Overlay objs as new ones are added. Just grabbing at straws here. I console.log(b) and if I grab the overlay obj in inspector and obj.setPosition([x,y]) it moves that mark to the correct place. – Stephen Woodbridge Jun 18 at 20:58
0

OK, this is really weird! But I was able to fix it by changing the code to effectively clone "b" in "c" like:

            geom.forEachSegment(function (a, b) {
                out = formatSegment(a, b);
                let measureTooltip = createMeasureTooltip();
                measureTooltipElement = measureTooltip.getElement();

                measureTooltipElement.innerHTML = out;
                measureTooltipElement.className = 'tooltip tooltip-static';
                measureTooltip.setOffset([0, -7]);
                let c = [b[0], b[1]];
                measureTooltip.setPosition(c);
                console.log(c);
                console.log(measureTooltip);
                map.addOverlay(measureTooltip);
            });
            measureTooltipElement.innerHTML = out + ', (' +
                 formatLength(geom) + ')';
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.