52 lines
2.1 KiB
HTML
52 lines
2.1 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
|
<script type="text/javascript" src="js/tabletop1.3.4.js"></script>
|
|
<script type="text/javascript" src="js/sheetsee.js"></script>
|
|
<link type='text/css' rel='stylesheet' href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.css'>
|
|
<!-- Add a Title -->
|
|
<title>Map</title>
|
|
</head>
|
|
<style>
|
|
html {width: 100%; height: 100%;}
|
|
body {width: 100%; height: 100%; margin: 0;}
|
|
/* How about a different background color? */
|
|
#map {width: 100%; height: 100%; background-color: #F7CE86;}
|
|
.leaflet-popup-content li {list-style:none;}
|
|
.leaflet-popup-content {width: 102px;}
|
|
.leaflet-popup-content img {width: 100px;}
|
|
a {border: none;}
|
|
</style>
|
|
<body>
|
|
<div id="map"></div>
|
|
|
|
<script type="text/javascript">
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// see how what the example spreadsheet looks like:
|
|
// https://docs.google.com/spreadsheet/lv?key=0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc
|
|
var URL = "0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc"
|
|
Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
|
|
})
|
|
|
|
function showInfo(data) {
|
|
// the column headers of the info you want in your popup
|
|
var optionsJSON = ["placename", "photo-url"]
|
|
// an html template for your popup
|
|
var template = "<ul><li><a href='{{photo-url}}' target='_blank'>"
|
|
+ "<img src='{{photo-url}}'></a></li>"
|
|
+ "<li><h4>{{placename}}</h4></li></ul>"
|
|
var geoJSON = Sheetsee.createGeoJSON(data, optionsJSON)
|
|
var map = Sheetsee.loadMap("map")
|
|
// Try different map tiles? examples.map-20v6611k
|
|
// examples.map-y7l23tes
|
|
// examples.map-h67hf2ic
|
|
// examples.map-i86nkdio
|
|
// examples.h186knp8
|
|
Sheetsee.addTileLayer(map, 'examples.map-i86nkdio')
|
|
Sheetsee.addMarkerLayer(geoJSON, map, template)
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|