How to use the @terrestris/ol-util/dist/MeasureUtil/MeasureUtil.formatLength function in @terrestris/ol-util

To help you get started, we’ve selected a few @terrestris/ol-util examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github terrestris / react-geo / src / Button / MeasureButton / MeasureButton.tsx View on Github external
if (geom instanceof OlMultiPolygon) {
        geom = geom.getPolygons()[0];
      }

      if (geom instanceof OlMultiLinestring) {
        geom = geom.getLineStrings()[0];
      }

      let measureTooltipCoord = geom.getLastCoordinate();

      if (measureType === 'polygon') {
        output = MeasureUtil.formatArea(geom, map, decimalPlacesInTooltips);
        // attach area at interior point
        measureTooltipCoord = geom.getInteriorPoint().getCoordinates();
      } else if (measureType === 'line') {
        output = MeasureUtil.formatLength(geom, map, decimalPlacesInTooltips);
      } else if (measureType === 'angle') {
        output = MeasureUtil.formatAngle(geom, map, decimalPlacesInTooltips);
      }

      this._measureTooltipElement.innerHTML = output;
      this._measureTooltip.setPosition(measureTooltipCoord);
    }
  }
github terrestris / react-geo / src / Button / MeasureButton / MeasureButton.spec.tsx View on Github external
it('becomes a lineString feature with valid geometry', () => {

        instance._feature = mockLineFeat;
        instance.addMeasureStopTooltip(coordinate);

        expect(instance._feature).toBeDefined();
        expect(instance._feature.getGeometry()).toBeDefined();

        const value = MeasureUtil.formatLength(instance._feature.getGeometry(), map, 2);
        expect(value).toBe('99.89 m');
      });
github terrestris / react-geo / src / Button / MeasureButton / MeasureButton.spec.tsx View on Github external
it('adds a tooltip overlay with correct properties and position to the map', () => {

        wrapper.setProps({
          measureType: 'line'
        });

        instance._feature = mockLineFeat;
        instance.addMeasureStopTooltip(coordinate);

        const value = MeasureUtil.formatLength(instance._feature.getGeometry(), map, 2);
        expect(parseInt(value, 10)).toBeGreaterThan(10);

        const overlays = map.getOverlays();
        expect(overlays.getArray().length).toBe(1);

        const overlay = overlays.getArray()[0];
        const offset = overlay.getOffset();
        const positioning = overlay.getPositioning();
        const className = overlay.getElement().className;

        expect(offset).toEqual([0, -15]);
        expect(positioning).toBe('bottom-center');
        expect(className).toBe('react-geo-measure-tooltip react-geo-measure-tooltip-static');
        expect(overlay.getPosition()).toEqual(coordinate);

        expect(instance._createdTooltipDivs.length).toBe(1);
github terrestris / react-geo / src / Button / MeasureButton / MeasureButton.tsx View on Github external
measureTooltipCssClasses
    } = this.props;

    if (!_isEmpty(this._feature)) {
      let geom = this._feature.getGeometry();

      if (geom instanceof OlMultiPolygon) {
        geom = geom.getPolygons()[0];
      }

      if (geom instanceof OlMultiLinestring) {
        geom = geom.getLineStrings()[0];
      }

      const value = measureType === 'line' ?
        MeasureUtil.formatLength(geom, map, decimalPlacesInTooltips) :
        MeasureUtil.formatArea(geom, map, decimalPlacesInTooltips);

      if (parseInt(value, 10) > 0) {
        const div = document.createElement('div');
        div.className = `${measureTooltipCssClasses.tooltip} ${measureTooltipCssClasses.tooltipStatic}`;
        div.innerHTML = value;
        const tooltip = new OlOverlay({
          element: div,
          offset: [0, -15],
          positioning: 'bottom-center'
        });
        map.addOverlay(tooltip);

        tooltip.setPosition(coordinate);

        this._createdTooltipDivs.push(div);