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.

4
  • 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 '20 at 20:34
  • Can you try to remove let measureTooltipElement; and set let measureTooltipElement = measureTooltip.getElement(); instead of measureTooltipElement = measureTooltip.getElement(); ?
    – ThomasG77
    Jun 18 '20 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. Jun 18 '20 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. Jun 18 '20 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) + ')';

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.