Add an animated icon to the map
Add an animated icon to the map that was generated at runtime with the Canvas API.
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Add an animated icon to the map</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /><script src="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.js"></script><link href="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.css" rel="stylesheet" /><style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; }</style></head><body><div id="map"></div> <script>goongjs.accessToken = '8qzxZAuxcsctSlmOszInchP1A5GrmRBHJwCBCjO6';var map = new goongjs.Map({container: 'map',style: 'https://tiles.goong.io/assets/goong_map_web.json'}); var size = 200; // implementation of CustomLayerInterface to draw a pulsing dot icon on the map// see https://docs.goong.io/javascript/properties/#customlayerinterface for more infovar pulsingDot = {width: size,height: size,data: new Uint8Array(size * size * 4), // get rendering context for the map canvas when layer is added to the maponAdd: function () {var canvas = document.createElement('canvas');canvas.width = this.width;canvas.height = this.height;this.context = canvas.getContext('2d');}, // called once before every frame where the icon will be usedrender: function () {var duration = 1000;var t = (performance.now() % duration) / duration; var radius = (size / 2) * 0.3;var outerRadius = (size / 2) * 0.7 * t + radius;var context = this.context; // draw outer circlecontext.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(); // draw inner circlecontext.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(); // update this image's data with data from the canvasthis.data = context.getImageData(0,0,this.width,this.height).data; // continuously repaint the map, resulting in the smooth animation of the dotmap.triggerRepaint(); // return `true` to let the map know that the image was updatedreturn true;}}; map.on('load', function () {map.addImage('pulsing-dot', pulsingDot, { pixelRatio: 2 }); map.addSource('points', {'type': 'geojson','data': {'type': 'FeatureCollection','features': [{'type': 'Feature','geometry': {'type': 'Point','coordinates': [0, 0]}}]}});map.addLayer({'id': 'points','type': 'symbol','source': 'points','layout': {'icon-image': 'pulsing-dot'}});});</script> </body></html>