Customizing the marker

[karussell]

How can I change the marker of the 'current position' without overwriting the marker-icon.png :) ?

BTW: I'm speaking of the addlastPoint: true option

Somehow one needs to replace this with e.g. a custom marker:

var marker = L.marker([lat, lon]);
var icon = L.icon({
    iconUrl: './path-to-im/test.png',            
    iconSize: [24, 24],
    iconAnchor: [10, 10]
});
marker.setIcon(icon);
marker.addTo(vrpMap);

[r1m]

I guess you can use pointToLayer option on leaflet layer
http://leafletjs.com/reference.html#geojson

 pointToLayer: function (feature, latlng) {
    return L.marker(latlng, {icon: icon});
 },

[karussell]

Nice, I'll try. Thanks for the hint!

[r1m]

See example 8

[karussell]

Thanks again, so I guess we can close here :)

[karussell]

Maybe this should be easier via a property but maybe this is not so complex ...

[karussell]

Hmmh, I do not get it working. The example seems to be too far away from what I need. I tried to modify the example but I'm e.g. unsure where to get the data or if I need (and how) this works in the _createLayer method

[r1m]

I did not check my code, but this should do:

//init your data
var map=...:
var icon =...;
var geoJsonData = ...;
//declare a normal GeoJson layer 
var geojsonLayer = L.geoJson(geoJsonData , {
            pointToLayer: (function(feature, latLng) {
                //check if it's the last point added
                if (feature.properties.hasOwnProperty('last')) {
                    return new L.Marker(latLng, {
                        icon: icon
                    });
                }
                //else
                return L.circleMarker(latLng, {
                    fillColor: 'red',
                    fillOpacity: 0.5,
                    stroke: false,
                    radius: 3
                });
            })
        });
// Add time capability to the geojson layer
var geoJsonTimeLayer = L.timeDimension.layer.geoJson(geojsonLayer , {
    addlastPoint: true
});
//add the timed layer to the map
geoJsonTimeLayer .addTo(map);

[karussell]

Looks simpler then, thanks a lot! But still not working :(

Not sure if my complication due to gpx makes this not working but with this code, it is still showing the default end marker as the 'pointToLayer' is never called:

var gpxLayer = L.geoJson();
gpxLayer.pointToLayer = function (feature, latLng) {
    if (feature.properties.hasOwnProperty('last')) {
        return new L.Marker(latLng, {
            icon: icon
        });
    }
    //else
    return L.circleMarker(latLng, {
        fillColor: 'red',
        fillOpacity: 0.5,
        stroke: false,
        radius: 3
    });
};

gpxLayer = omnivore.gpx(url, null, gpxLayer).on('ready', function () {});
var geoJsonLayer = L.timeDimension.layer.geoJson(gpxLayer, {
    updateTimeDimension: true,
    addlastPoint: true
});

geoJsonLayer.addTo(map);

And the GPX is necessary for the additional time information

[r1m]

You are not passing it as option.

L.geoJson(null, {
    pointToLayer: function() {
        // todo
    }
});

[karussell]

Sorry, didn't mention it: this was my first try and was also without success...

[karussell]

I think the plugin needs an update here to take into account the pointToLayer hook

[karussell]

Uhm, my fault, sorry - there was some style overwriting the options! Thanks for the help @ram-one

Here is the short and working code:

var map = ...
var icon = ...
var icon2 = ...
var url = ...

var gpxLayer = omnivore.gpx(url).on('ready', function () {
});
gpxLayer.options = {
    style: myStyle,
    pointToLayer: function (feature, latLng) {
        if (feature.properties.hasOwnProperty('last')) {
            return new L.Marker(latLng, {
                icon: icon
            });
        }
        //else
        return new L.Marker(latLng, {
            icon: icon2
        });
    }
};

var geoJsonLayer = L.timeDimension.layer.geoJson(gpxLayer, {
    updateTimeDimension: true,
    addlastPoint: true
});


geoJsonLayer.addTo(map);

[bielfrontera]

Hi!
Exactly, here the trick was to create a layer with the option pointToLayer, and call omnivore with this custom layer. Then, it works, because TimeDimension creates new geoJson layers inheriting the same options of the base layer.

I have update example 9, and now it appears a different marker.

I think there is no need to add an option to timedimension, because in other cases you might need to modify other options of the geojson base layer.

But I should modify the documentation, to explain that timedimension adds a special property last to geoJson features which can be used to modify the style.

Thanks @ram-one for your participation :-)

[karussell]

Thanks @bielfrontera !