Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
CopyrightElementHandler.install("copyrightNotice")
.attach(mapView)
.setDefaults([
{
id: "openstreetmap.org",
label: "OpenStreetMap contributors",
link: "https://www.openstreetmap.org/copyright"
}
]);
// Add Omv data source.
mapView.addDataSource(omvDataSource);
// Position the camera over the map.
mapView.camera.position.set(0, 0, 800);
// Center the camera on Berlin.
mapView.geoCenter = new GeoCoordinates(52.518611, 13.376111, 0);
// Instantiate the default map controls.
const mapControls = new MapControls(mapView);
// Resize the mapView to fill the page (an iframe in this case).
mapView.resize(window.innerWidth, window.innerHeight);
// React to resize events.
window.addEventListener("resize", () => {
mapView.resize(window.innerWidth, window.innerHeight);
});
return { mapView, mapControls };
}
function main() {
const message = document.createElement("div");
message.innerHTML = `
Press 'R' to rotate<br>
Press 'T' to translate<br>
Press 'V' to change the scene point of view<br>`;
message.style.position = "absolute";
message.style.cssFloat = "right";
message.style.top = "10px";
message.style.right = "10px";
document.body.appendChild(message);
const canvas = document.getElementById("mapCanvas") as HTMLCanvasElement;
const geoCenter = new GeoCoordinates(52.518611, 13.376111);
// snippet:harp_gl_freecamera_app_0.ts
const app = new FreeCameraApp({
decoderUrl: "./decoder.bundle.js",
canvas,
theme: "./resources/berlin_tilezen_base.json",
geoCenter
});
app.start();
// end:harp_gl_freecamera_app_0.ts
}
* ```
*
* Here a GUI is also set up so as to fiddle with the tilt and distance from the page.
*/
export namespace CameraOrbitExample {
// snippet:harp_gl_camera_orbit_example_0.ts
const map = createBaseMap();
// end:harp_gl_camera_orbit_example_0.ts
// Be sure to see the buildings when starting the example: a zoom level does not translate into
// the same distance depending on the viewport's height.
const minDistanceForBuildings =
Math.ceil(MapViewUtils.calculateDistanceToGroundFromZoomLevel(map, 16.0)) - 500;
// snippet:harp_gl_camera_orbit_example_1.ts
const options = { tilt: 25, distance: minDistanceForBuildings, globe: true };
const dubai = new GeoCoordinates(25.19705, 55.27419);
let heading = 0;
map.addEventListener(MapViewEventNames.AfterRender, () => {
map.lookAt(dubai, options.distance, options.tilt, (heading = (heading + 0.1) % 360));
map.update();
updateHTML();
});
// end:harp_gl_camera_orbit_example_1.ts
const gui = new GUI({ width: 300 });
gui.add(options, "tilt", 0, 80, 0.1);
gui.add(options, "distance", 300, 60000, 1);
gui.add(options, "globe").onChange(() => {
map.projection = options.globe ? sphereProjection : mercatorProjection;
});
function createBaseMap(): MapView {
canvas,
theme: "resources/reducedNight.json"
});
CopyrightElementHandler.install("copyrightNotice")
.attach(sampleMapView)
.setDefaults([
{
id: "openstreetmap.org",
label: "OpenStreetMap contributors",
link: "https://www.openstreetmap.org/copyright"
}
]);
sampleMapView.camera.position.set(2000000, 3500000, 6000000); // Europe.
sampleMapView.geoCenter = new GeoCoordinates(16, -4, 0);
MapControls.create(sampleMapView);
sampleMapView.resize(window.innerWidth, window.innerHeight);
window.addEventListener("resize", () => {
sampleMapView.resize(window.innerWidth, window.innerHeight);
});
initializeMapViewDataSource(sampleMapView);
return sampleMapView;
}
// end:datasource_style1.ts
function initializeMapView(id: string): MapView {
// snippet:harp_gl_hello_world_example_0.ts
const canvas = document.getElementById(id) as HTMLCanvasElement;
// end:harp_gl_hello_world_example_0.ts
// snippet:harp_gl_hello_world_example_1.ts
// Look at New York.
const NY = new GeoCoordinates(40.707, -74.01);
const map = new MapView({
canvas,
theme: "resources/berlin_tilezen_base.json",
target: NY,
tilt: 50,
heading: -20,
zoomLevel: 16.1
});
// end:harp_gl_hello_world_example_1.ts
CopyrightElementHandler.install("copyrightNotice", map);
// snippet:harp_gl_hello_world_example_map_controls.ts
// Instantiate the default map controls, allowing the user to pan around freely.
const mapControls = new MapControls(map);
mapControls.maxTiltAngle = 50;
});
CopyrightElementHandler.install("copyrightNotice")
.attach(sampleMapView)
.setDefaults([
{
id: "openstreetmap.org",
label: "OpenStreetMap contributors",
link: "https://www.openstreetmap.org/copyright"
}
]);
// let the camera float over the map, looking straight down
sampleMapView.camera.position.set(0, 0, 800);
// center the camera somewhere around Berlin geo locations
sampleMapView.geoCenter = new GeoCoordinates(52.51622, 13.37036, 0);
// instantiate the default map controls, allowing the user to pan around freely.
const controls = new MapControls(sampleMapView);
controls.tiltEnabled = true;
// resize the mapView to maximum
sampleMapView.resize(window.innerWidth, window.innerHeight);
// react on resize events
window.addEventListener("resize", () => {
sampleMapView.resize(window.innerWidth, window.innerHeight);
});
return sampleMapView;
}
const REGION_LIST = (geojson.features as Feature[])
.filter(feature => {
return feature.properties !== undefined && feature.properties.name !== undefined;
})
.map(feature => feature.properties.name as string);
let askedName: string = "";
// This will dismiss the picking and the style changes when the correct region is clicked, so
// that the user cannot miss it in case he clicked on another one immediately after.
let discardPick: boolean = false;
// snippet:harp_gl_initmapview.ts
const mapView = new MapView({
canvas: document.getElementById("mapCanvas") as HTMLCanvasElement,
theme: "resources/berlin_tilezen_night_reduced.json",
target: new GeoCoordinates(42.2, 12.5),
zoomLevel: 5.9
});
CopyrightElementHandler.install("copyrightNotice", mapView);
mapView.resize(window.innerWidth, window.innerHeight);
window.addEventListener("resize", () => {
mapView.resize(window.innerWidth, window.innerHeight);
});
mapView.canvas.addEventListener("contextmenu", e => e.preventDefault());
const baseMap = new OmvDataSource({
baseUrl: "https://xyz.api.here.com/tiles/herebase.02",
apiFormat: APIFormat.XYZOMV,
styleSetName: "tilezen",
maxZoomLevel: 17,
authenticationCode: accessToken,
copyrightInfo
});
const latB = b.latitude;
let lonA = a.longitude;
let lonB = b.longitude;
if (Math.abs(latA) === 90) {
lonA = lonB;
}
if (Math.abs(latB) === 90) {
lonB = lonA;
}
const deltaLat = latB - latA;
const deltaLon = lonB - lonA;
const scale = (latitude - latA) / deltaLat;
return new GeoCoordinates(latitude, lonA + deltaLon * scale, 0);
}
function createBaseMap(): MapView {
document.body.innerHTML += getExampleHTML();
const canvas = document.getElementById("mapCanvas") as HTMLCanvasElement;
const mapView = new MapView({
canvas,
theme: "resources/berlin_tilezen_day_reduced.json",
tileWrappingEnabled: false
});
mapView.setCameraGeolocationAndZoom(new GeoCoordinates(10, -150), 2.6);
const controls = new MapControls(mapView);
const ui = new MapControlsUI(controls);
canvas.parentElement!.appendChild(ui.domElement);
window.addEventListener("resize", () => mapView.resize(innerWidth, innerHeight));
const hereCopyrightInfo: CopyrightInfo = {
id: "here.com",
year: new Date().getFullYear(),
label: "HERE",
link: "https://legal.here.com/terms"
};
const copyrights: CopyrightInfo[] = [hereCopyrightInfo];
const baseMap = new OmvDataSource({
function initializeMapView(id: string, theme: Theme): MapView {
const canvas = document.getElementById(id) as HTMLCanvasElement;
const map = new MapView({ canvas, theme, enableShadows: true });
map.renderLabels = false;
CopyrightElementHandler.install("copyrightNotice", map);
const mapControls = new MapControls(map);
mapControls.maxTiltAngle = 50;
const NY = new GeoCoordinates(40.707, -74.01);
map.lookAt(NY, 2000, 45, 0);
const ui = new MapControlsUI(mapControls);
canvas.parentElement!.appendChild(ui.domElement);
map.resize(window.innerWidth, window.innerHeight);
window.addEventListener("resize", () => {
map.resize(window.innerWidth, window.innerHeight);
});
addOmvDataSource(map);
map.update();
return map;
}