JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.bdcc.co.uk/Gmaps/GDouglasPeuker.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false&key=AIzaSyAFBmTdl-zuA1fs6CEtiI1cAWHpJrb4e-s" type="text/javascript"></script>
<div id="top">
    <label>Walkfilter <input type="checkbox" data-filter="max_possible_travel" /></label> 
    <label>Douglas Peuker <input type="checkbox" data-filter="douglaspeuker"/></label> 
    <label>Your Filter :) <input type="checkbox" data-filter="your_filter" /></label> 
</div>
<div id="map"></div>

CSS

#map {
    position:absolute;
    top:35px;
    left:0;
    right:0;
    bottom:0;
    border-top:1px solid #ddd;
}
#top {
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:25px;
    color:#999;
    font-family:arial;
    padding:5px;
}

JavaScript

var mapDiv, map, controls = {}, filters = {}, activeFilters = [];

/*
    Your filter... :)
    @params data array 
    @returns array
    
    each object in the data array have following values:
        lat         float
        lng         float
        created     Date
        googLatLng  google.maps.LatLng
    
*/
filters.your_filter = function(data) {
    return _.first(data, 20);
};

/*
NOTE: you can add more filters, just put them in the "filters" object and 
create a checkbox in the html, with the data-filter set to the name of the function
*/

filters.douglaspeuker = function(data) {
    var g_result = GDouglasPeucker(_.pluck(data, "googLatLng"), 25);
    
    var result = _.filter(data, function(c) {
        return _.contains(g_result, c.googLatLng);
    });
    
    return result;
}

/*
the only filter i have right now :(
*/
filters.max_possible_travel = function(data) {
    //http://en.wikipedia.org/wiki/Preferred_walking_speed
    //I switched to 16, as the route was made by driving with a bus...
    var maxMetersPerSec = 16,
        i, m, last, result = [];
    
    for(i=0;i<data.length;i++) {
        m = data[i];
        if (last) {
            // seconds between current and last coord
            var diff = (m.created.getTime() - last.created.getTime()) / 1000;
            // the maximum amount of meters a person,bus,car etc can make per sec.
            var maxDistance = diff * maxMetersPerSec;
            // the actual distance traveled
            var traveledDistance = google.maps.geometry.spherical.computeDistanceBetween(last.googLatLng, m.googLatLng);
            
            if (traveledDistance > maxDistance) {
                continue;
            } else {
                result.push(m);
            }
        } else {
            result.push(m);
        }
        last = m;
    }
    return result;
};









/*

 You dont have to care about the following...

*/



var coords =...