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. 53
      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. 53
      timeline.js

53
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
"maxZoom": 20,
"attribution": "stamen"
},
"toner-lines": {
"url": "http://{S}tile.stamen.com/toner-lines/{Z}/{X}/{Y}.png",
"minZoom": 0,
"maxZoom": 20
"maxZoom": 20,
"attribution": "stamen"
},
"toner-labels": {
"url": "http://{S}tile.stamen.com/toner-labels/{Z}/{X}/{Y}.png",
"minZoom": 0,
"maxZoom": 20
"maxZoom": 20,
"attribution": "stamen"
},
"sterrain": {
"url": "http://{S}tile.stamen.com/terrain/{Z}/{X}/{Y}.jpg",
"minZoom": 4,
"maxZoom": 18
"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
"maxZoom": 20,
"attribution": "apple"
},
"watercolor": {
"url": "http://{S}tile.stamen.com/watercolor/{Z}/{X}/{Y}.jpg",
"minZoom": 3,
"maxZoom": 16
"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;}

53
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
"maxZoom": 20,
"attribution": "stamen"
},
"toner-lines": {
"url": "http://{S}tile.stamen.com/toner-lines/{Z}/{X}/{Y}.png",
"minZoom": 0,
"maxZoom": 20
"maxZoom": 20,
"attribution": "stamen"
},
"toner-labels": {
"url": "http://{S}tile.stamen.com/toner-labels/{Z}/{X}/{Y}.png",
"minZoom": 0,
"maxZoom": 20
"maxZoom": 20,
"attribution": "stamen"
},
"sterrain": {
"url": "http://{S}tile.stamen.com/terrain/{Z}/{X}/{Y}.jpg",
"minZoom": 4,
"maxZoom": 18
"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
"maxZoom": 20,
"attribution": "apple"
},
"watercolor": {
"url": "http://{S}tile.stamen.com/watercolor/{Z}/{X}/{Y}.jpg",
"minZoom": 3,
"maxZoom": 16
"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