Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Helper functions for working with Features/Markers in OpenLayers
import { click } from 'ol/events/condition';
import Feature from 'ol/Feature';
import Select, { SelectEvent } from 'ol/interaction/Select';
import VectorLayer from 'ol/layer/Vector';
import Map from 'ol/Map';
import { Fill, Icon, Style, Text } from 'ol/style';
export function styleMarkersAsDeselected(features: Feature[]) {
if (!features) return;
features.forEach((f) => {
styleMarker(f, false);
});
}
export function styleMarker(feature: Feature, asSelected: boolean) {
if (!feature) return;
var props = feature.getProperties();
const label = props['info'] && asSelected ? props['info'] : '';
const image = asSelected ? 'assets/marker_blue.png' : 'assets/marker.png';
feature.setStyle(
new Style({
text: new Text({
text: label,
font: 'bold 13px sans-serif',
backgroundFill: new Fill({ color: '#ffffff' }),
offsetY: -50,
fill: new Fill({ color: '#555588' })
}),
image: new Icon({
src: image,
imgSize: [60, 60],
anchor: [0.5, 1],
opacity: 0.7,
scale: 0.7
})
})
);
}
export function styleUser(feature: Feature) {
if (!feature) return;
feature.setStyle(
new Style({
image: new Icon({
src: 'assets/user.png',
imgSize: [60, 60],
anchor: [0.5, 1],
opacity: 0.7,
scale: 0.5
})
})
);
}
export interface CallBackOnClickFunction {
(num: number): void;
}
export function setupMarkerClickHandler(
map: Map,
markersLayer: VectorLayer,
allMarkers: Feature[],
callbackOnClick: CallBackOnClickFunction
) {
//
// Setup handler for clicks on markers
// Use SelectEvent with toggle mode to act on each
// click on a marker
//
let selectSingleClick: any = new Select({
style: null,
condition: click,
toggleCondition: () => true,
layers: [markersLayer]
});
map.addInteraction(selectSingleClick);
selectSingleClick.on('select', (e: SelectEvent) => {
styleMarkersAsDeselected(allMarkers);
let markers = null;
if (e.selected && e.selected.length > 0) {
markers = e.selected;
} else if (e.deselected && e.deselected.length > 0) {
markers = e.deselected;
}
if (markers) {
const marker = markers[0];
styleMarker(marker, true);
callbackOnClick(marker.getId());
}
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment