Ties a datatable to a leaflet map. Requires jQuery, Leaflet, DataTables, Leaflet-geosearch

mappy.js

var intersections, // Geojson
    map,
    delaware, // Lat/Lng of center of Delaware
    streetMapUrl,
    streetMapLayer,
    geosearch,
    legend,
    polyindex,  // Custom ID for each point.
    highlightStyle = {
        fillColor: 'green',
        fillOpacity: 1,
        weight: 1.5,
        radius: 9
    };

function getColor(d) {
    // Colors returned are based on
    // the 'normrank' attribute of
    // each point, which is our News
    // Journal Score. The higher the score
    // the darker the red color.
    return d >= 75 ? '#CB181D' :
           d >= 50 ? '#FB6A4A' :
           d >= 25 ? '#FCAE91' :
                     '#FEE5D9';
}

function buildPopup(f) {
    // Helper function that builds the html
    // for the map popup. Variable f is the
    // associative array of data for a
    // given marker on the map.
    var ohtml = "<strong>" + f['Description'] + "</strong><hr>";
    ohtml += "<strong>News Journal score:</strong> " + f['normrank'] + "<br>";
    ohtml += "<strong>Total crashes (2010-2012):</strong> " + f['crashes1012'] + "<br>";
    ohtml += "<strong>Avg. crashes per year:</strong> " + f['AvgAnnual'] + "<br>";
    ohtml += "<strong>Avg. injury crashes per year:</strong> " + Math.round(f['injury1012']/3.0*100)/100 + "<br>";
    ohtml += "<strong>Crash rate:</strong> " + f['tcrate'] + " per 1 mil.<br>";
    ohtml += "<strong>Injury crash rate:</strong> " + f['ifrate'] + " per 1 mil.<br>";
    return ohtml;
}

function onEachFeature(feature, layer) {
    // A pass-through function that binds
    // popups to each map point and calls
    // the buildTable function.
    layer.bindPopup(buildPopup(feature.properties));
    layer._leaflet_id = 'polyindex'+polyindex+'';
    polyindex++;
    buildTable(feature.properties, layer._leaflet_id, layer);
}

function pointToLayer(feature, latlng) {
    // Turns our geojson into individual
    // circleMarkers on the map, styled
    // by normrank.
    var geojsonMarkerOptions = {
        fillColor: getColor(feature.properties["normrank"]),
        weight: 1,
        radius: 8,
        opacity: 1,
        color: 'black',
        fillOpacity: 0.9
    };
    return L.circleMarker(latlng, geojsonMarkerOptions);
}

function buildTable(row, layerId, layer) {
    // Helper function that takes data for
    // a specific point and builds the HTML
    // for the datatable. For each row that
    // is appended to the table, hover and
    // click events are also added that
    // trigger map events.
    if(typeof layerId != 'undefined') {
        $('<tr id="' + layerId + '"><td>'+ row["Description"] +'</td><td>'+ row["County"] +'</td><td>'+ row["crashes1012"] +'</td><td>'+ row["tcrate"] +'</td><td>'+ row["ifrate"] +'</td><td>'+ row["normrank"] +'</td></tr>')
            .hover(function(e){
                layer.setStyle(highlightStyle);
                if (!L.Browser.ie && !L.Browser.opera) {
                    layer.bringToFront();
                }
                }, function(e) {
                    layer.setStyle(layer.defaultOptions);
                })
            .click(function(e) {
                map.setView(layer._latlng, 13);
            })
            .css("cursor", "pointer")
            .appendTo($(".lookup_table tbody"));
    }
}

$(function() {
    map = L.map('tnj_map');
    delaware = new L.LatLng(39.104, -75.21);
    streetMapUrl ='http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}';
    streetMapLayer = new L.TileLayer(streetMapUrl, { maxZoom: 18 });
    map.setView(delaware, 8);
    map.addLayer(streetMapLayer);

    // Create geocoder.
    geosearch = new L.Control.GeoSearch({
        provider: new L.GeoSearch.Provider.OpenStreetMap(),
        searchLabel: 'search for address...',
        notFoundMessage: 'Sorry, that address could not be found.',
        messageHideDelay: 3000,
        zoomLevel: 14
    }).addTo(map);

    // Prepare and append legend to map.
    legend = L.control({position: 'bottomright'});
    legend.onAdd = function(map) {
        var div = L.DomUtil.create('div', 'info legend');
        div.innerHTML = '<h4>News Journal Score</h4> \
        <i style="background:#CB181D"></i>75+<br> \
        <i style="background:#FB6A4A"></i>50-74<br> \
        <i style="background:#FCAE91"></i>25-49<br> \
        <i style="background:#FEE5D9"></i>&lt;25';
        return div;
    };
    legend.addTo(map);

    // Fetch, process and display geoJSON.
    $.getJSON("js/mapdata.geojson", function(response) {
        polyindex = 0;
        intersections = L.geoJson(response, {
            pointToLayer: pointToLayer,
            onEachFeature: onEachFeature
        });
        intersections.addTo(map);
        buildTable(response);
        $(".lookup_table").dataTable({
            "aaSorting": [[5, 'desc']],
            "sDom": "l<'tnj_table_directions'>frtip"
        });
        $(".tnj_table_directions")
            .html("<br>Click a row to zoom to that location.");
    });
});