Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Leaflet Map linked to Google Spreadsheet (on Click) v1
<div id="map"></div>
<ul class="list"></ul>
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());
})
}
<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>
#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;
}
<link href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.