@mattilsynet/designsystem-svelte
Version:
Design system for Mattilsynet
52 lines (51 loc) • 1.91 kB
JavaScript
import { Control } from 'ol/control';
import {} from 'ol';
import { markers } from '../../../ts';
import { GEOLOCATION_LAYER_ID, setUpGeolocation } from './geolocation';
import { LAYER_ID } from './layer-utils';
export function createGeolocationControl(map, geolocationOptions) {
const { layer, geolocation } = setUpGeolocation(map);
map.addLayer(layer);
const { input, label } = createTrackerToggle(map, geolocation, geolocationOptions);
const element = createTrackerToggleWrapper();
element.appendChild(input);
element.appendChild(label);
const control = new Control({ element });
control.setMap(map);
return control;
}
function handleTracking(map, geolocation) {
return (event) => {
const layer = map
.getLayers()
.getArray()
.find(layer => layer.get(LAYER_ID) === GEOLOCATION_LAYER_ID);
if (event.target && layer) {
geolocation.setTracking(event.target.checked);
layer.setVisible(event.target.checked);
}
};
}
function createTrackerToggle(map, geolocation, geolocationOptions) {
const locationTrackerId = 'locationTracker';
const label = document.createElement('label');
label.innerHTML = markers.icon.geolocation;
label.htmlFor = locationTrackerId;
label.className = 'mt-label map-toggle-label';
label.title = geolocationOptions.label;
const input = document.createElement('input');
input.id = locationTrackerId;
input.type = 'checkbox';
input.className = 'mt-input map-toggle-input';
input.addEventListener('change', handleTracking(map, geolocation));
return {
input,
label
};
}
function createTrackerToggleWrapper() {
const element = document.createElement('div');
element.id = 'geolocationTracker';
element.className = 'geolocation-button ol-unselectable ol-control';
return element;
}