BayernAtlas WebComponent Examples

Quick Start

1. Setup the Map

1.1 Import the WebComponent

HTML:

<script src="https://atlas.bayern.de/wc.js" type="module" crossorigin="anonymous"></script>

1.1. Add the "<bayern-atlas>" Tag

HTML:

<bayern-atlas></bayern-atlas>

1.2. Setup Map via Attributes

HTML:

<bayern-atlas l="GEORESOURCE_AERIAL" z="10" c="11,48"></bayern-atlas>

2. Setup Map programmatically

HTML:

<bayern-atlas l=""></bayern-atlas>

JavaScript:

// register a load-event listener on the map
document.querySelector('bayern-atlas').addEventListener('baLoad', (event) => {  
	// save to call the bayern-atlas map now
	const baMap = event.target;
	const { GEORESOURCE_AERIAL } = ba;
	//add a layer to the map referencing the the GeoResource with the ID = GEORESOURCE_AERIAL
	baMap.addLayer(GEORESOURCE_AERIAL);
	// position the map
	baMap.modifyView({ zoom: 10, center: [11, 48] });
});

More Examples

Change Map Size

Note:

The WebComponent matches the size of its parent container. You should not resize the WebComponent directly.

HTML:

<div class="size-example-wrapper"><bayern-atlas l="GEORESOURCE_WEB" r=".5"></bayern-atlas></div>

CSS:

.size-example-wrapper {
  height: 400px;
  width: 400px;
}

Listen to Map Events

Drag, zoom and rotate the map...

HTML:

<bayern-atlas l="GEORESOURCE_WEB" r=".5"></bayern-atlas>

JavaScript:

document.querySelector('bayern-atlas').addEventListener('baLoad', (event) => {
	const baMap = event.target;

	baMap.addEventListener("baChange",(event) => {
		console.log(event.detail);
	});
});

Change the Base Layer

Aerial Map

HTML:

<bayern-atlas l="GEORESOURCE_WEB,803da236-15f1-4c97-91e0-73248154d381"></bayern-atlas>

<select class="layer-select">
  <option selected value="GEORESOURCE_AERIAL">Aerial</option>
  <option value="GEORESOURCE_WEB" selected>Map</option>
</select>

JavaScript:

document.querySelector('#fgs52ym bayern-atlas').addEventListener('baLoad', (event) => {
	const baMap = event.target;

	document.querySelector('.layer-select').addEventListener('change', (event) => {
		// remove the layer on index=0
		baMap.removeLayer(baMap.layers[0]);
		// add a new layer on index=0
		baMap.addLayer(event.target.value, { zIndex: 0 });
	});
});

Change Layer Opacity

HTML:

<input type="range" class="opacity-input" min="0" max="100" value="50" />
<bayern-atlas l="GEORESOURCE_WEB,GEORESOURCE_HISTORIC" z="8"></bayern-atlas>

Javascript

ba.addEventListener('baLoad', (event) => {
	const ba = event.target;
	const opacitySlider = document.querySelector('.opacity-input');
	const historicLayer = ba.layers[1];

	ba.modifyLayer(historicLayer, {
		opacity: parseFloat(opacitySlider.value) * 0.01
	});

	opacitySlider.addEventListener('input', (event) => {
		ba.modifyLayer(historicLayer, {
			opacity: parseFloat(opacitySlider.value) * 0.01
		});
	});
});

Change Layer Visibility

HTML:

<ul class="layer-list"></ul>
<bayern-atlas l="GEORESOURCE_AERIAL,GEORESOURCE_WEB,GEORESOURCE_HISTORIC"></bayern-atlas>

Javascript

