beer-map/js/app.js
// Function for creating map, loading in data and placing it in the info pane
Function for creating map, loading in data and placing it in the info pane
Function for creating map loading in data and placing it in the info pane
function showInfo(gData) {
    var map = Sheetsee.loadMap("map");
    var stamenToner = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
        attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);
    var optionsJSON = ["rowNumber", "name", "icon", "city", "type"]
    var geoJSON = Sheetsee.createGeoJSON(gData, optionsJSON)
    console.log(geoJSON);
    markerLayer = L.geoJson(geoJSON,{
        pointToLayer: function(feature,latlng) {
            var featureIcon = L.icon({
                iconUrl:'img/beer.png',
                iconSize: [18,18],
                popupAnchor: [0, -9]
            })
            var marker = L.marker(latlng,{
                icon: featureIcon
            });
            var popupContent = "<div style='color: whitesmoke;'><h2>" + feature.opts.name + "</h2><p>" + feature.opts.city + " | " + feature.opts.type + "</p><img class='establishmentIcon' src='" + feature.opts.icon + "'></div>"
            marker.bindPopup(popupContent);
            return marker
        }
    }).addTo(map);
    map.fitBounds(markerLayer.getBounds())
    tableOptions = {
        "data": gData, 
        "tableDiv": "#beerTable", 
        "filterDiv": "#tableFilter"
    }
    Sheetsee.makeTable(tableOptions)
    Sheetsee.initiateTableFilter(tableOptions)
    $('.beerRow').live("click", function(event) {
        $('.beerRow').removeClass("selectedRow")
        var rowNumber = $(this).closest("tr").attr("id")
        $('#' + rowNumber).addClass("selectedRow")
        var dataElement = Sheetsee.getMatches(gData, rowNumber, "rowNumber")
        var selectedCoords = [dataElement[0].lat, dataElement[0].long]
        map.setView(selectedCoords, 17)
        var selectedBeer = Sheetsee.ich.selectedBeer({
            rows: dataElement
        })
        $('#selectedBeer').html(selectedBeer).css("display", "inline")
    })
    markerLayer.on('click', function(e) {
        $('.beerRow').removeClass("selectedRow")
        var rowNumber = e.layer.feature.opts.rowNumber
        $('#' + rowNumber).addClass("selectedRow")
        var dataElement = Sheetsee.getMatches(gData, rowNumber.toString(), "rowNumber")
        var selectedBeer = Sheetsee.ich.selectedBeer({
            rows: dataElement
        })
        selectedMarkerLocation = [dataElement[0].lat, dataElement[0].long]
        map.setView(selectedMarkerLocation, 17)
        $('#selectedBeer').html(selectedBeer).css("display", "inline")
    })
    $('.resetMap').click(function() {
        $('.beerRow').removeClass("selectedRow")
        $('#selectedBeer').css("display", "none")
        map.fitBounds(markerLayer.getBounds())
    })
}
function showInfo ( gData ) { var map = Sheetsee . loadMap ( "map" ) ; var stamenToner = L . tileLayer ( 'http://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png' , { attribution : 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' } ) . addTo ( map ) ; var optionsJSON = [ "rowNumber" , "name" , "icon" , "city" , "type" ] var geoJSON = Sheetsee . createGeoJSON ( gData , optionsJSON ) console . log ( geoJSON ) ; markerLayer = L . geoJson ( geoJSON , { pointToLayer : function ( feature , latlng ) { var featureIcon = L . icon ( { iconUrl : 'img/beer.png' , iconSize : [ 18 , 18 ] , popupAnchor : [ 0 , - 9 ] } ) var marker = L . marker ( latlng , { icon : featureIcon } ) ; var popupContent = "<div style='color: whitesmoke;'><h2>" + feature . opts . name + "</h2><p>" + feature . opts . city + " | " + feature . opts . type + "</p><img class='establishmentIcon' src='" + feature . opts . icon + "'></div>" marker . bindPopup ( popupContent ) ; return marker } } ) . addTo ( map ) ; map . fitBounds ( markerLayer . getBounds ( ) ) tableOptions = { "data" : gData , "tableDiv" : "#beerTable" , "filterDiv" : "#tableFilter" } Sheetsee . makeTable ( tableOptions ) Sheetsee . initiateTableFilter ( tableOptions ) $ ( '.beerRow' ) . live ( "click" , function ( event ) { $ ( '.beerRow' ) . removeClass ( "selectedRow" ) var rowNumber = $ ( this ) . closest ( "tr" ) . attr ( "id" ) $ ( '#' + rowNumber ) . addClass ( "selectedRow" ) var dataElement = Sheetsee . getMatches ( gData , rowNumber , "rowNumber" ) var selectedCoords = [ dataElement [ 0 ] . lat , dataElement [ 0 ] . long ] map . setView ( selectedCoords , 17 ) var selectedBeer = Sheetsee . ich . selectedBeer ( { rows : dataElement } ) $ ( '#selectedBeer' ) . html ( selectedBeer ) . css ( "display" , "inline" ) } ) markerLayer . on ( 'click' , function ( e ) { $ ( '.beerRow' ) . removeClass ( "selectedRow" ) var rowNumber = e . layer . feature . opts . rowNumber $ ( '#' + rowNumber ) . addClass ( "selectedRow" ) var dataElement = Sheetsee . getMatches ( gData , rowNumber . toString ( ) , "rowNumber" ) var selectedBeer = Sheetsee . ich . selectedBeer ( { rows : dataElement } ) selectedMarkerLocation = [ dataElement [ 0 ] . lat , dataElement [ 0 ] . long ] map . setView ( selectedMarkerLocation , 17 ) $ ( '#selectedBeer' ) . html ( selectedBeer ) . css ( "display" , "inline" ) } ) $ ( '.resetMap' ) . click ( function ( ) { $ ( '.beerRow' ) . removeClass ( "selectedRow" ) $ ( '#selectedBeer' ) . css ( "display" , "none" ) map . fitBounds ( markerLayer . getBounds ( ) ) } ) }
Function for creating map, loading in data and placing it in the info pane
Function for creating map loading in data and placing it in the info pane
//Initialize map // Add a basemap. We can set that with plain Leaflet // What attribute data do we want from our spreadsheet? Use the column name! // Let's turn our spreadsheet into GeoJSON so we can add it to a map! // This isn't necessary, but it will let you look at the GeoJSON generated by Sheetsee! // create a template for the popup // Our spreadsheet data has been transformed into GeoJSON using Sheetsee // Sheetsee allows you to load markers, but they're default pushpins // Instead, we'll use Leaflet to transform our GeoJSON into a marker layer. // This way we can use our own custom marker icons // We'll also create a popup that will show extra information for the clicked location // Beer by Fabián Sanabria from the Noun Project // Set icon size // Offset the popup we'll add so it doesn't cover the marker // We'll access the attributes we want to use with the template feature.opts.<name_of_attribute> // This differs a little bit from most GeoJSON in that attributes are usually accessed through feature.properties.<name_of_attribute> // Set initial map extent to the bounds of the marker layer // This way we'll all of our markers when we open the map! //Options for our table // What's the data (gData) we'll pass to our table? // Where will we be placing the table in our website? // What element will act as the filter for table? // put data into table using our table options // create filter using table options // TABLE CLICK // Use jQuery w/ Sheetsee so that when you click on a place in the table, the map zooms to the location and the infopane updates //TABLE // Clear the styling in the table for the previously selected row // Select the row of the location clicked in the table // Add styling to the selected row // Sets a variable that is only the data for the selected row // This used to update the map positions and the infopane //MAP // Gets the coordinates of the selected row // Set the map view to the selected row's coordinates (w/ fixed zoom level)) // INFOPANE // Fits the selected row attributes to the infopane template (selectedBeer) // Adds the filled template as HTML to infopane // MAP MARKER CLICK // Add click listener to the markerLayer // TABLE // clear any selected rows // get row number of selected marker // find that row in the table and make consider it selected // Sets a variable that is only the data for the selected row // This used to update the map positions and the infopane // take those details and re-write the selected spot section // MAP // center the map on the selected element // INFOPANE // update the spot listing // resets the map to the extent of the feature layer when you click the reset map button // TABLE // Clear whatever row is selected of the .selectedRow style // INFOPANE // Clear the infopane of the info about the most recently selected beer place // MAP // Center map and set zoom to include all the markers