Filter multiple gpx tracks

I have a long list of hiking routes visualized on the screen. I am now looking for a way to filter the routes on the map based on some criteria, for example length of the hike. Ideally this can be selected from within the map similar to markers grouping. Any thoughts?

For now I generated something quite different from that which would allow me to generate a map with a filtering on length of the hike. I am quite new to php/wordpress so I probably am doing it quite wrong.

// Function to generate leaflet shortcode based on all gpx files in all posts
// Make it possible to filter based on color codes
function my_leaflet_filter($atts){
	$a = shortcode_atts(
        array(
            'length' => 'all',
            'color' => 'all',
        ), $atts);
	
	$args=array(
    	'post_type'      => 'post',
    	'post_status'    => 'publish',
		'posts_per_page'  => -1
	);
	$my_posts = get_posts( $args );
	// loop door de posts via foreach
	$structure = '[leaflet-map fitbounds zoomcontrol height=500]';
	foreach($my_posts as $my_post){
		$routeafstand = get_field('route-afstand', $my_post->ID);

		// display routes on map based on length of route
		if ($a['length'] != 'all') { 
			if ($routeafstand < $a['length']){
				$structure = $structure . '[leaflet-gpx src="';
				$structure = $structure . get_field('route-gpx-bestand', $my_post->ID);
					// define color based on length of the route
					if ($routeafstand < 10){ $color = 'blue'; } 
					elseif ($routeafstand >= 10 && $routeafstand < 12){ $color = 'green'; }
					elseif ($routeafstand >= 12 && $routeafstand < 14){ $color = '#FFBF00'; }
					elseif ($routeafstand >= 14 && $routeafstand < 16){ $color = 'red'; }
					else { $color = 'black'; }
					// end of if statement

				$structure = $structure . '" color="';
				$structure = $structure . $color;
				$structure = $structure . '"]<a href={name} target="_blank">{name}</a>[/leaflet-gpx]';
			}
		} else {
			$structure = $structure . '[leaflet-gpx src="';
			$structure = $structure . get_field('route-gpx-bestand', $my_post->ID);
				// define color based on length of the route
				if ($routeafstand < 10){ $color = 'blue'; } 
				elseif ($routeafstand >= 10 && $routeafstand < 12){ $color = 'green'; }
				elseif ($routeafstand >= 12 && $routeafstand < 14){ $color = '#FFBF00'; }
				elseif ($routeafstand >= 14 && $routeafstand < 16){ $color = 'red'; }
				else { $color = 'black'; }
				// end of if statement

			$structure = $structure . '" color="';
			$structure = $structure . $color;
			$structure = $structure . '"]<a href={name} target="_blank">{name}</a>[/leaflet-gpx]';
		}
	}
	$structure = $structure . '[hover]';
	$structure = $structure . '[fullscreen]';
	
	echo $structure;
	return '';
}
add_shortcode( 'leaflet_to_show', 'my_leaflet_filter');

The page I need help with: [log in to see the link]