OpenLayers
OpenLayers
Example of using an animated GIF as an icon.
Example of using an animated GIF as an icon. Animation is achieved using the Gifler library.
import Feature from 'ol/Feature.js';
import Map from 'ol/Map.js';
import Point from 'ol/geom/Point.js';
import View from 'ol/View.js';
import {Icon, Style} from 'ol/style.js';
import {StadiaMaps, Vector as VectorSource} from 'ol/source.js';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
const iconFeature = new Feature({
geometry: new Point([0, 0]),
});
const vectorSource = new VectorSource({
features: [iconFeature],
});
const vectorLayer = new VectorLayer({
source: vectorSource,
});
const rasterLayer = new TileLayer({
source: new StadiaMaps({
layer: 'stamen_toner',
}),
});
const map = new Map({
layers: [rasterLayer, vectorLayer],
target: document.getElementById('map'),
view: new View({
center: [0, 0],
zoom: 2,
}),
});
const gifUrl = 'data/globe.gif';
const gif = gifler(gifUrl);
gif.frames(
document.createElement('canvas'),
function (ctx, frame) {
if (!iconFeature.getStyle()) {
iconFeature.setStyle(
new Style({
image: new Icon({
img: ctx.canvas,
opacity: 0.8,
}),
}),
);
}
ctx.clearRect(0, 0, frame.width, frame.height);
ctx.drawImage(frame.buffer, frame.x, frame.y);
map.render();
},
true,
);
// change mouse cursor when over icon
map.on('pointermove', function (e) {
const hit = map.hasFeatureAtPixel(e.pixel);
map.getTarget().style.cursor = hit ? 'pointer' : '';
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animated GIF</title>
<link rel="stylesheet" href="node_modules/ol/ol.css">
<style>
.map {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/gifler.min.js"></script>
<script type="module" src="main.js"></script>
</body>
</html>{
"name": "animated-gif",
"dependencies": {
"ol": "10.3.1"
},
"devDependencies": {
"vite": "^3.2.3"
},
"scripts": {
"start": "vite",
"build": "vite build"
}
}