document.querySelector("bayern-atlas").addEventListener('baLoad', (event) => {
	const ba = event.target;
	const updateDOM = (event) => {
		const layerListElement = document.querySelector('.layer-list');
		layerListElement.innerHTML = '';

		for (let i = ba.layers.length - 1; i >= 0; i--) {
			const muteButton = document.createElement('button');
			const listItem = document.createElement('li');
			const isVisible = ba.layersVisibility[i];

			listItem.append(`Layer ${i}: ${ba.layers[i]} `);
			muteButton.innerText = isVisible ? 'Hide' : 'Show';
			muteButton.addEventListener('click', () => {
				ba.modifyLayer(ba.layers[i], { visible: !isVisible });
			});
			listItem.append(muteButton);
			layerListElement.append(listItem);
		}
	};

	updateDOM();
	ba.addEventListener('baChange', (event) => {
		updateDOM(event);
	});
});

Change Order of Layers

HTML

<ul class="layer-list"></ul>
<bayern-atlas l="GEORESOURCE_AERIAL,GEORESOURCE_WEB,GEORESOURCE_HISTORIC" z="6"></bayern-atlas>

Javascript

document.querySelector("bayern-atlas").addEventListener('baLoad', (event) => {
	const ba = event.target;
	const updateDOM = () => {
		const layerListElement = document.querySelector('.layer-list');
		layerListElement.innerHTML = '';

		for (let i = ba.layers.length - 1; i >= 0; i--) {
			const listItem = document.createElement('li');
			listItem.append(`Layer ${i}: ${ba.layers[i]}`);

			if (i < ba.layers.length - 1) {
				const downButton = document.createElement('button');
				downButton.innerText = 'UP';
				downButton.addEventListener('click', () => {
					ba.modifyLayer(ba.layers[i], { zIndex: i + 1 });
				});
				listItem.append(downButton);
			}
			if (i > 0) {
				const upButton = document.createElement('button');
				upButton.innerText = 'DOWN';
				upButton.addEventListener('click', () => {
					ba.modifyLayer(ba.layers[i], { zIndex: i - 1 });
				});
				listItem.append(upButton);
			}

			layerListElement.append(listItem);
		}
	};

	updateDOM();
	ba.addEventListener('baChange', updateDOM);

});

Add Data to the Map

Note:

This example shows how to add data in ewkt format to the map. The setup for the other supported data types (GeoJSON, KML, GPX) is similar.

HTML:

<bayern-atlas l=""></bayern-atlas>

JavaScript:

document.querySelector('bayern-atlas').addEventListener('baLoad', (event) => {
	const baMap = event.target;
	const dataAsEwkt = "SRID=4326;POLYGON Z((11.60243572 47.98438157 0,11.60861553 47.9832613 0,11.60664142 47.97932578 0,11.60089077 47.98044614 0,11.60243572 47.98438157 0))";
	// a new layer containing the data and zoom to its extent
	baMap.addLayer(dataAsEwkt, { zoomToExtent: true, style: { baseColor:"#8f37db" } });
});

Add a Marker and Register a FeatureSelect Listener

Click on the marker...

HTML:

<bayern-atlas l=""></bayern-atlas>

JavaScript:

document.querySelector('bayern-atlas').addEventListener('baLoad', (event) => {
	const baMap = event.target;
	// we add a marker. To be selectable the marker must have a label
	const markerId = baMap.addMarker([11.60861553, 47.9832613], { label: "MyMarker" });
	baMap.addEventListener("baFeatureSelect", (event) => {
		// when our marker is selected by the user we want to remove it after a delay of 1s
		if(event.detail.features.map(f => f.properties.id).includes(markerId)) {
			setTimeout(() => {
				baMap.removeMarker(markerId);
				baMap.clearHighlights(); 
			}, 1000);
		}
	});
});

Handle coordinates in EPSG:25832

Note: “ec_srid” defines the SRID of the exported coordinates; input coordinates, such as the center point, can differ, but must be a supported SRID.

Click in the map or on the marker...

HTML:

<bayern-atlas l="GEORESOURCE_TOPOGRAPHIC" ec_srid="25832"></bayern-atlas>

JavaScript:

document.querySelector('bayern-atlas').addEventListener('baLoad', (event) => {
	const baMap = event.target;
	const coordinate25832 = [703437, 5425425]; // coordinate in EPSG:25832
	baMap.modifyView({ center: coordinate25832, zoom: 12 });
	baMap.addMarker(coordinate25832, { label: "MyMarker" });
	baMap.addEventListener("baFeatureSelect",(event) => {
		console.log(JSON.stringify(event.detail, null, 1);
	});

});

Create Geometries

Create a geometry after enabling the drawing tool...

HTML:

<bayern-atlas ec_srid="4326" ec_draw_tool="point,line,polygon" ec_geometry_format="kml">

JavaScript:

document.querySelector('bayern-atlas').addEventListener('baLoad', (event) => {
	const baMap = event.target;
	const coordinate25832 = [703437, 5425425]; // coordinate in EPSG:25832
	baMap.modifyView({ center: coordinate25832, zoom: 12 });
	baMap.addMarker(coordinate25832, { label: "MyMarker" });
	// register a baGeometryChange -listener
	baMap.addEventListener("baGeometryChange",(event) => {
		console.log(JSON.stringify(event.detail, null, 1);
	});

});

Load Geometries from a Storage

Note: The data must be in KML format and may only be created and modified by the BayernAtlas

Create a geometry after enabling the drawing tool and reload the page...

HTML:

<bayern-atlas ec_srid="4326" ec_draw_tool="point,line,polygon" ec_geometry_format="kml">

JavaScript:

document.querySelector('bayern-atlas').addEventListener('baLoad', (event) => {
	const baMap = event.target;
	const dataAsKml = localStorage.getItem("mySavedDataAsKML") ?? ""; // Load data from the local storage
	baMap.addLayer(dataAsKml, { zoomToExtent: true, modifiable: true });  // make the layer modifiable: Note: A modifiable layer must meet the following expectations: Its data must have the format `KML` and must previously be created by the BayernAtlas
	
	baMap.addEventListener("baGeometryChange",(event) => {
		localStorage.setItem("mySavedDataAsKML", event.detail.data); // Save data to the local storage
	})
});

Calculate distance with Haversine Approximation

Note: Lengths are calculated by assuming great circle segments between geometry coordinates.

Distance: 0 km

HTML:

<p>Distance: <b><span class="distance-span">0</span></b> km</p>
<button class="clear-button">Clear waypoints</button>
<div style="width: 400px; height: 400px;"><bayern-atlas ec_srid="4326"></div>

JavaScript:

document.querySelector('#exa-distance-haversine bayern-atlas').addEventListener('baLoad', (event) => {
	const baMap = event.target;
	let startCoordinate = null;
	let endCoordinate = null;

	// https://en.wikipedia.org/wiki/Haversine_formula
	const getDistanceInKM = (coordinate1, coordinate2) => {
		const deg2rad = (deg) => { return deg _ (Math.PI / 180) }
		var R = 6371; // approximation - earth radius
		var dLat = deg2rad(coordinate2[0] - coordinate1[0]);
		var dLon = deg2rad(coordinate2[1] - coordinate1[1]);
		var a =
		Math.sin(dLat / 2) _ Math.sin(dLat / 2) +
		Math.cos(deg2rad(coordinate1[0])) _ Math.cos(deg2rad(coordinate2[0])) _
		Math.sin(dLon / 2) _ Math.sin(dLon / 2);
		var c = 2 _ Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
		var d = R \* c;
		return d.toFixed(3);
	}

	document.querySelector(".clear-button").addEventListener('click', () => {
		baMap.clearMarkers();
		startCoordinate = endCoordinate = null;
		document.querySelector(".distance-span").innerText = '0';
	});

	baMap.addEventListener('baFeatureSelect', (event) => {
		const info = event.detail;
		const coordinate = info.coordinate;
		if (info.features.length > 0)
			return;
		if (startCoordinate == null) {
			startCoordinate = coordinate;
			baMap.addMarker(coordinate);
			return;
		}

		endCoordinate = coordinate;
		baMap.clearMarkers();
		baMap.addMarker(startCoordinate);
		baMap.addMarker(endCoordinate);
		document.querySelector(".distance-span").innerText
			= getDistanceInKM(startCoordinate, endCoordinate);
	});
});