afomi/leaflet.html

## leaflet.html
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
     crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
     crossorigin=""></script>
    <style>
      #map { height: 500px; }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map = L.map('map').setView([38.35535014849983, -121.98979496955873], 11);
      L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
          maxZoom: 19,
          attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
      }).addTo(map);

      var marker = L.marker([38.05535014849983, -121.98979496955873]).addTo(map);

      for (let i = 0; i < 20; i++) {
        var circle = L.circle([39.2392, -105 + i / 10], {
          color: 'black',
          fillColor: '#FF0',
          fillOpacity: 0.5,
          radius: 3000
        }).addTo(map);
      };


      //// LAYERING
      var featureGroup = L.featureGroup().addTo(map);


      ///// Create a list of events to animate
      let events = [
        drawAttalus,
        drawJourney,
        drawLine
      ]

      // Define each event
      function drawAttalus() {
        return L.circle([38.35535014849983, -121.98979496955873], {
          color: 'black',
          fillColor: '#0FF',
          fillOpacity: 0.5,
          radius: 10
        })
      }

      function drawJourney() {
        return L.circle([38.35638708145682, -121.9897171854973], {
          color: 'black',
          fillColor: '#FF0',
          fillOpacity: 0.5,
          radius: 10
        })
      }

      function drawJourney2() {
        return L.circle([38.35648708145682, -121.9897171854973], {
          color: 'black',
          fillColor: '#FF0',
          fillOpacity: 0.5,
          radius: 10
        })
      }

      function drawLine() {
        debugger
        var latlngs = [
          drawAttalus().getLatLng(),
          drawJourney().getLatLng(),
        ];

        var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);
      }


      // Draw an event every second
      var z = 0;
      var timer = setInterval(drawEvent, 1000);

      function drawEvent() {
        // stop the `setInterval` loop
        if(z >= events.length - 1) {
          console.log("clearInterval", z)
          clearInterval(timer)
        }
        let circle = events[z]()

        // circle.addTo(map)
        circle.addTo(featureGroup);
        map.fitBounds(featureGroup.getBounds());
        z++
      }


      // Show latlng when the map is clicked
      function onMapClick(e) {
        alert("You clicked the map at latitude " + e.latlng.lat + " and longitude " + e.latlng.lng);
      }
      // Attach the click event listener to the map
      map.on('click', onMapClick);
      ///////////////////////////////////////////////////////////////////////////////


    </script>
  </body>
</html>
	<html>
	<head>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
	integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
	crossorigin=""/>
	<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
	integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
	crossorigin=""></script>
	<style>
	#map { height: 500px; }
	</style>
	</head>
	<body>
	<div id="map"></div>
	<script>
	var map = L.map('map').setView([38.35535014849983, -121.98979496955873], 11);
	L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
	maxZoom: 19,
	attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
	}).addTo(map);

	var marker = L.marker([38.05535014849983, -121.98979496955873]).addTo(map);

	for (let i = 0; i < 20; i++) {
	var circle = L.circle([39.2392, -105 + i / 10], {
	color: 'black',
	fillColor: '#FF0',
	fillOpacity: 0.5,
	radius: 3000
	}).addTo(map);
	};


	//// LAYERING
	var featureGroup = L.featureGroup().addTo(map);



	///// Create a list of events to animate
	let events = [
	drawAttalus,
	drawJourney,
	drawLine
	]

	// Define each event
	function drawAttalus() {
	return L.circle([38.35535014849983, -121.98979496955873], {
	color: 'black',
	fillColor: '#0FF',
	fillOpacity: 0.5,
	radius: 10
	})
	}

	function drawJourney() {
	return L.circle([38.35638708145682, -121.9897171854973], {
	color: 'black',
	fillColor: '#FF0',
	fillOpacity: 0.5,
	radius: 10
	})
	}

	function drawJourney2() {
	return L.circle([38.35648708145682, -121.9897171854973], {
	color: 'black',
	fillColor: '#FF0',
	fillOpacity: 0.5,
	radius: 10
	})
	}

	function drawLine() {
	debugger
	var latlngs = [
	drawAttalus().getLatLng(),
	drawJourney().getLatLng(),
	];

	var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);
	}





	// Draw an event every second
	var z = 0;
	var timer = setInterval(drawEvent, 1000);

	function drawEvent() {
	// stop the `setInterval` loop
	if(z >= events.length - 1) {
	console.log("clearInterval", z)
	clearInterval(timer)
	}
	let circle = events[z]()

	// circle.addTo(map)
	circle.addTo(featureGroup);
	map.fitBounds(featureGroup.getBounds());
	z++
	}


	// Show latlng when the map is clicked
	function onMapClick(e) {
	alert("You clicked the map at latitude " + e.latlng.lat + " and longitude " + e.latlng.lng);
	}
	// Attach the click event listener to the map
	map.on('click', onMapClick);
	///////////////////////////////////////////////////////////////////////////////






	</script>
	</body>
	</html>