[GIS] way to change leaflet-gpx style

gpxleaflet

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);

Best Answer

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}}]}

    })

Related Solutions

[GIS] Leaflet – Change style on click

A couple of edits and suggestions that might help you. I am sure there is a more elegant way to do this, but I tested it and it works.

You have to check first if the variable clickedFeature is already defined. One way to do that is by checking what type it is. If the type is not defined yet, then the variable isn't defined yet.

function clickFeature(e) {
                    if (typeof clickedFeature != 'undefined') {clickedFeature.setRadius(3)}

You have to define the function update. info.update does not make sense in this case.

                    var layer = e.target;
                    e.target.setRadius(5);
                    clickedFeature = e.target;
                    update(feature.properties.PROPERTY)
                    }   


    var update = function (feature, latlng) {
        return L.circleMarker(latlng)
};

You don't have to add it to your layer again, since the function is called when the layer is created. So I deleted .addTo(MyLayer).

function onEachFeature(feature, layer) {
                                layer.bindPopup(feature.properties.name);
                                layer.on({click: clickFeature,})
                                }

[GIS] Leaflet – GPX – Clustering

GeoJSON or GPX doesn't really matter, you just need a way to construct a marker from each coordinate pair, and add it to a MarkerCluster group.

Here is the start of a solution; ugly as it is, it works (for clustering the hundreds of gpx points), and it should point you in the right direction to a cleaner solution.

Add a max zoom to the map. Not sure why, but L.MarkerCluster complains if you don't

var map = new L.Map('map', {center: new L.LatLng(45, 0), zoom: 2, maxZoom:12});
Create a marker cluster group before you start parsing the gpx

var markerClusters = new L.MarkerClusterGroup();
Drop the on.('loaded') function from this line

var track = new L.GPX("./map.gpx", {async: true});
Don't add the 'track' to the map. Instead, get GPX.js to add the markers to the marker cluster group, by changing the parseWPT() function as shown below. (Basically, use the existing methods in the GPX.js plugin to construct markers from the lat and log attributes, and add them to the clusters)

parse_wpt: function(e, xml, options) { var m = new L.Marker(new L.LatLng(e.getAttribute('lat'), e.getAttribute('lon')), options); markerClusters.addLayer(m); }
Finally, add the markerCluster to the map

map.addLayer(markerClusters)

Note, this is not adding your tracks to the map. If you need these, I suggest separating the points from the tracks in your gpx file, and working from there, with a second call to GPX.js.

Best Answer

Related Solutions

[GIS] Leaflet – Change style on click

[GIS] Leaflet – GPX – Clustering

Related Question