@mattilsynet/designsystem-svelte
Version:
Design system for Mattilsynet
37 lines (36 loc) • 1.27 kB
JavaScript
import Feature from 'ol/Feature';
import { Point } from 'ol/geom';
import { fromLonLat } from 'ol/proj';
import { Icon, Style } from 'ol/style';
import { DEFAULT_MARKER_OPACITY, DEFAULT_MARKER_SCALE, markers as svg } from '../../../ts';
import { toOLCoordinates } from './utils';
export const MARKER = 'marker';
export function addMarkersToSource(source, markers, markerOptions) {
markers.forEach(marker => {
const feature = new Feature({
geometry: new Point(fromLonLat(toOLCoordinates(marker))),
[MARKER]: marker
});
if (marker.src) {
feature.setStyle(createMarkerStyle({ ...marker, ...markerOptions }));
}
else {
feature.setStyle(createMarkerStyle({
src: `data:image/svg+xml;utf8,${encodeURIComponent(svg.default)}`,
opacity: DEFAULT_MARKER_OPACITY,
scale: DEFAULT_MARKER_SCALE
}));
}
source.addFeature(feature);
});
return source;
}
export function createMarkerStyle(options) {
return new Style({
image: new Icon({
...options,
scale: options.scale ?? DEFAULT_MARKER_SCALE,
opacity: options.opacity ?? DEFAULT_MARKER_OPACITY
})
});
}