How to use the @here/harp-omv-datasource.APIFormat.MapzenV2 function in @here/harp-omv-datasource

To help you get started, we’ve selected a few @here/harp-omv-datasource 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 heremaps / harp.gl / @here / harp-examples / src / datasource_geojson_styling.ts View on Github external
async connect(): Promise {
            //not needed
        }

        // Returns italyData json object.
        async getTile(): Promise<{}> {
            return italyData;
        }
    }
    // end:datasource_style_static.ts

    const mapView = initializeMapView("mapCanvas");

    const omvDataSource = new OmvDataSource({
        baseUrl: "https://xyz.api.here.com/tiles/osmbase/256/all",
        apiFormat: APIFormat.MapzenV2,
        styleSetName: "tilezen",
        maxZoomLevel: 17
    });

    mapView.addDataSource(omvDataSource);

    initializeStyleSetToggle();

    /**
     * Creates a new MapView for the HTMLCanvasElement of the given id.
     */
    // snippet:datasource_style1.ts
    function initializeMapView(id: string): MapView {
        const canvas = document.getElementById(id) as HTMLCanvasElement;
        const sampleMapView = new MapView({
            canvas,
github heremaps / harp.gl / @here / harp-examples / src / multiview_sync-filter-view.ts View on Github external
// snippet:vislib_multiview_mapDiffView_2.ts
    const dataSources = {
        omvDataSource1: new OmvDataSource({
            baseUrl: "https://xyz.api.here.com/tiles/osmbase/256/all",
            apiFormat: APIFormat.MapzenV2,
            createTileInfo: true,
            styleSetName: "tilezen",
            gatherFeatureIds: true,
            showMissingTechniques: true,
            tileFactory: new TileFactory(OmvDebugLabelsTile),
            maxZoomLevel: 17
        }),

        omvDataSource2: new OmvDataSource({
            baseUrl: "https://xyz.api.here.com/tiles/osmbase/256/all",
            apiFormat: APIFormat.MapzenV2,
            createTileInfo: true,
            styleSetName: "tilezen",

            gatherFeatureIds: true,
            showMissingTechniques: true,
            tileFactory: new TileFactory(OmvDebugLabelsTile),
            maxZoomLevel: 17
        })
    };

    mapViews.view1.mapView.addDataSource(dataSources.omvDataSource1);
    mapViews.view2.mapView.addDataSource(dataSources.omvDataSource2);

    CopyrightElementHandler.install("copyrightNotice")
        .attach(mapViews.view1.mapView)
        .attach(mapViews.view2.mapView)
github heremaps / harp.gl / @here / harp-examples / src / datasource_geojson_points.ts View on Github external
<style>
            #mapCanvas {
              top: 0;
            }
        </style>
    `;

    const imageString =
        // tslint:disable-next-line:max-line-length
        "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjQ4cHgiIHZlcnNpb249IjEuMSIgaWQ9Imx1aS1pY29uLWRlc3RpbmF0aW9ucGluLW9uZGFyay1zb2xpZC1sYXJnZSIKCSB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ4IDQ4IgoJIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ4IDQ4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0ibHVpLWljb24tZGVzdGluYXRpb25waW4tb25kYXJrLXNvbGlkLWxhcmdlLWJvdW5kaW5nLWJveCIgb3BhY2l0eT0iMCI+CgkJPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTQ3LDF2NDZIMVYxSDQ3IE00OCwwSDB2NDhoNDhWMEw0OCwweiIvPgoJPC9nPgoJPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNmZmZmZmYiIGQ9Ik0yNCwyQzEzLjg3MDgsMiw1LjY2NjcsMTAuMTU4NCw1LjY2NjcsMjAuMjIzMwoJCWMwLDUuMDMyNSwyLjA1MzMsOS41ODg0LDUuMzcxNywxMi44ODgzTDI0LDQ2bDEyLjk2MTctMTIuODg4M2MzLjMxODMtMy4zLDUuMzcxNy03Ljg1NTgsNS4zNzE3LTEyLjg4ODMKCQlDNDIuMzMzMywxMC4xNTg0LDM0LjEyOTIsMiwyNCwyeiBNMjQsMjVjLTIuNzY1LDAtNS0yLjIzNS01LTVzMi4yMzUtNSw1LTVzNSwyLjIzNSw1LDVTMjYuNzY1LDI1LDI0LDI1eiIvPgo8L2c+Cjwvc3ZnPgo=";

    const mapView = initializeMapView("mapCanvas");

    const omvDataSource = new OmvDataSource({
        baseUrl: "https://xyz.api.here.com/tiles/osmbase/256/all",
        apiFormat: APIFormat.MapzenV2,
        styleSetName: "tilezen",
        maxZoomLevel: 17
    });

    mapView.addDataSource(omvDataSource);

    /**
     * Creates a new MapView for the HTMLCanvasElement of the given id.
     */
    // snippet:datasource_geojson_load1.ts
    function initializeMapView(id: string): MapView {
        const canvas = document.getElementById(id) as HTMLCanvasElement;
        const sampleMapView = new MapView({
            canvas,
            theme: "resources/reducedNight.json"
        });
github heremaps / harp.gl / @here / harp-examples / src / datasource_geojson_property_styling.ts View on Github external
}
            ]);

        mapView.camera.position.set(2000000, 3500000, 6000000); // Europe.
        mapView.geoCenter = new GeoCoordinates(16, -4, 0);

        MapControls.create(mapView);
        mapView.resize(window.innerWidth, window.innerHeight);

        window.addEventListener("resize", () => {
            mapView.resize(window.innerWidth, window.innerHeight);
        });

        const baseMapDataSource = new OmvDataSource({
            baseUrl: "https://xyz.api.here.com/tiles/osmbase/256/all",
            apiFormat: APIFormat.MapzenV2,
            styleSetName: "tilezen",
            maxZoomLevel: 17
        });
        mapView.addDataSource(baseMapDataSource);
        // end:geojson_property_styling1.ts

        return mapView;
    }
github heremaps / harp.gl / @here / harp-examples / src / performance_antialias.ts View on Github external
#stats {
        position: absolute;
        cursor: pointer;
    }

    #stats.info-minimized{
        bottom: 5px;
    }

<canvas id="mapCanvas-antialiased"></canvas>
`;

    // 2. Create 2 [[MapView]] instances, each with its own antialiasing parameters.
    const omvSource = new OmvDataSource({
        baseUrl: "https://xyz.api.here.com/tiles/osmbase/256/all",
        apiFormat: APIFormat.MapzenV2,
        styleSetName: "tilezen",
        maxZoomLevel: 17
    });
    const defaultTheme = "./resources/day.json";
    // snippet:vislib_performance_antialias_1.ts
    const viewWithNativeAntialiasing = initializeMapView(
        "mapCanvas-antialiased",
        defaultTheme,
        "./decoder.bundle.js",
        omvSource
    );
    const viewWithoutNativeAntialising = initializeMapView(
        "mapCanvas",
        defaultTheme,
        "./decoder.bundle.js",
        omvSource
github heremaps / harp.gl / @here / harp-examples / src / hello_one-thread.ts View on Github external
// react on resize events
        window.addEventListener("resize", () => {
            sampleMapView.resize(window.innerWidth, window.innerHeight);
        });
        // end:vislib_hello_onethread_example_3.ts

        return sampleMapView;
    }

    const mapView = initializeMapView("mapCanvas");

    // snippet:vislib_hello_onethread_example_4.ts
    const omvDataSource = new OmvDataSource({
        baseUrl: "https://xyz.api.here.com/tiles/osmbase/256/all",
        apiFormat: APIFormat.MapzenV2,
        styleSetName: "tilezen",
        maxZoomLevel: 17,
        decoder: new OmvTileDecoder()
    });
    // end:vislib_hello_onethread_example_4.ts

    // snippet:vislib_hello_onethread_example_5.ts
    mapView.addDataSource(omvDataSource);
    // end:vislib_hello_onethread_example_5.ts
}
github heremaps / harp.gl / @here / harp-examples / src / datasource_geojson.ts View on Github external
async connect(): Promise {
            //not needed
        }

        // Returns italyData json object.
        async getTile(): Promise&lt;{}&gt; {
            return italyData;
        }
    }
    // end:datasource_style_static.ts

    const mapView = initializeMapView("mapCanvas");

    const omvDataSource = new OmvDataSource({
        baseUrl: "https://xyz.api.here.com/tiles/osmbase/256/all",
        apiFormat: APIFormat.MapzenV2,
        styleSetName: "tilezen",
        maxZoomLevel: 17
    });

    mapView.addDataSource(omvDataSource);

    /**
     * Creates a new MapView for the HTMLCanvasElement of the given id.
     */
    // snippet:datasource_geojson_load1.ts
    function initializeMapView(id: string): MapView {
        const canvas = document.getElementById(id) as HTMLCanvasElement;
        const sampleMapView = new MapView({
            canvas,
            theme: "resources/reducedNight.json"
        });
github heremaps / harp.gl / @here / harp-examples / src / xyz_show_space.ts View on Github external
"technique": "fill",
                "attr": {
                    "color": "#ffff00",
                    "transparent": true,
                    "opacity": 0.5
                }
            }
        ]
    }
    }`;

    const mapView = initializeMapView("mapCanvas");

    const omvDataSource = new OmvDataSource({
        baseUrl: "https://xyz.api.here.com/tiles/osmbase/256/all",
        apiFormat: APIFormat.MapzenV2,
        styleSetName: "tilezen",
        maxZoomLevel: 17
    });

    mapView.addDataSource(omvDataSource);

    const inputField = document.getElementById("xyz-input") as HTMLInputElement;
    const queryString = window.location.search;
    if (queryString.length > 0 && queryString.indexOf("space") === 1) {
        const xyzViewerUrl = queryString.substr(7);
        inputField.value = xyzViewerUrl;
        updateMapView(xyzViewerUrl);
    }

    initTextForm();
github heremaps / harp.gl / @here / harp-examples / src / datasource_geojson_picking.ts View on Github external
function initializeMapViewDataSource(mapView: MapView) {
        const staticDataProvider = new StaticDataProvider();

        const geoJsonDataSource = new StaticGeoJsonDataSource({
            dataProvider: staticDataProvider,
            name: "geojson"
        });

        mapView.addDataSource(geoJsonDataSource).then(() => {
            geoJsonDataSource.setStyleSet(orangeStyle);
        });

        const omvDataSource = new OmvDataSource({
            baseUrl: "https://xyz.api.here.com/tiles/osmbase/256/all",
            apiFormat: APIFormat.MapzenV2,
            styleSetName: "tilezen",
            maxZoomLevel: 17
        });

        mapView.addDataSource(omvDataSource);
        mapView.update();
    }
}
github heremaps / harp.gl / @here / harp-examples / src / mapview_languages.ts View on Github external
window.addEventListener("resize", () => {
            sampleMapView.resize(window.innerWidth, window.innerHeight);
        });

        window.addEventListener("languagechange", () => {
            sampleMapView.languages = MapViewUtils.getBrowserLanguages();
        });

        return sampleMapView;
    }

    const mapView = initializeMapView("mapCanvas");

    const omvDataSource = new OmvDataSource({
        baseUrl: "https://xyz.api.here.com/tiles/osmbase/256/all",
        apiFormat: APIFormat.MapzenV2,
        styleSetName: "tilezen",
        maxZoomLevel: 17
    });

    mapView.addDataSource(omvDataSource);
    mapView.setCameraGeolocationAndZoom(new GeoCoordinates(52.5145, 13.3501), 8);

    function initLanguages() {
        const primaryLanguageComponent = document.getElementById("primaryLang") as any;
        const secondaryLanguageComponent = document.getElementById("secondaryLang") as any;

        if (primaryLanguageComponent) {
            primaryLanguageComponent.onchange = () => {
                mapView.languages = [
                    primaryLanguageComponent.value,
                    secondaryLanguageComponent.value