Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
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,
// 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)
<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"
});
}
]);
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;
}
#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
// 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
}
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);
/**
* 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"
});
"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();
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();
}
}
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