playground
/
TimelineJS
mirror of https://github.com/NUKnightLab/TimelineJS.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Included a map attribution on Google Maps

pull/33/merge
Zach Wise 13 years ago
parent
c8aa6644a3
commit
c7dae18c2c
6 changed files with 223 additions and 98 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 97
      source/js/VMM.js
  2. 36
      source/less/slider.less
  3. 69
      timeline-dark.css
  4. 2
      timeline-min.js
  5. 16
      timeline.css
  6. 97
      timeline.js

97
source/js/VMM.js
Unescape View File

@ -1744,55 +1744,70 @@ if (typeof VMM == 'undefined') {
}
},
stamen_map_attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ' +
'under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. ' +
'Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, ' +
'under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.',
map_subdomains: ["", "a.", "b.", "c.", "d."],
map_attribution: {
"stamen": "Map tiles by <a href='http://stamen.com'>Stamen Design</a>, under <a href='http://creativecommons.org/licenses/by/3.0'>CC BY 3.0</a>. Data by <a href='http://openstreetmap.org'>OpenStreetMap</a>, under <a href='http://creativecommons.org/licenses/by-sa/3.0'>CC BY SA</a>.",
"apple": "Map data &copy; 2012 Apple, Imagery &copy; 2012 Apple"
},
map_providers: {
"toner": {
"url": "http://{S}tile.stamen.com/toner/{Z}/{X}/{Y}.png",
"minZoom": 0,
"maxZoom": 20
},
"toner-lines": {
"url": "http://{S}tile.stamen.com/toner-lines/{Z}/{X}/{Y}.png",
"minZoom": 0,
"maxZoom": 20
},
"toner-labels": {
"url": "http://{S}tile.stamen.com/toner-labels/{Z}/{X}/{Y}.png",
"minZoom": 0,
"maxZoom": 20
},
"sterrain": {
"url": "http://{S}tile.stamen.com/terrain/{Z}/{X}/{Y}.jpg",
"minZoom": 4,
"maxZoom": 18
},
"url": "http://{S}tile.stamen.com/toner/{Z}/{X}/{Y}.png",
"minZoom": 0,
"maxZoom": 20,
"attribution": "stamen"
},
"toner-lines": {
"url": "http://{S}tile.stamen.com/toner-lines/{Z}/{X}/{Y}.png",
"minZoom": 0,
"maxZoom": 20,
"attribution": "stamen"
},
"toner-labels": {
"url": "http://{S}tile.stamen.com/toner-labels/{Z}/{X}/{Y}.png",
"minZoom": 0,
"maxZoom": 20,
"attribution": "stamen"
},
"sterrain": {
"url": "http://{S}tile.stamen.com/terrain/{Z}/{X}/{Y}.jpg",
"minZoom": 4,
"maxZoom": 20,
"attribution": "stamen"
},
"apple": {
"url": "http://gsp2.apple.com/tile?api=1&style=slideshow&layers=default&lang=en_US&z={z}&x={x}&y={y}&v=9",
"minZoom": 4,
"maxZoom": 18
},
"watercolor": {
"url": "http://{S}tile.stamen.com/watercolor/{Z}/{X}/{Y}.jpg",
"minZoom": 3,
"maxZoom": 16
}
"url": "http://gsp2.apple.com/tile?api=1&style=slideshow&layers=default&lang=en_US&z={z}&x={x}&y={y}&v=9",
"minZoom": 4,
"maxZoom": 20,
"attribution": "apple"
},
"watercolor": {
"url": "http://{S}tile.stamen.com/watercolor/{Z}/{X}/{Y}.jpg",
"minZoom": 3,
"maxZoom": 16,
"attribution": "stamen"
}
},
createMap: function(m) {
trace(VMM.ExternalAPI.googlemaps.stamen_map_attribution);
/* MAP PROVIDERS
Including Stamen Maps
http://maps.stamen.com/
Except otherwise noted, each of these map tile sets are © Stamen Design, under a Creative Commons Attribution (CC BY 3.0) license.
================================================== */
var map_attribution = "";
function mapProvider(name) {
if (name in VMM.ExternalAPI.googlemaps.map_providers) {
map_attribution = VMM.ExternalAPI.googlemaps.map_attribution[VMM.ExternalAPI.googlemaps.map_providers[name].attribution];
return VMM.ExternalAPI.googlemaps.map_providers[name];
} else {
throw 'No such provider: "' + name + '"';
@ -1875,9 +1890,23 @@ if (typeof VMM == 'undefined') {
}
}
var map = new google.maps.Map(document.getElementById(m.id), map_options);
var unique_map_id = m.id.toString() + "_gmap";
VMM.attachElement("#" + m.id, "<div class='google-map' id='" + unique_map_id + "' style='width=100%;height=100%;'></div>");
/* ATTRIBUTION
================================================== */
//var map_attribution_html = "<div class='map-attribution'><div class='attribution-text'>" + map_attribution + "</div></div>";
//VMM.appendElement("#" + m.id, map_attribution_html);
var map = new google.maps.Map(document.getElementById(unique_map_id), map_options);
map.mapTypes.set(layer, new google.maps.VeriteMapType(layer));
/* ATTRIBUTION
================================================== */
var map_attribution_html = "<div class='map-attribution'><div class='attribution-text'>" + map_attribution + "</div></div>";
VMM.appendElement("#"+unique_map_id, map_attribution_html);
//.map-attribution
//.attribution-text
loadKML();
/* KML

36
source/less/slider.less
Unescape View File

@ -231,6 +231,42 @@
max-height:none !important;
max-width:none !important;
}
.google-map {
height:100%;
width:100%;
}
.map-attribution {
position: absolute;
z-index: 1000003;
//right: 0px;
bottom: 0px;
width:100%;
overflow:hidden;
.attribution-text {
height: 19px;
overflow:hidden;
-webkit-user-select: none;
line-height: 19px;
margin-right: 60px;
padding-left: 65px;
font-family: Arial, sans-serif;
font-size: 10px;
//font-weight: bold;
color: #444;
white-space: nowrap;
color:@color-base;
text-shadow:1px 1px 1px @color-dark-second;
//direction: ltr;
text-align: center;
a {
color:@color-base !important;
}
}
}
}
}
.credit, .caption {
font-family: @font-sansserif;

69
timeline-dark.css
Unescape View File

@ -595,6 +595,12 @@
margin: 0px;
overflow: hidden;
display: table;
/* Text Only Slides
================================================== */
/* Media Only Slides
================================================== */
}
.slider .slider-item .content {
display: table-cell;
@ -605,12 +611,6 @@
/* All Slides
================================================== */
/* Text Only Slides
================================================== */
/* Media Only Slides
================================================== */
}
.slider .slider-item .content .content-container {
display: table;
@ -659,11 +659,40 @@
max-height: none !important;
max-width: none !important;
}
.slider .slider-item .content .content-container .media .media-wrapper .media-container .credit,
.slider .slider-item .content .content-container .media .media-wrapper .media-container .caption {
.slider .slider-item .content .content-container .media .media-wrapper .media-container .map .google-map {
height: 100%;
width: 100%;
}
.slider .slider-item .content .content-container .media .media-wrapper .media-container .map .map-attribution {
position: absolute;
z-index: 1000003;
bottom: 0px;
width: 100%;
overflow: hidden;
}
.slider .slider-item .content .content-container .media .media-wrapper .media-container .map .map-attribution .attribution-text {
height: 19px;
overflow: hidden;
-webkit-user-select: none;
line-height: 19px;
margin-right: 60px;
padding-left: 65px;
font-family: Arial, sans-serif;
font-size: 10px;
color: #444;
white-space: nowrap;
color: #1a1a1a;
text-shadow: 1px 1px 1px #aaaaaa;
text-align: center;
}
.slider .slider-item .content .content-container .media .media-wrapper .media-container .map .map-attribution .attribution-text a {
color: #1a1a1a !important;
}
.slider .slider-item .content .content-container .media .media-wrapper .credit,
.slider .slider-item .content .content-container .media .media-wrapper .caption {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.slider .slider-item .content .content-container .media .media-wrapper .media-container .credit {
.slider .slider-item .content .content-container .media .media-wrapper .credit {
color: #999999;
text-align: right;
font-size: 10px;
@ -672,25 +701,25 @@
margin: 0 auto;
margin-top: 4px;
}
.slider .slider-item .content .content-container .media .media-wrapper .media-container .caption {
.slider .slider-item .content .content-container .media .media-wrapper .caption {
text-align: left;
margin-top: 10px;
color: #aaaaaa;
font-size: 11px;
line-height: 14px;
}
.slider .slider-item .content .content-container .media.text-media .media-wrapper .media-container {
.slider .slider-item .content .media.text-media .media-wrapper .media-container {
border: none;
background-color: #1a1a1a;
}
.slider .slider-item .content .content-container.layout-text {
.slider .slider-item .content-container.layout-text {
width: 100%;
}
.slider .slider-item .content .content-container.layout-text .text {
.slider .slider-item .content-container.layout-text .text {
width: 100%;
max-width: 100%;
}
.slider .slider-item .content .content-container.layout-text .text .container {
.slider .slider-item .content-container.layout-text .text .container {
display: block;
vertical-align: middle;
text-align: left;
@ -700,32 +729,32 @@
margin-left: auto;
margin-right: auto;
}
.slider .slider-item .content .content-container.layout-media {
.slider .slider-item .content-container.layout-media {
width: 100%;
}
.slider .slider-item .content .content-container.layout-media .text {
.slider .slider-item .content-container.layout-media .text {
width: 100%;
height: 100%;
max-width: 100%;
display: block;
text-align: center;
}
.slider .slider-item .content .content-container.layout-media .text .container {
.slider .slider-item .content-container.layout-media .text .container {
display: block;
text-align: center;
width: 100%;
margin-left: none;
margin-right: none;
}
.slider .slider-item .content .content-container.layout-media .media {
.slider .slider-item .content-container.layout-media .media {
width: 100%;
min-width: 50%;
float: none;
}
.slider .slider-item .content .content-container.layout-media .media .media-wrapper {
.slider .slider-item .content-container.layout-media .media .media-wrapper {
display: block;
}
.slider .slider-item .content .content-container.layout-media .media .media-wrapper .media-container {
.slider .slider-item .content-container.layout-media .media .media-wrapper .media-container {
margin-left: auto;
margin-right: auto;
overflow: hidden;

2
timeline-min.js vendored
View File

File diff suppressed because one or more lines are too long

16
timeline.css
Unescape View File

@ -64,13 +64,15 @@
.slider .slider-item{position:absolute;width:700px;height:100%;padding:0px;margin:0px;overflow:hidden;display:table;}.slider .slider-item .content{display:table-cell;vertical-align:middle;}.slider .slider-item .content .content-container{display:table;vertical-align:middle;}.slider .slider-item .content .content-container .text{width:40%;max-width:50%;min-width:120px;display:table-cell;vertical-align:middle;}.slider .slider-item .content .content-container .text .container{display:table-cell;vertical-align:middle;text-align:left;padding-right:15px;}
.slider .slider-item .content .content-container .media{width:100%;min-width:50%;float:left;}.slider .slider-item .content .content-container .media .media-wrapper{margin-left:auto;margin-right:auto;}.slider .slider-item .content .content-container .media .media-wrapper .media-container{display:inline-block;overflow:hidden;line-height:0px;padding:0px;}.slider .slider-item .content .content-container .media .media-wrapper .media-container img,.slider .slider-item .content .content-container .media .media-wrapper .media-container iframe{border:1px solid #cccccc;}
.slider .slider-item .content .content-container .media .media-wrapper .media-container .map{line-height:normal;border:1px solid #cccccc;z-index:500;text-align:left;background-color:#ffffff;}.slider .slider-item .content .content-container .media .media-wrapper .media-container .map img{max-height:none !important;max-width:none !important;}
.slider .slider-item .content .content-container .media .media-wrapper .media-container .credit,.slider .slider-item .content .content-container .media .media-wrapper .media-container .caption{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}
.slider .slider-item .content .content-container .media .media-wrapper .media-container .credit{color:#999999;text-align:right;font-size:10px;line-height:10px;display:block;margin:0 auto;margin-top:4px;}
.slider .slider-item .content .content-container .media .media-wrapper .media-container .caption{text-align:left;margin-top:10px;color:#666666;font-size:11px;line-height:14px;}
.slider .slider-item .content .content-container .media.text-media .media-wrapper .media-container{border:none;background-color:#ffffff;}
.slider .slider-item .content .content-container.layout-text{width:100%;}.slider .slider-item .content .content-container.layout-text .text{width:100%;max-width:100%;}.slider .slider-item .content .content-container.layout-text .text .container{display:block;vertical-align:middle;text-align:left;padding:0px;width:60%;text-align:left;margin-left:auto;margin-right:auto;}
.slider .slider-item .content .content-container.layout-media{width:100%;}.slider .slider-item .content .content-container.layout-media .text{width:100%;height:100%;max-width:100%;display:block;text-align:center;}.slider .slider-item .content .content-container.layout-media .text .container{display:block;text-align:center;width:100%;margin-left:none;margin-right:none;}
.slider .slider-item .content .content-container.layout-media .media{width:100%;min-width:50%;float:none;}.slider .slider-item .content .content-container.layout-media .media .media-wrapper{display:block;}.slider .slider-item .content .content-container.layout-media .media .media-wrapper .media-container{margin-left:auto;margin-right:auto;overflow:hidden;line-height:0px;padding:0px;}
.slider .slider-item .content .content-container .media .media-wrapper .media-container .map .google-map{height:100%;width:100%;}
.slider .slider-item .content .content-container .media .media-wrapper .media-container .map .map-attribution{position:absolute;z-index:1000003;bottom:0px;width:100%;overflow:hidden;}.slider .slider-item .content .content-container .media .media-wrapper .media-container .map .map-attribution .attribution-text{height:19px;overflow:hidden;-webkit-user-select:none;line-height:19px;margin-right:60px;padding-left:65px;font-family:Arial,sans-serif;font-size:10px;color:#444;white-space:nowrap;color:#ffffff;text-shadow:1px 1px 1px #333333;text-align:center;}.slider .slider-item .content .content-container .media .media-wrapper .media-container .map .map-attribution .attribution-text a{color:#ffffff !important;}
.slider .slider-item .content .content-container .media .media-wrapper .credit,.slider .slider-item .content .content-container .media .media-wrapper .caption{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}
.slider .slider-item .content .content-container .media .media-wrapper .credit{color:#999999;text-align:right;font-size:10px;line-height:10px;display:block;margin:0 auto;margin-top:4px;}
.slider .slider-item .content .content-container .media .media-wrapper .caption{text-align:left;margin-top:10px;color:#666666;font-size:11px;line-height:14px;}
.slider .slider-item .content .media.text-media .media-wrapper .media-container{border:none;background-color:#ffffff;}
.slider .slider-item .content-container.layout-text{width:100%;}.slider .slider-item .content-container.layout-text .text{width:100%;max-width:100%;}.slider .slider-item .content-container.layout-text .text .container{display:block;vertical-align:middle;text-align:left;padding:0px;width:60%;text-align:left;margin-left:auto;margin-right:auto;}
.slider .slider-item .content-container.layout-media{width:100%;}.slider .slider-item .content-container.layout-media .text{width:100%;height:100%;max-width:100%;display:block;text-align:center;}.slider .slider-item .content-container.layout-media .text .container{display:block;text-align:center;width:100%;margin-left:none;margin-right:none;}
.slider .slider-item .content-container.layout-media .media{width:100%;min-width:50%;float:none;}.slider .slider-item .content-container.layout-media .media .media-wrapper{display:block;}.slider .slider-item .content-container.layout-media .media .media-wrapper .media-container{margin-left:auto;margin-right:auto;overflow:hidden;line-height:0px;padding:0px;}
#timeline .navigation{clear:both;cursor:move;width:100%;height:200px;border-top:1px solid #cccccc;position:relative;}#timeline .navigation .toolbar{position:absolute;top:45px;left:0px;z-index:1000;background-color:#ffffff;border:1px solid #cccccc;-webkit-box-shadow:1px 1px 0px rgba(0, 0, 0, 0.2);-moz-box-shadow:1px 1px 0px rgba(0, 0, 0, 0.2);box-shadow:1px 1px 0px rgba(0, 0, 0, 0.2);}#timeline .navigation .toolbar .zoom-in,#timeline .navigation .toolbar .zoom-out,#timeline .navigation .toolbar .back-home{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:10px;font-weight:normal;line-height:20px;top:0px;z-index:1000;width:18px;height:18px;color:#333333;text-align:center;font-weight:bold;border:1px solid #ffffff;padding:5px;filter:alpha(opacity=50);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;}
#timeline .navigation .toolbar .zoom-in:hover,#timeline .navigation .toolbar .zoom-out:hover,#timeline .navigation .toolbar .back-home:hover{color:#0088cc;cursor:pointer;filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;}
#timeline .navigation .toolbar .zoom-in .icon{background-image:url(timeline.png);background-repeat:no-repeat;background-position:0 -1507px;width:16px;height:16px;}

97
timeline.js
Unescape View File

@ -1744,55 +1744,70 @@ if (typeof VMM == 'undefined') {
}
},
stamen_map_attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ' +
'under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. ' +
'Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, ' +
'under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.',
map_subdomains: ["", "a.", "b.", "c.", "d."],
map_attribution: {
"stamen": "Map tiles by <a href='http://stamen.com'>Stamen Design</a>, under <a href='http://creativecommons.org/licenses/by/3.0'>CC BY 3.0</a>. Data by <a href='http://openstreetmap.org'>OpenStreetMap</a>, under <a href='http://creativecommons.org/licenses/by-sa/3.0'>CC BY SA</a>.",
"apple": "Map data &copy; 2012 Apple, Imagery &copy; 2012 Apple"
},
map_providers: {
"toner": {
"url": "http://{S}tile.stamen.com/toner/{Z}/{X}/{Y}.png",
"minZoom": 0,
"maxZoom": 20
},
"toner-lines": {
"url": "http://{S}tile.stamen.com/toner-lines/{Z}/{X}/{Y}.png",
"minZoom": 0,
"maxZoom": 20
},
"toner-labels": {
"url": "http://{S}tile.stamen.com/toner-labels/{Z}/{X}/{Y}.png",
"minZoom": 0,
"maxZoom": 20
},
"sterrain": {
"url": "http://{S}tile.stamen.com/terrain/{Z}/{X}/{Y}.jpg",
"minZoom": 4,
"maxZoom": 18
},
"url": "http://{S}tile.stamen.com/toner/{Z}/{X}/{Y}.png",
"minZoom": 0,
"maxZoom": 20,
"attribution": "stamen"
},
"toner-lines": {
"url": "http://{S}tile.stamen.com/toner-lines/{Z}/{X}/{Y}.png",
"minZoom": 0,
"maxZoom": 20,
"attribution": "stamen"
},
"toner-labels": {
"url": "http://{S}tile.stamen.com/toner-labels/{Z}/{X}/{Y}.png",
"minZoom": 0,
"maxZoom": 20,
"attribution": "stamen"
},
"sterrain": {
"url": "http://{S}tile.stamen.com/terrain/{Z}/{X}/{Y}.jpg",
"minZoom": 4,
"maxZoom": 20,
"attribution": "stamen"
},
"apple": {
"url": "http://gsp2.apple.com/tile?api=1&style=slideshow&layers=default&lang=en_US&z={z}&x={x}&y={y}&v=9",
"minZoom": 4,
"maxZoom": 18
},
"watercolor": {
"url": "http://{S}tile.stamen.com/watercolor/{Z}/{X}/{Y}.jpg",
"minZoom": 3,
"maxZoom": 16
}
"url": "http://gsp2.apple.com/tile?api=1&style=slideshow&layers=default&lang=en_US&z={z}&x={x}&y={y}&v=9",
"minZoom": 4,
"maxZoom": 20,
"attribution": "apple"
},
"watercolor": {
"url": "http://{S}tile.stamen.com/watercolor/{Z}/{X}/{Y}.jpg",
"minZoom": 3,
"maxZoom": 16,
"attribution": "stamen"
}
},
createMap: function(m) {
trace(VMM.ExternalAPI.googlemaps.stamen_map_attribution);
/* MAP PROVIDERS
Including Stamen Maps
http://maps.stamen.com/
Except otherwise noted, each of these map tile sets are © Stamen Design, under a Creative Commons Attribution (CC BY 3.0) license.
================================================== */
var map_attribution = "";
function mapProvider(name) {
if (name in VMM.ExternalAPI.googlemaps.map_providers) {
map_attribution = VMM.ExternalAPI.googlemaps.map_attribution[VMM.ExternalAPI.googlemaps.map_providers[name].attribution];
return VMM.ExternalAPI.googlemaps.map_providers[name];
} else {
throw 'No such provider: "' + name + '"';
@ -1875,9 +1890,23 @@ if (typeof VMM == 'undefined') {
}
}
var map = new google.maps.Map(document.getElementById(m.id), map_options);
var unique_map_id = m.id.toString() + "_gmap";
VMM.attachElement("#" + m.id, "<div class='google-map' id='" + unique_map_id + "' style='width=100%;height=100%;'></div>");
/* ATTRIBUTION
================================================== */
//var map_attribution_html = "<div class='map-attribution'><div class='attribution-text'>" + map_attribution + "</div></div>";
//VMM.appendElement("#" + m.id, map_attribution_html);
var map = new google.maps.Map(document.getElementById(unique_map_id), map_options);
map.mapTypes.set(layer, new google.maps.VeriteMapType(layer));
/* ATTRIBUTION
================================================== */
var map_attribution_html = "<div class='map-attribution'><div class='attribution-text'>" + map_attribution + "</div></div>";
VMM.appendElement("#"+unique_map_id, map_attribution_html);
//.map-attribution
//.attribution-text
loadKML();
/* KML

Write Preview
Loading…
Cancel
Save