Can you animate circles on mapbox, and also, just have hollow circles - google-maps

Question

I know you can animate circles on google maps , see example
http://jsbin.com/nuwem/1/edit?html,output
.....But can you do the same thing on Mapbox
I am creating a live earthquake map www.livehazards.com. Each earthquake mag is respresent by a circle
I would just like the outline of the circle and to be able to animate it.
I have tried using circle-stroke for just the outline but it did not work
Thanks

Answer 1

To animate your circle you can simply change its paint property several times: map.setPaintProperty('yourmarker', 'circle-radius', 20)
If you only want the circle outline, set "circle-opacity":0 and "circle-stroke-width": 1.
Codepen
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
center: [ 2.35, 48.85 ],
zoom: 3
});
map.on('load', () => {
let radius = 1;
map.addLayer({
"id": "points",
"type": "circle",
// Create the marker
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [ 2.35, 48.85 ]
}
}]
}
},
// Draw the circle
"paint": {
"circle-opacity": 0,
"circle-stroke-width": 1,
"circle-stroke-color": "#000",
"circle-radius": radius,
"circle-radius-transition": {
"duration": 0
}
}
});
// Animate the circle
setInterval(() => {
map.setPaintProperty('points', 'circle-radius', radius);
radius = ++radius % 30;
}, 50);
});

Answer 2

var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
center: [ 2.35, 48.85 ],
zoom: 3
});
map.on('load', function() {
let radius = 1;
map.addSource("earthquakes", {
type: "geojson",
data: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_day.geojson",
});
map.addLayer({
"id": "earthquake-layer",
"type": "circle",
"source": "earthquakes",
"paint": {
"circle-opacity": 0.4,
"circle-color": "#830300",
"circle-stroke-width": 2,
"circle-stroke-color": "#fff",
"circle-radius": {
"property": "mag",
"base": 2.5,
"stops": [
[{zoom: 0, value: 2}, 1],
[{zoom: 0, value: 8}, 40],
[{zoom: 11, value: 2}, 10],
[{zoom: 11, value: 8}, 2400],
[{zoom: 20, value: 2}, 20],
[{zoom: 20, value: 8}, 6000]
"circle-radius-transition": {
"duration": 0
}
]
}
}
});
setInterval(() => {
map.setPaintProperty('eaarthquake-layer', 'circle-radius', radius);
radius = ++radius % 30
}, 50);
});