How to use @here/harp-utils - 10 common examples

mapView = new MapView({
            canvas,
            theme: options.theme,
            preserveDrawingBuffer: true,
            pixelRatio: 1
        });

        const defaultLookAt: LookAtParams = {
            latitute: 53.3,
            longitude: 14.6,
            distance: 200000,
            tilt: 0,
            azimuth: 0
        };

        const lookAt = mergeWithOptions(defaultLookAt, options.lookAt);

        mapView.lookAt(
            new GeoCoordinates(lookAt.latitute, lookAt.longitude),
            lookAt.distance,
            lookAt.tilt,
            lookAt.azimuth
        );
        // Shutdown errors cause by firefox bug
        mapView.renderer.getContext().getShaderInfoLog = (x: any) => {
            return "";
        };

        const geoJsonDataSource = new OmvDataSource({
            decoder: new OmvTileDecoder(),
            dataProvider: new GeoJsonDataProvider(
                "geojson",

private initializeGlyphs(
        textElement: TextElement,
        textElementStyle: TextElementStyle,
        tempParams: TempParams
    ): boolean {
        // Trigger the glyph load if needed.
        if (textElement.loadingState === LoadingState.Initialized) {
            return true;
        }

        assert(textElementStyle.textCanvas !== undefined);
        const textCanvas = textElementStyle.textCanvas!;

        if (textElement.loadingState === undefined) {
            textElement.loadingState = LoadingState.Requested;

            if (textElement.renderStyle === undefined) {
                textElement.renderStyle = new TextRenderStyle({
                    ...textElementStyle.renderParams,
                    ...textElement.renderParams
                });
            }
            if (textElement.layoutStyle === undefined) {
                textElement.layoutStyle = new TextLayoutStyle({
                    ...textElementStyle.layoutParams,
                    ...textElement.layoutParams
                });

private placeTextElementGroup(
        groupState: TextElementGroupState,
        renderParams: RenderParams,
        maxNumPlacedLabels: number,
        pass: Pass
    ): boolean {
        // Unvisited text elements are never placed.
        assert(groupState.visited);

        if (this.m_textRenderers.length === 0) {
            logger.warn("No text renderers initialized.");
            return false;
        }

        const shieldGroups: number[][] = [];

        const temp: TempParams = {
            additionParams: {},
            poiMeasurementParams: {},
            measurementParams: {},
            bufferAdditionParams: {}
        };
        const hiddenKinds = this.m_viewState.hiddenGeometryKinds;

private setupPoiInfo(
        poiInfo: PoiInfo,
        imageTexture: ImageTexture,
        imageItem: ImageItem,
        zoomLevel: number
    ) {
        assert(poiInfo.uvBox === undefined);

        if (imageItem === undefined || imageItem.imageData === undefined) {
            logger.error("setupPoiInfo: No imageItem/imageData found");
            // invalid render batch number
            poiInfo.poiRenderBatch = INVALID_RENDER_BATCH;
            poiInfo.isValid = false;
            return;
        }

        const technique = poiInfo.technique;

        const imageWidth = imageItem.imageData.width;
        const imageHeight = imageItem.imageData.height;

        const iconWidth = imageTexture.width !== undefined ? imageTexture.width : imageWidth;
        const iconHeight = imageTexture.height !== undefined ? imageTexture.height : imageHeight;

get priority() {
        assert(this.lists.length > 0);
        // All text element lists here have the same priority.
        return this.lists[0].group.priority;
    }
    /**

featureIndex < starts.length - 1
                    ? starts[featureIndex + 1]
                    : geometryAccessor.getCount();

            // setup/update the accessor for the new range of the object
            geometryAccessor.setRange(featureStart, featureEnd);

            switch (geometryType) {
                case GeometryType.Point:
                case GeometryType.Text:
                    this.visitor.visitPoint(featureId);
                    break;
                case GeometryType.SolidLine:
                case GeometryType.ExtrudedLine:
                case GeometryType.TextPath:
                    assert(isLineAccessor(geometryAccessor));
                    this.visitor.visitLine(featureId, (geometryAccessor as any) as ILineAccessor);
                    break;
                case GeometryType.Polygon:
                case GeometryType.ExtrudedPolygon:
                    this.visitor.visitArea(featureId);
                    break;
                case GeometryType.Object3D:
                    assert(isObject3dAccessor(geometryAccessor));
                    this.visitor.visitObject3D(
                        featureId,
                        (geometryAccessor as any) as IObject3dAccessor
                    );
                    break;
                default:
                    logger.warn("#visitObject: invalid geometryType");
            }

private addPointLabel(
        labelState: TextElementState,
        position: THREE.Vector3,
        screenPosition: THREE.Vector2,
        poiRenderer: PoiRenderer,
        textCanvas: TextCanvas,
        renderParams: RenderParams,
        temp: TempParams,
        iconIndex?: number
    ): boolean {
        const pointLabel: TextElement = labelState.element;
        const textRenderState: RenderState | undefined = labelState.textRenderState;

        assert(iconIndex === undefined || labelState.iconRenderStates !== undefined);
        const iconRenderState: RenderState =
            iconIndex !== undefined
                ? labelState.iconRenderStates![iconIndex]
                : labelState.iconRenderState!;
        assert(iconRenderState !== undefined);

        const poiTextMaxDistance = getMaxViewDistance(
            this.m_viewState,
            this.m_options.maxDistanceRatioForPoiLabels!
        );
        const hasText = textRenderState !== undefined && pointLabel.text !== "";

        // Find the label's original position.
        tempScreenPosition.x = tempPoiScreenPosition.x = screenPosition.x;
        tempScreenPosition.y = tempPoiScreenPosition.y = screenPosition.y;

getPoints(
        ringIndex: number
    ): {
        points: ArrayLike;
        pointsStart: number;
        numPointValues: number;
    } {
        assert(ringIndex >= 0);
        assert(ringIndex < this.numRings);
        assert(this.polygons !== undefined);
        if (ringIndex < 0 || ringIndex >= this.numRings || this.polygons === undefined) {
            throw new Error("ExtendedTileInfoPolygonAccessor: Invalid ring index");
        }

        // compute the start/size of the points in this ring. All `points` are actually just the
        // indices of a single X/Y coordinate.
        const pointsStart = this.polygons.innerRingStartIndex[this.ringStart + ringIndex];

        let numPointValues: number;
        if (ringIndex < this.numRings - 1) {
            numPointValues =
                this.polygons.innerRingStartIndex[this.ringStart + ringIndex + 1] - pointsStart;
        } else {
            if (this.ringStart + ringIndex < this.polygons.innerRingStartIndex.length - 1) {
                numPointValues =

import { IOmvEmitter, OmvDecoder, Ring } from "./OmvDecoder";
import {
    tile2world,
    webMercatorTile2TargetTile,
    webMercatorTile2TargetWorld,
    world2tile
} from "./OmvUtils";

import {
    AttrEvaluationContext,
    evaluateTechniqueAttr
} from "@here/harp-datasource-protocol/lib/TechniqueAttr";
// tslint:disable-next-line:max-line-length
import { SphericalGeometrySubdivisionModifier } from "@here/harp-geometry/lib/SphericalGeometrySubdivisionModifier";

const logger = LoggerManager.instance.create("OmvDecodedTileEmitter");

const tempTileOrigin = new THREE.Vector3();
const tempVertOrigin = new THREE.Vector3();
const tempVertNormal = new THREE.Vector3();
const tempFootDisp = new THREE.Vector3();
const tempRoofDisp = new THREE.Vector3();

const tmpV2 = new THREE.Vector2();
const tmpV2r = new THREE.Vector2();
const tmpV3 = new THREE.Vector3();
const tmpV3r = new THREE.Vector3();

const tempP0 = new THREE.Vector2();
const tempP1 = new THREE.Vector2();
const tempPreviousTangent = new THREE.Vector2();

import * as THREE from "three";

// tslint:disable-next-line: max-line-length
import { SphericalGeometrySubdivisionModifier } from "@here/harp-geometry/lib/SphericalGeometrySubdivisionModifier";
import {
    GeoCoordinates,
    ProjectionType,
    TileKey,
    TilingScheme,
    webMercatorTilingScheme
} from "@here/harp-geoutils";
import { CopyrightInfo, DataSource, Tile, UrlCopyrightProvider } from "@here/harp-mapview";
import { getOptionValue, LoggerManager } from "@here/harp-utils";

const logger = LoggerManager.instance.create("MapView");

const textureLoader = new THREE.TextureLoader();
textureLoader.crossOrigin = ""; // empty assignment required to support CORS

/**
 * An interface for the rendering options that can be passed to the [[WebTileDataSource]].
 */
export interface WebTileRenderingOptions {
    /**
     * Opacity of the rendered images.
     * @default 1.0
     */
    opacity?: number;
}

/**