jsanch/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Single layer | CARTO</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <!-- Include Leaflet -->
    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
    <link href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" rel="stylesheet">
    <link href="https://carto.com/developers/carto-js/examples/maps/public/style.css" rel="stylesheet">
    <style>
      .leaflet-marker-icon {
        transition: all 0.5s linear;
      }
    </style>
  </head>
  <body>
    <div id="map">
    </div>
    <script>
      const map = L.map('map').setView([37.34398468, -5.97599387], 16);

      L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
        maxZoom: 18
      }).addTo(map);

      const myIcon = L.icon({
          iconUrl: 'https://image.flaticon.com/icons/png/512/460/460419.png',
          iconSize: [24, 24]
      });

      let index = 0

      const sql = 'SELECT cartodb_id, ST_X(the_geom) as x, ST_Y(the_geom) as y, the_geom_webmercator FROM mapfre_cartojs'
      const sqlApi = `https://aarana.carto.com/api/v2/sql?q=${sql}&api_key=default_public`

      fetch(sqlApi)
      .then(res => res.json())
      .then(response => {
        const rows = response.rows;
        const marker = L.marker([rows[index].y, rows[index].x], {icon: myIcon}).addTo(map);

        const interval = setInterval(() => {
          index++;
          marker.setLatLng([rows[index].y, rows[index].x])

          if (index === rows.length - 1) {
            index = -1
          }
        }, 500);
      });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Single layer \| CARTO</title>
	<meta name="viewport" content="initial-scale=1.0">
	<meta charset="utf-8">
	<!-- Include Leaflet -->
	<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
	<link href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" rel="stylesheet">
	<link href="https://carto.com/developers/carto-js/examples/maps/public/style.css" rel="stylesheet">
	<style>
	.leaflet-marker-icon {
	transition: all 0.5s linear;
	}
	</style>
	</head>
	<body>
	<div id="map">
	</div>
	<script>
	const map = L.map('map').setView([37.34398468, -5.97599387], 16);

	L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
	maxZoom: 18
	}).addTo(map);

	const myIcon = L.icon({
	iconUrl: 'https://image.flaticon.com/icons/png/512/460/460419.png',
	iconSize: [24, 24]
	});

	let index = 0

	const sql = 'SELECT cartodb_id, ST_X(the_geom) as x, ST_Y(the_geom) as y, the_geom_webmercator FROM mapfre_cartojs'
	const sqlApi = `https://aarana.carto.com/api/v2/sql?q=${sql}&api_key=default_public`

	fetch(sqlApi)
	.then(res => res.json())
	.then(response => {
	const rows = response.rows;
	const marker = L.marker([rows[index].y, rows[index].x], {icon: myIcon}).addTo(map);

	const interval = setInterval(() => {
	index++;
	marker.setLatLng([rows[index].y, rows[index].x])

	if (index === rows.length - 1) {
	index = -1
	}
	}, 500);
	});
	</script>
	</body>
	</html>