hmpps-open-layers-map
Version:
A native Web Component for displaying maps using OpenLayers.
49 lines (48 loc) • 1.6 kB
JavaScript
import TileLayer from 'ol/layer/Tile';
import { XYZ } from 'ol/source';
import TileState from 'ol/TileState';
import axios from 'axios';
import config from '../config';
export const ordnanceSurveyImageTileLoader = (token) => {
return (tile, src) => {
const imageTile = tile;
return axios
.get(src, { headers: { Authorization: `Bearer ${token}` }, responseType: 'blob' })
.then(response => {
const image = imageTile.getImage();
if (image instanceof HTMLImageElement) {
const url = URL.createObjectURL(response.data);
image.src = url;
image.onload = () => URL.revokeObjectURL(url);
}
else {
imageTile.setState(TileState.ERROR);
}
})
.catch(() => {
imageTile.setState(TileState.ERROR);
});
};
};
export class OrdnanceSurveyImageTileLayer extends TileLayer {
constructor(tileUrl, token) {
super({
source: new XYZ({
minZoom: config.tiles.zoom.min,
maxZoom: config.tiles.zoom.max,
url: tileUrl,
tileLoadFunction: ordnanceSurveyImageTileLoader(token),
}),
});
}
updateToken(newToken) {
const source = this.getSource();
if (source) {
source.setTileLoadFunction(ordnanceSurveyImageTileLoader(newToken));
source.refresh();
}
}
}
export function isImageTileLayer(layer) {
return layer instanceof OrdnanceSurveyImageTileLayer;
}