cern-map-overlay
Version:
A web component for CERN map overlay built with Vite
117 lines (103 loc) • 3.84 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CERN Map Overlay Demo</title>
<style>
cern-map-overlay {
--cern-map-height: 90vh;
}
.accelerator-controls {
display: flex;
gap: 15px;
margin: 10px 0;
padding: 10px;
background-color: #f5f5f5;
border-radius: 5px;
flex-wrap: wrap;
}
.accelerator-controls label {
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
padding: 5px 10px;
background-color: white;
border-radius: 3px;
border: 1px solid #ddd;
transition: background-color 0.2s;
}
.accelerator-controls label:hover {
background-color: #e9e9e9;
}
.accelerator-controls input[type='checkbox'] {
margin: 0;
}
label:has(#follow-location-checkbox) {
margin-left: auto;
}
</style>
</head>
<body>
<div class="accelerator-controls">
<button id="geolocate-button">📍 Locate Me</button>
<label><input type="checkbox" data-accelerator="LINAC3" /> LINAC3</label>
<label><input type="checkbox" data-accelerator="LINAC4" /> LINAC4</label>
<label><input type="checkbox" data-accelerator="LEIR" /> LEIR</label>
<label><input type="checkbox" data-accelerator="PSB" /> PSB</label>
<label><input type="checkbox" data-accelerator="PS" /> PS</label>
<label><input type="checkbox" data-accelerator="SPS" /> SPS</label>
<label><input type="checkbox" data-accelerator="LHC" checked /> LHC</label>
<label><input type="checkbox" data-accelerator="FCC" /> FCC</label>
<label><input type="checkbox" id="follow-location-checkbox" /> Follow Location</label>
</div>
<cern-map-overlay geocoder-enabled="true"></cern-map-overlay>
<script type="module" src="cern-map-overlay.iife.js"></script>
<script type="module">
import { cernMap } from './src/index.ts';
const map = document.querySelector('cern-map-overlay');
const acceleratorCheckboxes = document.querySelectorAll('input[data-accelerator]');
acceleratorCheckboxes.forEach((checkbox) => {
const acceleratorName = checkbox.dataset.accelerator;
const acceleratorObject = cernMap[acceleratorName];
checkbox.addEventListener('change', (e) => {
if (e.target.checked) {
map.addAccelerator(acceleratorName, acceleratorObject);
} else {
map.removeAccelerator(acceleratorName);
}
map.fitBounds();
});
if (checkbox.checked) {
map.addAccelerator(acceleratorName, acceleratorObject);
}
map.fitBounds();
});
const geolocateButton = document.querySelector('#geolocate-button');
geolocateButton.addEventListener('click', (e) => {
navigator.geolocation.getCurrentPosition(
(position) => {
const { latitude, longitude } = position.coords;
map.lat = latitude;
map.lng = longitude;
map.followLocation = true;
followLocationCheckbox.checked = true;
},
(error) => {
console.error('Geolocation error:', error);
},
);
});
const followLocationCheckbox = document.querySelector('#follow-location-checkbox');
followLocationCheckbox.addEventListener('change', (e) => {
map.followLocation = e.target.checked;
});
map.followLocation = followLocationCheckbox.checked;
map.addEventListener('markgeocode', (e) => {
map.followLocation = true;
followLocationCheckbox.checked = true;
});
</script>
</body>
</html>