OpenLayers OL-Ext draw path with measure tool-tip

Question

I'm using OL-Ext and have implemented using GPS to draw polygons and lines on an OpenLayers 3 map.

I'm trying to add a measure tool-tip while "follow" is active.

I've implemented this while drawing on the map but have not been able to translate it into the OL-Ext tools.

This is how I've done it while drawing on the map...

webMapValues.drawObj.on('drawstart',
      function (evt) {
             if (webMapValues.activeDrawControl == "Ruler") {
                            // set sketch
                            webMapValues.sketch = evt.feature;

                            /** @type {ol.Coordinate|undefined} */
                            var tooltipCoord = evt.coordinate;

                            listener = webMapValues.sketch.getGeometry().on('change', function (evt) {
                                var geom = evt.target;
                                var output;
                                if (geom instanceof ol.geom.Polygon) {
                                    webMapValues.rulerLength = formatArea(geom);
                                    tooltipCoord = geom.getInteriorPoint().getCoordinates();
                                } else if (geom instanceof ol.geom.LineString) {
                                    webMapValues.rulerLength = rcisMapService.formatLength(geom);
                                    tooltipCoord = geom.getLastCoordinate();
                                }
                                webMapValues.measureTooltipElement.innerHTML = webMapValues.rulerLength;
                                webMapValues.measureTooltip.setPosition(tooltipCoord);
                         });
                     }

}, this);

I would like to do the same thing with OL-Ext and this is where I am so far.

webMapValues.geoTrackActive.on("tracking", function (e) {
                $("#accuraty").width((e.geolocation.getAccuracy()));
                webMapValues.geoGauge.val(e.geolocation.getAccuracy());
                $("#heading").val(e.geolocation.getHeading());
                $("#z").val(e.geolocation.getAltitude());


                    // set sketch
                    webMapValues.sketch = e.feature;

                    /** @type {ol.Coordinate|undefined} */
                    var tooltipCoord = e.feature.getGeometry.getCoordinates();

                    listener = webMapValues.sketch.getGeometry().on('change', function (e) {
                        var geom = e.geolocation.target;
                        var output;
                        if (geom instanceof ol.geom.Polygon) {
                            webMapValues.rulerLength = formatArea(geom);
                            tooltipCoord = geom.getInteriorPoint().getCoordinates();
                        } else if (geom instanceof ol.geom.LineString) {
                            webMapValues.rulerLength = rcisMapService.formatLength(geom);
                            tooltipCoord = geom.getLastCoordinate();
                        }
                        webMapValues.measureTooltipElement.innerHTML = webMapValues.rulerLength;
                        webMapValues.measureTooltip.setPosition(tooltipCoord);
                    });
 },this);

I'm currently unable to get the coordinates from "e" I've tried several iterations of

 var tooltipCoord = e.feature.getGeometry.getCoordinates();

but don't seem to be able to access the coordinates.

Any help is appreciated!

UPDATE

This uses ol.interaction.GeolocationDraw

score 0 · Accepted Answer · answered May 17 '18 at 14:55

This is what the working Ol-ext GPS polygon draw tooltip code looks like...

   webMapValues.geoTrackActive.on("tracking", function (e) {
                $("#accuraty").width((e.geolocation.getAccuracy()));
                webMapValues.geoGauge.val(e.geolocation.getAccuracy());
                $("#heading").val(e.geolocation.getHeading());
                $("#z").val(e.geolocation.getAltitude());


                    // set sketch
                    webMapValues.sketch = e.target.sketch_;

                    /** @type {ol.Coordinate|undefined} */
                var tooltipCoord = e.geolocation.getPosition();

                var feature = e.feature;
                var geom = e.feature.getGeometry();
                        var output;
                if (geom instanceof ol.geom.Polygon) {
                            webMapValues.polyAcres = MapService.formatArea(geom);
                            tooltipCoord = geom.getInteriorPoint().getCoordinates();
                            webMapValues.measureTooltipElement.innerHTML = webMapValues.polyAcres;
                            webMapValues.measureTooltip.setPosition(tooltipCoord);                                
                        } else if (geom instanceof ol.geom.LineString) {
                            webMapValues.rulerLength = MapService.formatLength(geom);
                            tooltipCoord = geom.getLastCoordinate();
                            //**************** Moved inside 'else' for LineString **********
                            webMapValues.measureTooltipElement.innerHTML = webMapValues.rulerLength;
                            webMapValues.measureTooltip.setPosition(tooltipCoord);
                        } 
            },this);

OpenLayers OL-Ext draw path with measure tool-tip

1 Answers1