Skip to content

Instantly share code, notes, and snippets.

@burritojustice
Last active August 29, 2015 14:14
Show Gist options
  • Save burritojustice/2b38da5955fc3e73dd2f to your computer and use it in GitHub Desktop.
Save burritojustice/2b38da5955fc3e73dd2f to your computer and use it in GitHub Desktop.
Bikes to Books, div space on top of page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<title>San Francisco Bikes to Books -- a Map by Nicole Gluckstern and Burrito Justice</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
<link rel="stylesheet" href="Icon.Label.css" />
<link rel="stylesheet" href="author-map.css" />
<style>
body,
html {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.header > .container {
padding-right: 15px;
padding-left: 15px;
}
.header {
position: absolute;
top: 0;
width: 100%;
/* Set the fixed height of the header here */
height: 40px;
font: 12px "Helvetica", Arial;
background-color: #f5f5f5;
opacity: .8;
text-align: center;
vertical-align: middle;
text-shadow: 1px 1px #FFF;
display: table-cell;
overflow-y: auto;
}
</style>
</head>
<body>
<div id="map"></div>
<div class="container">
<header class="header">
<p align=center width=500px class="text-muted"> <a href="http://burritojustice.com/bikes-to-books-map/">Bikes to Books</a> -- a map to 13 San Francisco streets</p>
</header>
</div>
<div id="loadingScreen"></div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
<script src="Icon.Label.js"></script>
<script src="Icon.Label.Default.js"></script>
<script type="text/javascript" src="tabletop.js"></script>
<script type="text/javascript">
//<link rel="stylesheet" href="leaflet.label.css" />
//<script src="leaflet.label.js">
var map,
route,
routeColor = stopColor = '#c00',
circles = new L.layerGroup(),
images = new L.layerGroup(),
menu,
weights = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1.5, 2, 2, 5, 6, 8, 10, 12];
$(document).ready(function() {
var bounds = new L.LatLngBounds([
[37.77532815168286, -122.42511749267578],
[37.81039424557001, -122.39198684692384]
]);
//Initialize the map
map = L.map('map', {
minZoom: 14,
maxZoom: 18,
});
resetView();
map.setZoom(15);
function onLocationFound(e) {
var mylatlon = e.latlng
var radius = e.accuracy / 2;
// L.marker(e.latlng).addTo(map)
// .bindPopup("You are within " + radius + " meters from this point").openPopup();
L.circle(e.latlng, radius).addTo(map);
}
map.on('locationfound', onLocationFound);
map.locate({
setView: false,
maxZoom: 16
});
route = new L.MultiPolyline([], {
weight: weights[map.getZoom()],
color: routeColor,
opacity: 0.7
}).addTo(map);
circles.addTo(map);
images.addTo(map);
//Background tiles (maybe switch to terrain-lines or toner)?
L.tileLayer('http://{s}.sm.mapstack.stamen.com/(terrain-background,toner-lite%5B%4020%5D)/{z}/{x}/{y}.png', {
attribution: 'Map tiles &copy;<a href="http://stamen.com">Stamen</a> (<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>)/Data &copy;<a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contribs(<a href="http://opendatacommons.org/licenses/odbl/">ODbL</a>)/By <a href="http://burritojustice.com/bikes-to-books-map/">Gluckstern,Burrito Justice</a>',
subdomains: 'abcd'
}).addTo(map);
//On zoom end, resize all the polylines to match new tile zoom
map.on('zoomend', function(e) {
var z = map.getZoom();
route.setStyle({
weight: weights[z]
});
});
//Info box in upper-right corner
menu = L.control();
menu.options.position = "topright";
menu.onAdd = function(map) {
this._div = L.DomUtil.create("div", "controlWhite info");
L.DomEvent.disableClickPropagation(this._div);
this._div.innerHTML = "";
return this._div;
};
menu.addTo(map);
Tabletop.init({
key: '0Ao4fxxV3Xzd_dFgyb2h0eTVnaXVaa3JhampablJkcFE',
callback: mapLoaded
});
});
function mapLoaded(data, tabletop) {
var routeSegments = [];
$.each(data.Route.elements, function(i, row) {
routeSegments.push([
[parseFloat(row.startlatitude), parseFloat(row.startlongitude)],
[parseFloat(row.endlatitude), parseFloat(row.endlongitude)]
]);
});
route.setLatLngs(routeSegments);
var list = $("<ol></ol>");
$.each(data.Stops.elements, function(i, row) {
var center = [parseFloat(row.latitude), parseFloat(row.longitude)];
var newDiv = $("<li></li>");
var newLink = $('<a href="#">' + row.authorname + '</a>').click(function() {
map.setView(center, Math.max(16, map.getZoom()));
$("div.info li.active").removeClass("active");
$(this).parent().addClass("active");
return false;
}).appendTo(newDiv);
newDiv.appendTo(list);
if (row.authorname == "Frank Norris") {
var authorIcon = L.Icon.Label.extend({
options: {
iconUrl: row.imagefilename,
shadowUrl: null,
iconSize: new L.Point(36, 36),
iconAnchor: new L.Point(0, 0),
labelAnchor: new L.Point(-100, 5),
wrapperAnchor: new L.Point(18, 18),
popupAnchor: [0, 0]
}
});
} else if (row.authorname == "Jack Kerouac") {
var authorIcon = L.Icon.Label.extend({
options: {
iconUrl: row.imagefilename,
shadowUrl: null,
iconSize: new L.Point(36, 36),
iconAnchor: new L.Point(0, 0),
labelAnchor: new L.Point(-15, 35),
wrapperAnchor: new L.Point(18, 18),
popupAnchor: [0, 0]
}
});
} else if (row.authorname == "Benny Bufano") {
var authorIcon = L.Icon.Label.extend({
options: {
iconUrl: row.imagefilename,
shadowUrl: null,
iconSize: new L.Point(36, 36),
iconAnchor: new L.Point(0, 0),
labelAnchor: new L.Point(-110, 5),
wrapperAnchor: new L.Point(18, 18),
popupAnchor: [0, 0]
}
});
} else if (row.authorname == "Lawrence Ferlinghetti") {
var authorIcon = L.Icon.Label.extend({
options: {
iconUrl: row.imagefilename,
shadowUrl: null,
iconSize: new L.Point(36, 36),
iconAnchor: new L.Point(0, 0),
labelAnchor: new L.Point(-155, 5),
wrapperAnchor: new L.Point(18, 18),
popupAnchor: [0, 0]
}
});
} else if (row.authorname == "Kenneth Rexroth") {
var authorIcon = L.Icon.Label.extend({
options: {
iconUrl: row.imagefilename,
shadowUrl: null,
iconSize: new L.Point(36, 36),
iconAnchor: new L.Point(0, 0),
labelAnchor: new L.Point(-130, 5),
wrapperAnchor: new L.Point(18, 18),
popupAnchor: [0, 0]
}
});
} else if (row.authorname == "Mars Hotel") {
var authorIcon = L.Icon.Label.extend({
options: {
iconUrl: row.imagefilename,
shadowUrl: null,
iconSize: new L.Point(36, 36),
iconAnchor: new L.Point(0, 0),
labelAnchor: new L.Point(-90, 5),
wrapperAnchor: new L.Point(18, 18),
popupAnchor: [0, 0]
}
});
} else if (row.authorname == "SF Examiner") {
var authorIcon = L.Icon.Label.extend({
options: {
iconUrl: row.imagefilename,
shadowUrl: null,
iconSize: new L.Point(36, 36),
iconAnchor: new L.Point(0, 0),
labelAnchor: new L.Point(-35, 35),
wrapperAnchor: new L.Point(18, 18),
popupAnchor: [0, 0]
}
});
} else if (row.authorname == "Isadora Duncan") {
var authorIcon = L.Icon.Label.extend({
options: {
iconUrl: row.imagefilename,
shadowUrl: null,
iconSize: new L.Point(36, 36),
iconAnchor: new L.Point(0, 0),
labelAnchor: new L.Point(40, -5),
wrapperAnchor: new L.Point(18, 18),
popupAnchor: [0, 0]
}
});
} else if (row.authorname == "Maltese Falcon") {
var authorIcon = L.Icon.Label.extend({
options: {
iconUrl: row.imagefilename,
shadowUrl: null,
iconSize: new L.Point(36, 36),
iconAnchor: new L.Point(0, 0),
labelAnchor: new L.Point(-40, 35),
wrapperAnchor: new L.Point(18, 18),
popupAnchor: [0, 0]
}
});
} else if (row.authorname == "Dashiell Hammett") {
var authorIcon = L.Icon.Label.extend({
options: {
iconUrl: row.imagefilename,
shadowUrl: null,
iconSize: new L.Point(36, 36),
iconAnchor: new L.Point(0, 0),
labelAnchor: new L.Point(-125, 5),
wrapperAnchor: new L.Point(18, 18),
popupAnchor: [0, 0]
}
});
} else if (row.authorname == "Frank Norris' home") {
var authorIcon = L.Icon.Label.extend({
options: {
iconUrl: row.imagefilename,
shadowUrl: null,
iconSize: new L.Point(36, 36),
iconAnchor: new L.Point(0, 0),
labelAnchor: new L.Point(-135, 5),
wrapperAnchor: new L.Point(18, 18),
popupAnchor: [0, 0]
}
});
} else if (row.authorname == "Richard Henry Dana") {
var authorIcon = L.Icon.Label.extend({
options: {
iconUrl: row.imagefilename,
shadowUrl: null,
iconSize: new L.Point(36, 36),
iconAnchor: new L.Point(0, 0),
labelAnchor: new L.Point(-145, 5),
wrapperAnchor: new L.Point(18, 18),
popupAnchor: [0, 0]
}
});
} else if (row.authorname == "28 Harwood") {
var authorIcon = L.Icon.Label.extend({
options: {
iconUrl: row.imagefilename,
shadowUrl: null,
iconSize: new L.Point(36, 36),
iconAnchor: new L.Point(0, 0),
labelAnchor: new L.Point(-25, -30),
wrapperAnchor: new L.Point(18, 18),
popupAnchor: [0, 0]
}
});
} else if (row.authorname == "Izzy Gomez Cafe") {
var authorIcon = L.Icon.Label.extend({
options: {
iconUrl: row.imagefilename,
shadowUrl: null,
iconSize: new L.Point(36, 36),
iconAnchor: new L.Point(0, 0),
labelAnchor: new L.Point(-115, 5),
wrapperAnchor: new L.Point(18, 18),
popupAnchor: [0, 0]
}
});
} else if (row.authorname == "City Lights") {
var authorIcon = L.Icon.Label.extend({
options: {
iconUrl: row.imagefilename,
shadowUrl: null,
iconSize: new L.Point(36, 36),
iconAnchor: new L.Point(0, 0),
labelAnchor: new L.Point(-25, -30),
wrapperAnchor: new L.Point(18, 18),
popupAnchor: [0, 0]
}
});
} else if (row.authorname == "The Wasp") {
var authorIcon = L.Icon.Label.extend({
options: {
iconUrl: row.imagefilename,
shadowUrl: null,
iconSize: new L.Point(36, 36),
iconAnchor: new L.Point(0, 0),
labelAnchor: new L.Point(-85, 5),
wrapperAnchor: new L.Point(18, 18),
popupAnchor: [0, 0]
}
});
} else if (row.authorname == "Ambrose Bierce's home") {
var authorIcon = L.Icon.Label.extend({
options: {
iconUrl: row.imagefilename,
shadowUrl: null,
iconSize: new L.Point(36, 36),
iconAnchor: new L.Point(0, 0),
labelAnchor: new L.Point(-160, 5),
wrapperAnchor: new L.Point(18, 18),
popupAnchor: [0, 0]
}
});
} else if (row.authorname == "Montgomery Block") {
var authorIcon = L.Icon.Label.extend({
options: {
iconUrl: row.imagefilename,
shadowUrl: null,
iconSize: new L.Point(36, 36),
iconAnchor: new L.Point(0, 0),
labelAnchor: new L.Point(40, 35),
wrapperAnchor: new L.Point(18, 18),
popupAnchor: [0, 0]
}
});
} else if (row.authorname == "Mark Twain") {
var authorIcon = L.Icon.Label.extend({
options: {
iconUrl: row.imagefilename,
shadowUrl: null,
iconSize: new L.Point(36, 36),
iconAnchor: new L.Point(0, 0),
labelAnchor: new L.Point(40, 0),
wrapperAnchor: new L.Point(18, 18),
popupAnchor: [0, 0]
}
});
} else if (row.authorname == "Samuel Clemens' home") {
var authorIcon = L.Icon.Label.extend({
options: {
iconUrl: row.imagefilename,
shadowUrl: null,
iconSize: new L.Point(36, 36),
iconAnchor: new L.Point(0, 0),
labelAnchor: new L.Point(40, -5),
wrapperAnchor: new L.Point(18, 18),
popupAnchor: [0, 0]
}
});
} else {
var authorIcon = L.Icon.Label.extend({
options: {
iconUrl: row.imagefilename,
shadowUrl: null,
iconSize: new L.Point(36, 36),
iconAnchor: new L.Point(0, 0),
labelAnchor: new L.Point(40, 5),
wrapperAnchor: new L.Point(18, 18),
popupAnchor: [0, 0]
}
});
}
// var proximity = mylatlon.distanceTo(center);
var marker = new L.Marker(center, {
icon: new authorIcon({
labelText: row.authorname
})
});
var popup = L.popup()
.setLatLng(center)
.setContent(row.description);
marker.on('click', function(e) {
popup.openOn(map);
});
marker.addTo(map);
});
list.appendTo(menu._div);
$("div#loadingScreen").hide();
}
function resetView() {
//Fit bounds instead of manually setting a view, more responsive that way
map.fitBounds([
[37.77682066490566, -122.4209976196289],
[37.800289863702076, -122.37958431243896]
]);
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment