Meteo-Concept / leaflet-inflatable-markers-group

Declutter your Leaflet maps by deflating collisioning markers
MIT License
7 stars 0 forks source link

Integration with Leaflet-Realtime plugin? #1

Open nolatron opened 1 month ago

nolatron commented 1 month ago

Is it possible to integrate this plugin with the Leaflet-Realtime plugin?

https://github.com/perliedman/leaflet-realtime

I've been trying to add markers to this layer but so far not having any luck figuring this out. No markers are showing up on the map.

I changed "var Train = L.layerGroup(); " to the below.

const Train = L.inflatableMarkersGroup({
        iconCreateFunction: function (icon) {
            const chosen = icon.baseMarker;
            return L.divIcon(
                {
                    html: '<div style="background-color:#649E56;"></div>',
                    iconSize: [
                          12,
                          12
                        ],
                    className: "myIcon deflated"
                }
              );
            }
        });

And these are the RealTime functions.

realtimeTrain = createRealtimeLayer('/data.php?f=Train');

function createRealtimeLayer(url, container) {
    return L.realtime(url, {
        interval: 30 * 1000,
        getFeatureId: function(f) {
            return f.properties.train_id;
        },
        cache: true,
        container: container,
        onEachFeature (f,l) {
               if(f.properties.direction === "EB") {
                    var iconname = "<i class=\"fa fa-train\" aria-hidden=\"true\"></i> " + f.properties.symbol + " <i class=\"fa fa-arrow-right\" aria-hidden=\"true\"></i>";
                }
                else if(f.properties.direction === "WB") {
                    var iconname = "<i class=\"fa fa-train\" aria-hidden=\"true\"></i> " + f.properties.symbol + " <i class=\"fa fa-arrow-left\" aria-hidden=\"true\"></i>";
                }
                else if(f.properties.direction === "NB") {
                    var iconname = "<i class=\"fa fa-train\" aria-hidden=\"true\"></i> " + f.properties.symbol + " <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>";
                }
                else if(f.properties.direction === "SB") {
                    var iconname = "<i class=\"fa fa-train\" aria-hidden=\"true\"></i> " + f.properties.symbol + " <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>";
                }
                else {
                var iconname = "<i class=\"fa fa-train\" aria-hidden=\"true\"></i> " + f.properties.symbol + "";
                }
                l.setZIndexOffset(100);
                l.bindTooltip(iconname, 
            {permanent: true, 
            direction: 'right',
            offset: [10, 0],
                permanent: true, 
                direction: 'center',
                className: 'nocrewtrainlabel'
            }).setZIndexOffset(100);
            l.setIcon(IconTrain).setZIndexOffset(100);
            }

            l.bindPopup(function() {

                return "<table width='248' class='traindata' align='left'>"
 + "<tr>"
 + "    <td style='align:left;width:35px;' width='35' rowspan='5'><img src='/img/train_popup_" + f.properties.engineertype + "train.png' width='36' height='36'></td>"
 + "    <td width='60' style='font-size:1.2em;font-weight:700;' colspan='2'>" + f.properties.symbol + " <span style='float:right;padding-right:5px;'>" + f.properties.railroad + " " + f.properties.loconumber + "</span></td>"
 + "</tr>"
 + "<tr><td colspan='3'>Crew: " + f.properties.engineername + "</td></tr>"
 + "<tr><td colspan='3'>" + f.properties.trainspeed + "mph " + f.properties.direction + " " + f.properties.length + "' " + f.properties.weight + "tns " + f.properties.hpt + "hpt</td></tr>"
 + "<tr><td colspan='3'>" + f.properties.updatetime + "</td></tr>"
 + "</table>";
                });
        }
    });
}

And this the data.php that's fetching the data from a MYSQl database.

    # Build GeoJSON feature collection array
    $geojson = array(
       'type'      => 'FeatureCollection',
       'features'  => array()
    );

    if ($trainsymbol) {
        $sql ="SELECT * FROM  XXXXXXXXXXX";
    }
    else {
        $sql ="SELECT * FROM XXXXXXXXXXX";
    }
    $result = mysqli_query($conn, $sql) or die ("Error1: ".mysqli_error($conn));
    while ($row = mysqli_fetch_assoc($result)) {
        $properties = $row;
        # Remove x and y fields from properties (optional)
        unset($properties['latitude']);
        unset($properties['longitude']);
        $feature = array(
            'type' => 'Feature',
            'geometry' => array(
                'type' => 'Point',
                'coordinates' => array(
                    $row['longitude'],
                    $row['latitude']
                )
            ),
            'properties' => $properties
        );
        # Add feature arrays to feature collection array
        array_push($geojson['features'], $feature);
    }

Thanks in advance for any help can provide.

lgeorget commented 1 month ago

Hello!

Have you set a width and height to your markers in CSS somewhere like in the example https://github.com/Meteo-Concept/leaflet-inflatable-markers-group/blob/gh-pages/example1.html?

The width and height options in the InflatableMarkersGroup options is necessary to compute the collisions but you still have to control how you want to display the markers. By default, your divs may have a size of 0x0, you can check in the browser inspector.