3

I'm using the leaflet-gpx plugin to draw various .gpx files on my map. How can I change the color/style of it?

gpxvar[{{loop.index0}}] = new L.GPX("{{url_for('static', filename='gpx/' + r )}}", {
        async: true,
        marker_options: {
            startIconUrl: "{{url_for('static', filename='img/pin-icon-start.png')}}",
            endIconUrl: "{{url_for('static', filename='img/pin-icon-end.png')}}",
            shadowUrl: "{{url_for('static', filename='img/pin-shadow.png')}}"
        }

gpxvar is my L.GPX object, I tried the below code but it didn't change anything, any pointers?

var highlightStyle = {
    color: '#9b1d41',
    weight: 3,
    opacity: 0.6,
    fillOpacity: 0.65,
    fillColor: '#9b1d41'
};
    gpxvar[{{loop.index0}}].setStyle(highlightStyle);
  • it might have to do with the order i do things as once the page is loaded, doing a gpxvar[0].setStyle({color: 'red'}) changes well the color.... – euri10 Dec 11 '15 at 13:19
1

ok it seems like as L.GPX extends L.featureGroup and that the latter has a setStyle method, one should just have to pass it while creating it. looking at the code it defaults to blue using polyline_options

so my code added it and I got different colors now :

var colors = ['red', 'purple'];
gpxvar[{{loop.index0}}] = new L.GPX("{{url_for('static', filename='gpx/' + r )}}", {
        async: true,
        marker_options: {
            startIconUrl: "{{url_for('static', filename='img/pin-icon-start.png')}}",
            endIconUrl: "{{url_for('static', filename='img/pin-icon-end.png')}}",
            shadowUrl: "{{url_for('static', filename='img/pin-shadow.png')}}"
        },
        polyline_options: {color: colors[{{loop.index0}}]}

    })

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.