Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
move dev / internal data to index2.html
- Loading branch information
Showing
4 changed files
with
321 additions
and
17 deletions.
There are no files selected for viewing
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,122 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8"/> | ||
<title>Boston Bike Network Plan</title> | ||
<link rel="stylesheet" href="static/leaflet.css" /> | ||
<!--[if lte IE 8]> | ||
<link rel="stylesheet" href="static/leaflet.ie.css" /> | ||
<![endif]--> | ||
<link rel="stylesheet" type="text/css" href="static/slider.css"/> | ||
<link rel="stylesheet" type="text/css" href="static/style2.css"/> | ||
</head> | ||
<body> | ||
<div id="map"> | ||
<div class="overlay-left"> | ||
<h3>Boston Bike Network Plan</h3> | ||
<h4> | ||
<img id="bikesymbol" src="static/regbike.png"/> | ||
<span id="year">2013</span> | ||
</h4> | ||
<div id="yearslider"> | ||
</div> | ||
<br/> | ||
<small>Drag the slider to map existing and planned routes</small> | ||
<!-- | ||
<button id="seeplanned5" class="btn btn-primary">5 Year Plan</button> | ||
<br/> | ||
<button id="seeplanned30" class="btn btn-primary">30 Year Plan</button> | ||
--> | ||
</div> | ||
<div class="overlay-left lower"> | ||
<h4>Layers</h4> | ||
<span id="shareduse" class="thinkey mainkey" title="">_</span> | ||
<span id="protected" class="thinkey mainkey" title="">_</span> | ||
<span id="exclusive" class="thinkey mainkey" title="">_</span> | ||
<span id="sharedroad" class="thinkey mainkey" title="">_</span> | ||
<span id="sharedlane" class="thinkey mainkey" title="">_</span> | ||
<span id="recommended" class="thinkey mainkey" title="">_</span> | ||
|
||
<span id="primaryrt" class="thinkey primarykey" title="">_</span> | ||
<span id="secondaryrt" class="thinkey primarykey" title="">_</span> | ||
|
||
<div id="imagery" class="layer"> | ||
<div class="layer-symbol">_</div> | ||
<span class="layer-label">Aerial Photo</span> | ||
</div> | ||
<div id="mbta" class="layer"> | ||
<div class="layer-symbol">_</div> | ||
<span class="layer-label">MBTA Stations</span> | ||
</div> | ||
<div id="hubway" class="layer"> | ||
<div class="layer-symbol">_</div> | ||
<span class="layer-label">Hubway Stations</span> | ||
</div> | ||
<div id="primary" class="layer"> | ||
<div class="layer-symbol">_</div> | ||
<span class="layer-label">Primary and Secondary Routes</span> | ||
</div> | ||
<input id="searchbox" class="searchbox" type="text" placeholder="Find Street" onkeydown="checkForEnter(event)"/> | ||
<input class="searchbtn" type="button" value="Search" onclick="streetSearch()"/> | ||
<br/> | ||
<br/> | ||
<!-- | ||
<div class="layer"> | ||
<div class="layer-symbol">_</div> | ||
<span class="layer-label">Neighborhood Centers</span> | ||
</div> | ||
<div class="layer"> | ||
<div class="layer-symbol">_</div> | ||
<span class="layer-label">Projects Underway</span> | ||
</div> | ||
--> | ||
<a href="http://www.cityofboston.gov"> | ||
<img src="static/bostonseal.png" style="height:70px;"/> | ||
</a> | ||
<a href="http://www.cityofboston.gov/bikes/"> | ||
<img src="static/boston-bikes-box-logo.png" style="height:70px;"/> | ||
</a> | ||
<br/> | ||
<br/> | ||
<a href="http://www.surveymonkey.com/s/BosBikeNetwork" target="_blank"> | ||
<button id="comments" class="btn btn-primary">Comments</button> | ||
</a> | ||
<br/> | ||
<a href="http://www.cityofboston.gov/bikes/BikeNetwork/" target="_blank"> | ||
<button id="readplan" class="btn btn-primary">Read the Plan</button> | ||
</a> | ||
</div> | ||
</div> | ||
|
||
<script type="text/javascript" src="static/leaflet.js"></script> | ||
|
||
<script type="text/javascript" src="static/jquery-1.9.1.js"></script> | ||
<script type="text/javascript" src="static/jquery-ui.js"></script> | ||
|
||
<!--[if lte IE 9]> | ||
<script type="text/javascript" src="static/json3.min.js"></script> | ||
<![endif]--> | ||
|
||
<script type="text/javascript" src="static/esri-leaflet.min.js?v=2"></script> | ||
<script type="text/javascript" src="static/bike-map.js?v=5"></script> | ||
|
||
<!-- | ||
Icons CC-BY | ||
Tricycle: CC0 | ||
Training Wheels: Ribbla Team, from The Noun Project | ||
Bicycle: Public domain | ||
Trail-a-Bike and Cardo Bike: Boston Bikes | ||
--> | ||
|
||
<script type="text/javascript"> | ||
var _gaq = _gaq || []; | ||
_gaq.push(['_setAccount', 'UA-3838275-6']); | ||
_gaq.push(['_trackPageview']); | ||
(function() { | ||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; | ||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; | ||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); | ||
})(); | ||
</script> | ||
</body> | ||
</html> |
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,198 @@ | ||
html, body, #map{ | ||
width: 100%; | ||
height: 100%; | ||
margin: 0; | ||
padding: 0; | ||
font-family: arial, sans-serif; | ||
background-color: #fff; | ||
} | ||
.overlay-left{ | ||
z-index: 100; | ||
position: absolute; | ||
left: 20px; | ||
top: 18px; | ||
background-color: #fff; | ||
padding: 15px; | ||
padding-top: 0; | ||
text-align: center; | ||
width: 180px; | ||
border: 2px solid #aaa; | ||
} | ||
#bikesymbol{ | ||
width: 80px; | ||
height: 46px; | ||
vertical-align: middle; | ||
margin-right: 5px; | ||
} | ||
#bikesymbol.future{ | ||
width: 90px; | ||
margin-left: -10px; | ||
} | ||
#year{ | ||
vertical-align: middle; | ||
} | ||
.lower{ | ||
top: 227px; | ||
padding-top: 0; | ||
padding-bottom: 0; | ||
} | ||
.layer{ | ||
text-align: left; | ||
margin: 8px 0px; | ||
cursor: pointer; | ||
padding: 2px 0px; | ||
font-size: 8pt; | ||
} | ||
.layer:hover{ | ||
background: rgb(210, 210, 210); | ||
} | ||
.layer-select{ | ||
background: #CCDEFF; | ||
} | ||
.layer-select:hover{ | ||
background: rgb(175, 175, 175); | ||
} | ||
.layer-symbol{ | ||
visibility: hidden; | ||
display: inline; | ||
padding: 4px 5px 4px 0; | ||
} | ||
.layer-select .layer-symbol{ | ||
visibility: visible; | ||
background: #009fd0; | ||
color: #009fd0; | ||
} | ||
.layer-label{ | ||
margin-left: 5px; | ||
color: rgb(38, 38, 38); | ||
} | ||
button { | ||
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #4197ee) ); | ||
background:-moz-linear-gradient( center top, #79bbff 5%, #4197ee 100% ); | ||
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#4197ee'); | ||
background-color:#79bbff; | ||
text-indent:0; | ||
border:1px solid #469df5; | ||
display:inline-block; | ||
color:#ffffff; | ||
font-size:13px; | ||
font-style:normal; | ||
height:30px; | ||
text-decoration:none; | ||
text-align:center; | ||
text-shadow:1px 1px 0px #287ace; | ||
margin-bottom: 5px; | ||
cursor: pointer; | ||
} | ||
button:hover { | ||
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4197ee), color-stop(1, #79bbff) ); | ||
background:-moz-linear-gradient( center top, #4197ee 5%, #79bbff 100% ); | ||
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4197ee', endColorstr='#79bbff'); | ||
background-color:#4197ee; | ||
} | ||
button:active { | ||
position:relative; | ||
top:1px; | ||
} | ||
|
||
.leaflet-tile-pane{ | ||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; | ||
filter: alpha(opacity=75); | ||
-moz-opacity: 0.75; | ||
-khtml-opacity: 0.75; | ||
-webkit-opacity: 0.75; | ||
opacity: 0.75; | ||
} | ||
.leaflet-tile-pane.grayout{ | ||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | ||
filter: alpha(opacity=100); | ||
-moz-opacity: 1; | ||
-khtml-opacity: 1; | ||
-webkit-opacity: 1; | ||
opacity: 1; | ||
} | ||
.grayout .leaflet-tile{ | ||
filter: url(filters.svg#grayscale); | ||
filter: gray; | ||
-webkit-filter: grayscale(1); | ||
} | ||
.thinkey{ | ||
padding: 0px 8px; | ||
font-size: 14px; | ||
cursor: pointer; | ||
} | ||
#shareduse{ | ||
color: #4b9222; | ||
background-color: #4b9222; | ||
} | ||
#protected{ | ||
color: rgb(172,35,141); | ||
background-color: rgb(172,35,141); | ||
} | ||
#exclusive{ | ||
color: rgb(32,120,180); | ||
background-color: rgb(32,120,180); | ||
} | ||
#sharedroad{ | ||
color: rgb(107,207,50); | ||
background-color: rgb(107,207,50); | ||
} | ||
#sharedlane{ | ||
color: rgb(166,206,227); | ||
background-color: rgb(166,206,227); | ||
} | ||
#recommended{ | ||
color: #FDE68C; | ||
background-color: #FDE68C; | ||
} | ||
.shareduse{ | ||
color: #4b9222; | ||
} | ||
.protected{ | ||
color: rgb(172,35,141); | ||
} | ||
.exclusive{ | ||
color: rgb(32,120,180); | ||
} | ||
.sharedroad{ | ||
color: rgb(107,207,50); | ||
} | ||
.sharedlane{ | ||
color: rgb(166,206,227); | ||
} | ||
.recommended{ | ||
color: #DDC66C; | ||
} | ||
.primarykey{ | ||
display: none; | ||
} | ||
#primaryrt{ | ||
background-color: "orange"; | ||
color: "orange"; | ||
} | ||
#secondaryrt{ | ||
background-color: "#aaa"; | ||
color: "#aaa"; | ||
} | ||
.primaryrt{ | ||
color: "orange"; | ||
} | ||
.secondaryrt{ | ||
color: "#aaa"; | ||
} | ||
a{ | ||
text-decoration: none; | ||
} | ||
a img{ | ||
border: none; | ||
} | ||
.lower h4{ | ||
margin-bottom: 0; | ||
} | ||
.searchbox{ | ||
display: inline; | ||
width: 100px; | ||
} | ||
.searchbtn{ | ||
display: inline; | ||
} |