D3 Examples - Moving SVG

xxxxxxxxxx
 
<!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>
    