How to use @here/harp-webtile-datasource - 8 common examples
To help you get started, we’ve selected a few @here/harp-webtile-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.
heremaps / harp.gl / @here / harp-examples / src / datasource_satellite-tile_globe.ts View on Github 
function main() {
const mapView = initializeMapView("mapCanvas");
// snippet:harp_gl_datasource_satellitetile_globe_1.ts
const webTileDataSource = new WebTileDataSource({
appId,
appCode,
tileBaseAddress: WebTileDataSource.TILE_AERIAL_SATELLITE
});
// end:harp_gl_datasource_satellitetile_globe_1.ts
mapView.setCameraGeolocationAndZoom(new GeoCoordinates(40.702, -74.01154), 3.6);
// snippet:harp_gl_datasource_satellitetile_globe_2.ts
mapView.addDataSource(webTileDataSource);
// end:harp_gl_datasource_satellitetile_globe_2.ts
}// resize the mapView to maximum
map.resize(window.innerWidth, window.innerHeight);
// react on resize events
window.addEventListener("resize", () => {
map.resize(window.innerWidth, window.innerHeight);
});
return map;
}
const mapView = initializeMapView("mapCanvas");
// snippet:harp_gl_datasource_webtile_1.ts
const webTileDataSource = new WebTileDataSource({
appId,
appCode,
ppi: WebTileDataSource.ppiValue.ppi320
});
// end:harp_gl_datasource_webtile_1.ts
// snippet:harp_gl_datasource_webtile_2.ts
mapView.addDataSource(webTileDataSource);
// end:harp_gl_datasource_webtile_2.ts
}function main() {
const mapView = initializeMapView("mapCanvas");
// snippet:harp_gl_datasource_webtile_globe_1.ts
const webTileDataSource = new WebTileDataSource({
appId,
appCode,
ppi: WebTileDataSource.ppiValue.ppi320
});
// end:harp_gl_datasource_webtile_globe_1.ts
mapView.setCameraGeolocationAndZoom(new GeoCoordinates(40.702, -74.01154), 3.6);
// snippet:harp_gl_datasource_webtile_globe_2.ts
mapView.addDataSource(webTileDataSource);
// end:harp_gl_datasource_webtile_globe_2.ts
}// resize the mapView to maximum
map.resize(window.innerWidth, window.innerHeight);
// react on resize events
window.addEventListener("resize", () => {
map.resize(window.innerWidth, window.innerHeight);
});
return map;
}
const mapView = initializeMapView("mapCanvas");
// snippet:harp_gl_datasource_satellitetile_1.ts
const webTileDataSource = new WebTileDataSource({
appId,
appCode,
tileBaseAddress: WebTileDataSource.TILE_AERIAL_SATELLITE
});
// end:harp_gl_datasource_satellitetile_1.ts
// snippet:harp_gl_datasource_satellitetile_2.ts
mapView.addDataSource(webTileDataSource);
// end:harp_gl_datasource_satellitetile_2.ts
}// react on resize events
window.addEventListener("resize", () => {
map.resize(window.innerWidth, window.innerHeight);
});
return map;
}
const mapView = initializeMapView("mapCanvas");
// snippet:harp_gl_datasource_satellitetile_1.ts
const webTileDataSource = new WebTileDataSource({
appId,
appCode,
tileBaseAddress: WebTileDataSource.TILE_AERIAL_SATELLITE
});
// end:harp_gl_datasource_satellitetile_1.ts
// snippet:harp_gl_datasource_satellitetile_2.ts
mapView.addDataSource(webTileDataSource);
// end:harp_gl_datasource_satellitetile_2.ts
}function main() {
const mapView = initializeMapView("mapCanvas");
// snippet:harp_gl_datasource_satellitetile_globe_1.ts
const webTileDataSource = new WebTileDataSource({
appId,
appCode,
tileBaseAddress: WebTileDataSource.TILE_AERIAL_SATELLITE
});
// end:harp_gl_datasource_satellitetile_globe_1.ts
mapView.setCameraGeolocationAndZoom(new GeoCoordinates(40.702, -74.01154), 3.6);
// snippet:harp_gl_datasource_satellitetile_globe_2.ts
mapView.addDataSource(webTileDataSource);
// end:harp_gl_datasource_satellitetile_globe_2.ts
}function main() {
const mapView = initializeMapView("mapCanvas");
// snippet:harp_gl_datasource_webtile_globe_1.ts
const webTileDataSource = new WebTileDataSource({
appId,
appCode,
ppi: WebTileDataSource.ppiValue.ppi320
});
// end:harp_gl_datasource_webtile_globe_1.ts
mapView.setCameraGeolocationAndZoom(new GeoCoordinates(40.702, -74.01154), 3.6);
// snippet:harp_gl_datasource_webtile_globe_2.ts
mapView.addDataSource(webTileDataSource);
// end:harp_gl_datasource_webtile_globe_2.ts
}// react on resize events
window.addEventListener("resize", () => {
map.resize(window.innerWidth, window.innerHeight);
});
return map;
}
const mapView = initializeMapView("mapCanvas");
// snippet:harp_gl_datasource_webtile_1.ts
const webTileDataSource = new WebTileDataSource({
appId,
appCode,
ppi: WebTileDataSource.ppiValue.ppi320
});
// end:harp_gl_datasource_webtile_1.ts
// snippet:harp_gl_datasource_webtile_2.ts
mapView.addDataSource(webTileDataSource);
// end:harp_gl_datasource_webtile_2.ts
}@here/harp-webtile-datasource
WebTile Data source
