waypoint name

[1stgongsin]

When loading gpx file, waypoints just appear as circle. Can it be possible that 'waypoint name' appears?

[leplatrem]

Can it be possible that 'waypoint name' appears?

Yes I think so, try to inspect the layer object you obtain from the loaded event:

var control = L.Control.fileLayerLoad();
    control.loader.on('data:loaded', function (event) {
        // event.layer gives you access to the layers you just uploaded!
        // iterate each point of the layer
        // add a popup or something with the layer properties
    });

[1stgongsin]

Thank you for reply, leplatrem. Sadly, I don't know about javascript at all. so I can't change the original code.

</docs/index.js>

    L.Control.FileLayerLoad.LABEL = '<img class="icon" src="folder.svg" alt="file icon"/>';
    control = L.Control.fileLayerLoad({
        fitBounds: true,
        layerOptions: {
            style: style,
           pointToLayer: function (data, latlng) {
              return L.circleMarker(
                   latlng,
                    { style: style }

                );
            }
        }
    });
    control.addTo(map);
    control.loader.on('data:loaded', function (e) {
        var layer = e.layer;
        console.log(layer);
    });
}

window.addEventListener('load', function () {
    initMap();
});

}(window));

[L.circleMarker] shows waypoint as just red circle. I want waypoint name appear Can you teach me what code should I add to the original index.js ?

[johnd0e]

Add this to layerOptions:

        layerOptions: {
          onEachFeature: function (feature, layer) {
            if (feature.properties.name) { layer.bindTooltip(feature.properties.name, { permanent: true }); }
          },
         // style: style,

[1stgongsin]

Thank you for reply, johnd0e.

I changed code like below. but It's not working

    control = L.Control.fileLayerLoad({
        fitBounds: true,
        layerOptions: {
			          onEachFeature = function (feature, layer) {
                      if (feature.properties.name) { layer.bindTooltip(feature.properties.name, { permanent: true });
      },
            // style: style,
            pointToLayer: function (data, latlng) {
                return L.circleMarker(
                    latlng,
                    { style: style }
                );
            }
        }
    });
    control.addTo(map);

[johnd0e]

There is mistype: change onEachFeature = to onEachFeature:

[1stgongsin]

It doesn't work either. sorry for bothering syntax error -> Unexpected token ,

    control = L.Control.fileLayerLoad({
        fitBounds: true,
        layerOptions: {
			
      onEachFeature: function (feature, layer) {
        if (feature.properties.name) { layer.bindTooltip(feature.properties.name, { permanent: true });
      },
     // style: style,

           pointToLayer: function (data, latlng) {
              return L.circleMarker(
                   latlng,
                    { style: style }

                );
            }
        }
    });

[johnd0e]

control = L.Control.fileLayerLoad({
	fitBounds: true,
	layerOptions: {
		onEachFeature: function (feature, layer) {
        		if (feature.properties.name) { layer.bindTooltip(feature.properties.name, { permanent: true }) };
		},
		// style: style,
		pointToLayer: function (data, latlng) {
			return L.circleMarker(latlng, {style: style});
		}
	}
});

[geo903]

control1 = L.Control.fileLayerLoad({
            fitBounds: true,

            layerOptions: {
                onEachFeature: function (feature, layer) {
                     layer.bindTooltip(feature.properties.name, { permanent: true })
                },
                // style: style,


                    pointToLayer: function (feature, latlng) {
                        label = String(feature.properties.name); // .bindTooltip can't use straight 'feature.properties.attribute'
                        return new L.CircleMarker(latlng, {
                            weight: 0, fillOpacity:0
                        }).bindTooltip(label, {permanent: true, opacity: 1, direction: 'center',className: 'labelstyle'}).openTooltip();
                    }

            }

        });