psudo-animating leaflet DIV markers

23 views
Skip to first unread message

Anthony Stump

unread,
Oct 16, 2016, 9:31:31 PM10/16/16
to Leaflet
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});


Reply all
Reply to author
Forward
0 new messages