javascript - How to set custom icon for Leaflet Realtime plugin with Leaflet? - Stack Overflow

admin管理员组

文章数量:1415491

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

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Mar 6, 2015 at 12:52 FlaviuFlaviu 7522 silver badges44 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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/

本文标签： javascriptHow to set custom icon for Leaflet Realtime plugin with LeafletStack Overflow