> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/ja/llms.txt)
# Add an animated icon to the map
This example creates an animated pulsing dot icon and adds it to the map.
It generates the 'pulsingDot' image at runtime with the [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) and uses the [`StyleImageInterface`](https://docs.mapbox.com/mapbox-gl-js/ja/api/properties/#styleimageinterface) specification to help render the animation on every frame.
When the map loads, it uses [`addImage`](https://docs.mapbox.com/mapbox-gl-js/ja/api/map/#map#addimage) to add 'pulsingDot' to the style as an `icon-image` called 'pulsing-dot', then it uses [`addSource`](https://docs.mapbox.com/mapbox-gl-js/ja/api/map/#map#addsource) to add a source called 'dot-point' with a single point feature at the coordinate location `[0, 0]`. Lastly, it uses [`addLayer`](https://docs.mapbox.com/mapbox-gl-js/ja/api/map/#map#addlayer) to create a symbol layer called 'layer-with-pulsing-dot' that uses the 'pulsing-dot' icon to represent the 'dot-point' feature on the map.
> Example code:
**JavaScript**
```html
Add an animated icon to the map
```
**React**
```jsx
/* eslint react/no-this-in-sfc: 0 */
import React, { useEffect, useRef } from 'react';
import * as mapboxgl from 'mapbox-gl/esm';
import 'mapbox-gl/dist/mapbox-gl.css';
const MapboxExample = () => {
const mapContainerRef = useRef();
const mapRef = useRef();
useEffect(() => {
if (mapRef.current) return;
mapRef.current = new mapboxgl.Map({
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
container: 'map',
center: [0, 0],
zoom: 2,
style: 'mapbox://styles/mapbox/standard'
});
const size = 200;
const pulsingDot = {
width: size,
height: size,
data: new Uint8Array(size * size * 4),
onAdd: function () {
const canvas = document.createElement('canvas');
canvas.width = this.width;
canvas.height = this.height;
this.context = canvas.getContext('2d');
},
render: function () {
const duration = 1000;
const t = (performance.now() % duration) / duration;
const radius = (size / 2) * 0.3;
const outerRadius = (size / 2) * 0.7 * t + radius;
const context = this.context;
context.clearRect(0, 0, this.width, this.height);
context.beginPath();
context.arc(
this.width / 2,
this.height / 2,
outerRadius,
0,
Math.PI * 2
);
context.fillStyle = `rgba(255, 200, 200, ${1 - t})`;
context.fill();
context.beginPath();
context.arc(this.width / 2, this.height / 2, radius, 0, Math.PI * 2);
context.fillStyle = 'rgba(255, 100, 100, 1)';
context.strokeStyle = 'white';
context.lineWidth = 2 + 4 * (1 - t);
context.fill();
context.stroke();
this.data = context.getImageData(0, 0, this.width, this.height).data;
mapRef.current.triggerRepaint();
return true;
}
};
mapRef.current.on('load', () => {
mapRef.current.addImage('pulsing-dot', pulsingDot, { pixelRatio: 2 });
mapRef.current.addSource('dot-point', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [0, 0]
}
}
]
}
});
mapRef.current.addLayer({
id: 'layer-with-pulsing-dot',
type: 'symbol',
source: 'dot-point',
layout: {
'icon-image': 'pulsing-dot'
}
});
});
}, []);
return ;
};
export default MapboxExample;
```