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/{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.

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/{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.

• javascript
• leaflet
• geojson
• markers

2 Answers 2

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./',
    crossOrigin: true,
    type: 'json'
}, {
    interval: 3 * 1000,
    pointToLayer: function (feature, latlng) {
        return L.marker(latlng, {
            'icon': L.icon({
                iconUrl: '//leafletjs./docs/images/leaf-green.png',
                shadowUrl: '//leafletjs./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./examples/custom-icons.html

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

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

Working with the example given on the plugin's page, I've managed to style the marker by using pointToLayer. You just have to add the function inside the brackets that contain the interval option.

var realtime = L.realtime({
    url: 'https://wanderdrone.appspot./',
    crossOrigin: true,
    type: 'json'
}, {
    interval: 3 * 1000,
    pointToLayer: function (feature, latlng) {
    return L.circleMarker(latlng, geojsonMarkerOptions)
    }
}).addTo(map);

Here's a working sample on JSFiddle: http://jsfiddle/4usvq7ky/