Control style of lines and placemarks markers
Opened this issue · 2 comments
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
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 !
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);