How to dynamically show/hide LineString in Leaflet - leaflet

Question

I'm loading a GeoJSON file of aircraft tracks into Leaflet. I'd like to plot current locations as icons and previous 'tracks' as lines. Showing all the tracks gets busy as aircraft increase, so I'd like to be able to toggle them on only when the aircraft is clicked on.
Can/how should I show/hide the LineString separately from the marker dynamically?
I've found suggestions to set the style transparent but .setStyle applies to the Feature, not the geometry.
Summarised GeoJSON:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"reg": "G-CGWP",
"type": "fixed",
"model": "website.profile"
},
"id": 12,
"geometry": {
"type": "GeometryCollection",
"geometries": [
{
"type": "LineString",
"coordinates": [
[
-0.319281196282617,
52.08664390758181
],
[
-1.076445537370006,
52.79518475653341
],
[
-0.098191354875297,
51.94810149137197
],
[
-0.940941846648286,
53.508162348603435
]
]
},
{
"type": "Point",
"coordinates": [
-0.940941846648286,
53.508162348603435
]
}
]
}
},
...
]
}
I do have control of the GeoJSON so can change that.

Answer 1

Since LineString collection is represented as GeometryCollection you could consider to flatten GeometryCollection into LineString geometries, (for example via Turf.js flatten function):
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "GeometryCollection",
"geometries": [
{
"type": "LineString",
"coordinates": [
[-105.00341892242432, 39.75383843460583],
[-105.0008225440979, 39.751891803969535]
]
},
{
"type": "LineString",
"coordinates": [
[-105.0008225440979, 39.751891803969535],
[-104.99820470809937, 39.74979664004068]
]
}
]
}
}
]
}
into
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[-105.00341892242432, 39.75383843460583],
[-105.0008225440979, 39.751891803969535]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[-105.0008225440979, 39.751891803969535],
[-104.99820470809937, 39.74979664004068]
]
}
}
]
}
and then apply style per layer
layer.on({
click: function(e) {
toggleLayerVisibility(e.target);
}
});
where
var selectedLayerId = null;
function toggleLayerVisibility(layer) {
if (selectedLayerId) {
geojson.resetStyle(layer);
selectedLayerId = null;
} else {
//hide a layer
layer.setStyle({
opacity: 0,
fillOpacity: 0.0
});
selectedLayerId = layer._leaflet_id;
}
}
Here is an example
var data = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "GeometryCollection",
geometries: [
{
type: "LineString",
coordinates: [
[-105.00341892242432, 39.75383843460583],
[-105.0008225440979, 39.751891803969535]
]
},
{
type: "LineString",
coordinates: [
[-105.0008225440979, 39.751891803969535],
[-104.99820470809937, 39.74979664004068]
]
},
{
type: "LineString",
coordinates: [
[-104.99820470809937, 39.74979664004068],
[-104.98689651489258, 39.741052354709055]
]
}
]
}
},
{
type: "Feature",
geometry: {
type: "MultiPolygon",
coordinates: [
[
[
[-105.00432014465332, 39.74732195489861],
[-105.00715255737305, 39.7462000683517],
[-105.00921249389647, 39.74468219277038],
[-105.01067161560059, 39.74362625960105],
[-105.01195907592773, 39.74290029616054],
[-105.00989913940431, 39.74078835902781],
[-105.00758171081543, 39.74059036160317],
[-105.00346183776855, 39.74059036160317],
[-105.00097274780272, 39.74059036160317],
[-105.00062942504881, 39.74072235994946],
[-105.00020027160645, 39.74191033368865],
[-105.00071525573731, 39.74276830198601],
[-105.00097274780272, 39.74369225589818],
[-105.00097274780272, 39.74461619742136],
[-105.00123023986816, 39.74534214278395],
[-105.00183105468751, 39.74613407445653],
[-105.00432014465332, 39.74732195489861]
],
[
[-105.00361204147337, 39.74354376414072],
[-105.00301122665405, 39.74278480127163],
[-105.00221729278564, 39.74316428375108],
[-105.00283956527711, 39.74390674342741],
[-105.00361204147337, 39.74354376414072]
]
],
[
[
[-105.00942707061768, 39.73989736613708],
[-105.00942707061768, 39.73910536278566],
[-105.00685214996338, 39.73923736397631],
[-105.00384807586671, 39.73910536278566],
[-105.00174522399902, 39.73903936209552],
[-105.00041484832764, 39.73910536278566],
[-105.00041484832764, 39.73979836621592],
[-105.00535011291504, 39.73986436617916],
[-105.00942707061768, 39.73989736613708]
]
]
]
}
}
]
};
var map = L.map("map").setView([39.74739, -105], 14);
L.tileLayer(
"https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw",
{
maxZoom: 18,
attribution:
'Map data © OpenStreetMap contributors, ' +
'CC-BY-SA, ' +
'Imagery © Mapbox',
id: "mapbox.light"
}
).addTo(map);
var data_flatten = turf.flatten(data);
var geojson = L.geoJSON(data_flatten, {
style: {
fillColor: '#1c9099',
weight: 8
},
onEachFeature: onEachFeature
}).addTo(map);
var selectedLayerId = null;
function toggleLayerVisibility(layer) {
if (selectedLayerId) {
geojson.resetStyle(layer);
selectedLayerId = null;
} else {
//hide a layer
layer.setStyle({
opacity: 0,
fillOpacity: 0.0
});
selectedLayerId = layer._leaflet_id;
}
}
function onEachFeature(feature, layer) {
layer.on({
click: function(e) {
toggleLayerVisibility(e.target);
}
});
}
#map {
width: 600px;
height: 400px;
}
<link
rel="stylesheet"
href="https://unpkg.com/leaflet#1.5.1/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""
/>
<script
src="https://unpkg.com/leaflet#1.5.1/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""
></script>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/5.1.5/turf.js"
></script>
<div id="map"></div>