Control style of lines and placemarks markers

[ghost]

It seems that Leaflet.FileLayer is what I need to load a local KML file to my map.

My KML file contains a LineString and Placemarks. When I load this KML file using the demo, the LineString and Placemarks are the same color (circleMarker for Placemarks) I'd like to set a color (style) for the LineString and use (icon) Markers for the Placemarks. Also need to make the markers clickable and show the marker description in a popup.

Is this possible ? (an example is highly appreciated !)

I'm pretty new to Leaflet :-)

Regards,

Robertico

[leplatrem]

Yes, it is possible !

If you know how to do it with a normal L.GeoJSON layer, then it's straightforward with Leaflet.FileLayer using the layerOptions parameter.

I write here an untested example :

var geoJsonOptions = {
     style: {color: 'red'},   // linestring style
     pointToLayer: function (data, latlng) {
            // setup popup, icons...
            return L.circleMarker(latlng, {color:'blue'});  // circles
     }
}

L.Control.fileLayerLoad({
        layerOptions: geoJsonOptions,
}).addTo(map);

Good luck !

[ghost]

This is my solution. Please let me know if this can be done better.

    // line style
    var style = {color:'red', fillColor: "#ff7800", opacity: 1.0, fillOpacity: 0.8, weight: 2, clickable: false};

    // icon style
    var myIcon = L.icon({
    iconUrl: 'map_pin_yellow.png',
    iconSize: [22, 31],
    //iconAnchor: [16, 37],
    iconAnchor: [9, 30],
    popupAnchor: [0, -28]
    });

    L.Control.FileLayerLoad.LABEL = '<i class="fa fa-folder-open"></i>';

    var geoJsonOptions = {
        onEachFeature: function (feature, layer) {
            layer.bindPopup(feature.properties.description);},
        style: style,
            pointToLayer: function (data, latlng) {
            // setup popup, icons...
            return L.marker(latlng, {icon: myIcon});
        }
    }

    L.Control.fileLayerLoad({
        layerOptions: geoJsonOptions,
    }).addTo(map);