Last active
August 29, 2015 14:14
-
-
Save burritojustice/2b38da5955fc3e73dd2f to your computer and use it in GitHub Desktop.
Bikes to Books, div space on top of page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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 ©<a href="http://stamen.com">Stamen</a> (<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>)/Data ©<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