How to set custom icon for Leaflet Realtime plugin with Leaflet?

Question

I'm new to Leaflet JS. I'm trying to figure out a way to change the default style for a L.Geojson marker used in Leaflet Realtime plugin. I don't know what property to change so that I can change the style of the markers.

Here is my code so far:

    var map = L.map('map', {center: [46.4337, 23.4532], zoom: 8}),
    realtime = L.realtime({
        url: 'get_points.php',
        crossOrigin: true,
        type: 'json'
    }, {
        interval: 500
    }).addTo(map);
var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
map.addLayer(osm);

function update(e) {
    realtime.update(JSON.parse(e.data));
}

function remove(e) {
    realtime.remove(JSON.parse(e.data));
}
realtime.on('update', function(e) {
        popupContent = function(fId) {
            var feature = e.features[fId],
                my_number = feature.properties.number;
                mystatus = feature.properties.mystatus;
            return ('My number is: '+ my_number + '<br />' + 'Status: ' + mystatus) ;
        },
        bindFeaturePopup =  function(fId) {
            realtime.getLayer(fId).bindPopup(popupContent(fId));
        },
        updateFeaturePopup = function(fId) {
            realtime.getLayer(fId).getPopup().setContent(popupContent(fId));
        };
        


    Object.keys(e.enter).forEach(bindFeaturePopup);
    Object.keys(e.update).forEach(updateFeaturePopup);
});

I've tried setting a pointToLayer function with a custom icon marker but that didn't work.
Thanks.

iH8 iH8 · Accepted Answer · 2015-03-06T13:54:41

The pointToLayer function works, just as every other option you can use with L.GeoJSON:

You can basically do anything you can do with L.GeoJSON with L.Realtime - styling, onEachFeature, gettings bounds, etc.

If you use the pointToLayer method in the options object (i'm guessing you tried to use it in the source object or made a mistake), you can return a L.Marker with your own custom L.Icon:

var realtime = L.realtime({
    url: 'https://wanderdrone.appspot.com/',
    crossOrigin: true,
    type: 'json'
}, {
    interval: 3 * 1000,
    pointToLayer: function (feature, latlng) {
        return L.marker(latlng, {
            'icon': L.icon({
                iconUrl: '//leafletjs.com/docs/images/leaf-green.png',
                shadowUrl: '//leafletjs.com/docs/images/leaf-shadow.png',
                iconSize:     [38, 95], // size of the icon
                shadowSize:   [50, 64], // size of the shadow
                iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
                shadowAnchor: [4, 62],  // the same for the shadow
                popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
            })
        });
    }
}).addTo(map);

Here's a working example on Plunker: http://plnkr.co/edit/NmtcUa?p=preview

Tutorial: http://leafletjs.com/examples/custom-icons.html

pointToLayerreference: http://leafletjs.com/reference.html#geojson-pointtolayer

L.Icon reference: http://leafletjs.com/reference.html#icon

How to set custom icon for Leaflet Realtime plugin with Leaflet?

2 Answers