Loading KML file using Leaflet.FileLayer [ LineString and Placemarks ]

[Robertico]

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

[Robertico]

I've changed this piece of code from the demo to add a custom marker icon.

I'm not sure if this is the correct way, but it works for now.

  // 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: 'ylw-pushpin.png',
        iconSize: [32, 37],
        iconAnchor: [16, 37],
        popupAnchor: [0, -28]
 });


 L.Control.FileLayerLoad.LABEL = '<i class="fa fa-folder-open"></i>'
    L.Control.fileLayerLoad({
       fitBounds: true,
       layerOptions: {style: style,
                      pointToLayer: function (data, latlng) {
                      return L.marker(latlng, {icon: myIcon});
                      }},
        }).addTo(map);

Please correct me if I'm wrong.

Still looking for an example how to create a marker popup using the KML placemark description.

Robertico

[Robertico]

With the help of Mathieu Leplatre (see also GitHub)

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