Custom size for wpt - Githubissues

southmedia commented 4 years ago

Hi team,

Thank you for your work with this great plugin. I'm building a trekking map and want to identify each track with a different icon mapped from GPX "sym" data. That was ok, but I would like to custom set the size of the wpt icon (green in the middle of the track) and I could´t, after trying in many ways. Can you help me with that? Thank you!!!! Hernán

http://southmedia.com.ar/mapselchaltentrekking/test-wpt.html

Trekking Map

Here is where I´m trying to set different color wpt icons:

    // Load GPX Tacks

        var tracks = [
            ["/mapselchaltentrekking/maps/gpx/track-20.gpx", "#f48024", "4", "", "", ""],
            ["/mapselchaltentrekking/maps/gpx/test-wpticon.gpx", "#f48024", "4", "", "", ""],
        ];

        function loadGpx(item, index) {
            var g = new L.GPX(item[0], { 
                async: true,
                parseElements: ['track'],
                polyline_options: {
                    weight: item[2],
                    color: item[1],
                    fillOpacity: 1
                },
                marker_options: {
                    startIconUrl: item[4],
                    endIconUrl: item[5],                
                    iconSize: [40, 40],
                    iconAnchor: [20, 40],
                    shadowSize: [0, 0],
                    shadowAnchor: [0, 0],
                    wptIconUrls: {
                    'green': '/mapselchaltentrekking/maps/iconos/sendero-green.png',
                    }
                }
            });                     

            g.on('loaded', function(e) {
                var gpx = e.target,
                name = gpx.get_name(),
                distM = gpx.get_distance(),
                distKm = distM / 1000,
                distKmRnd = distKm.toFixed(1),
                eleGain = gpx.get_elevation_gain().toFixed(0),
                eleLoss = gpx.get_elevation_loss().toFixed(0),
                eleDiff = gpx.get_elevation_max().toFixed(0) - gpx.get_elevation_min().toFixed(0);
                var info = "<b>" + name + "</b></br>" + "Distancia: <b>" + distKmRnd + " km </b></br>" + "Desnivel: <b>" + eleDiff + " m </b></br> <a target=" + "'" + "_parent" + "'" + "href=" + "'" + item[3] + "'"  + ">+ info</a>"

Trekking Map2

Below is html code:

<!DOCTYPE html>

Trekking Map

mpetazzoni commented 4 years ago

Hmm, that's strange, setting iconSize in the marker_options works for me. And looking at the link you sent, it looks like the green marker is correctly 40x40. What's not working the way you expect?

southmedia commented 4 years ago

Hi, thanks for the answer. You´re right, its working!! Sorry, I had been trying for hours and at the end, frustrated and tired, I din´t realize the last code was ok. Thanks, I´m trying to improve with Leaflet and plugins. It is great tool.

mpetazzoni / leaflet-gpx

Custom size for wpt #94