Is there a way to psudo-animate Leaflet DIV markers?
I have a personal project I have been working on where I have a database with a bunch of weather data - hourly observations - temperatures, wind speeds at varying levels. I have utilized Leaflet to do "DIV markers" to display the temperature, wind, etc values on a map using the geo point of the location where the data is from. I am looking for a way to use JavaScript to "animate" values of the leaflet DIV containers, but methods I have tried thus far of embedding a span under the leaflet DIV marker have failed as it causes the spans to be rendered off-map.
Here is the code sample of what I'm trying to accomplish - it doesn't work the way I have it right now...
switch($_POST['WxDataType']) {
case "AniSfcT":
$stmt_ObsLoop = $dynamicStatement;
$stmt_ObsLoop -> bindParam(':XDT1', $dsDayAgo, PDO::PARAM_STR, 19);
$stmt_ObsLoop -> bindParam(':XDT2', $dsNowDate, PDO::PARAM_STR, 19);
$stmt_ObsLoop -> bindValue(':Limit', 4, PDO::PARAM_INT);
$stmt_ObsLoop -> execute();
$LoopNo = 0;
while($row_ObsLoop = $stmt_ObsLoop -> fetch(PDO::FETCH_ASSOC)) {
if(isset($row_ObsLoop['temp_f'])) { $sfcT = $row_Obs['temp_f']; $sfcTFlag = Null; } else { $sfcT = Conv2TF($row_Obs['0T']); $sfcTFlag = "*"; }
if(isset($row_ObsLoop['dewpoint_f'])) { $sfcD = $row_Obs['dewpoint_f']; } else { $sfcD = Conv2TF($row_Obs['0D']); }
$obsPlotData = $sfcT;
$obsPlotStyle = "display: none; width: 100%; " . Color2Grad("T", "right", array("v1" => $sfcT, "v2" => $sfcD));
$obsSpan = "<span class='StationSpan' id='" . $row_ObsLoop['station_id'] . "_" . $LoopNo . "' style='" . $obsPlotStyle . "'>" . $obsPlotData . "</span>";
echo $obsSpan;
$LoopNo++;
}
break;
....
}
<?php if(isset($LoopNo)) { ?>
jQuery(function() {
var $els = $('span[id^=<?php echo $row_Obs['station_id']; ?>_]'), i = 0, len = $els.length;
$els.slice(1).hide();
setInterval(function() {
$els.eq(i).fadeOut(function() {
i = (i + 1) % len;
$els.eq(i).fadeIn();
})
}, 500)
});
<?php } ?>
var obsIcon = L.divIcon({
iconSize: new L.point(16, 16),
html: "<?php echo $obsSpan; ?>"
});
L.marker([<?php echo $coordsA[1] . "," . $coordsA[0]; ?>], {icon: obsIcon})
.addTo(map)
.bindPopup("<?php echo $Content; ?>", {maxWidth: 320, maxHeight: 280});