Leaflet Map linked to Google Spreadsheet (on Click) v1

index.html

<div id="map"></div>
<ul class="list"></ul>

leaflet-map-linked-to-google-spreadsheet-on-click-v1.markdown

Leaflet Map linked to Google Spreadsheet (on Click) v1

Using a Google Spreadsheet as a database for a Leaflet Map. If an item on the list is clicked, the linked marker content will appear.

Adapted from http://sandbox.idre.ucla.edu/sandbox/general/databasing-google-spreadsheets-to-json

A Pen by Tiffany Ong on CodePen.

License.

script.js

var map;
var markers = [];
 
$(function() {
	// create a map in the "map" div
map = L.map('map')
/* Use instead of var group to override marker bounds, set the view to a given place and zoom
map = L.map('map').setView([55.0467238,-12.3963485], 10); */
 
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
       attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
	}).addTo(map);
 
	// map google data
	getGoogleData();
});
 
function getGoogleData()
{
	var spreadsheetID = '1ctHA5UmH9ZmrXugYFe_DHBOr9wJHRYkHCHim8nh1Tg8';
	var worksheetID = 'od6';
	var url = 'https://spreadsheets.google.com/feeds/list/'+spreadsheetID+'/'+worksheetID+'/public/values?alt=json';
 
$.getJSON(url,function(data){
$.each(data.feed.entry,function(i,val){

      
// This sets the markers and the content of the pop ups
var markerX = L.marker([val.gsx$lat.$t, val.gsx$lng.$t], {title: "marker_"+ i}).addTo(map)
    .bindPopup('<h2>' + val.gsx$markertitle.$t + '</h2>' + val.gsx$markercontent.$t + '<img src="'+ val.gsx$markerimage.$t + '" />');
// push marker into an array
markers.push(markerX);

//on marker click corresponding list item highlights
markerX.on('click', function(e){
    $('li#marker_' + i).css('background-color', 'gray');
  }); 
//on marker mouseout corresponding list item returns to normal  
markerX.on('mouseout', function(e){
    $('li#marker_' + i).css('background-color', '');
  });
  
  
  
//link list to the markers
function markerFunction(id){
    for (var i in markers){
        var markerID = markers[i].options.title;
        if (markerID == id){
            markers[i].openPopup();
        };
    }
}
$("li").click(function(){
    markerFunction($(this)[0].id);
});
        
 
// This sets the list items 
$(".list").append('<li id=\"marker_' + i + '\" data-zoom=\"6\" data-position=\"' + val.gsx$lat.$t + ', ' + val.gsx$lng.$t + '\">' + val.gsx$listtitle.$t + '</li>');
});  

    
    
// put markers into a group to 
var group = L.featureGroup(markers).addTo(map);
map.fitBounds(group.getBounds());
})
   
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

style.css

#map { width:80%; height: 400px; float: left;}

li{
  cursor: pointer;
  -webkit-transition: background-color 1s ease-out;
  -moz-transition: background-color 1s ease-out;
  -o-transition: background-color 1s ease-out;
  transition: background-color 1s ease-out;
}

li:hover{
  background-color: rgba(192, 192, 192, 1);
  cursor: pointer;
  -webkit-transition: background-color 1s ease-out;
  -moz-transition: background-color 1s ease-out;
  -o-transition: background-color 1s ease-out;
  transition: background-color 1s ease-out;
}

styles

<link href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" rel="stylesheet" />