westdc-zf1/application/default/views/scripts/data/timemap.phtml

99 lines
4.6 KiB
PHTML

<?php
$this->headTitle($this->config->title->site);
$this->headTitle($this->config->title->data);
$this->headTitle('时空导航');
$this->headTitle()->setSeparator(' - ');
$this->headLink()->appendStylesheet('/css/metadata.css');
$this->breadcrumb('<a href="/">首页</a>');
$this->breadcrumb('<a href="/data">'.$this->config->title->data.'</a>');
$this->breadcrumb('<a href="/data/timeline">时空导航</a>');
$this->breadcrumb()->setSeparator(' > ');
//$this->headScript()->appendFile('http://maps.google.cN/maps?file=api&v=2&key='.$this->config->google->maps->api);
$this->headScript()->appendFile('/js/timeline_var.js');
$this->headScript()->appendFile('/js/timeline_js/timeline-api.js');
$this->headScript()->appendFile('/js/jquery-1.7.min.js');
$this->headScript()->appendFile('/js/timemap.2.0.1/lib/mxn/mxn.js?(google)');
$this->headScript()->appendFile('/js/timemap.2.0.1/timemap.pack.js');
$this->headScript()->appendFile('/js/jquery.colorbox-min.js');
$this->headLink()->appendStylesheet('/css/colorbox.css');
?>
<div class="row-fluid"><?= $this->partial('data/tools.phtml'); ?></div>
<div id="timemap" style="clear:both;">
<div id="timeline" style="height:300px;width:100%;"></div>
<div id="map" style="height:300px;"></div>
</div>
<script type="text/javascript" charset="utf-8">
var tm;
$(window).bind("load", function() { var timeout = setTimeout(function() { initLoader(); }, 100);});
//$(window).bind("load", function() { var timeout = setTimeout(function() { gmaploaded(); }, 1000);});
function loadMaps() {
google.load("maps", "2", {"callback" : tmloaded,"base_domain": "ditu.google.cn"});
}
function initLoader() {
var script = document.createElement("script");
script.src = "https://www.google.com/jsapi?key=<?php echo $this->config->google->maps->api; ?>&callback=loadMaps";
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
}
function tmloaded() {
tm = TimeMap.init({
mapId: "map", // Id of map div element (required)
timelineId: "timeline", // Id of timeline div element (required)
options: {
eventIconPath: "../images/",
mapType:G_NORMAL_MAP
},
datasets: [
{
id: "artists",
title: "Artists",
theme: "orange",
// note that the lines below are now the preferred syntax
type: "basic",
options: {
items: [
<?php
foreach($this->rows as $row) : ?>
{
"start" : "<?php echo $row['timebegin']; ?>",
<?php if ($row['timeend']!='') : ?>
"end" : "<?php echo $row['timeend']; ?>",
<?php endif; ?>
"polygon" : [
{
"lat" : <?php echo $row['south']; ?>,
"lon" : <?php echo $row['west']; ?>
},{
"lat" : <?php echo $row['north']; ?>,
"lon" : <?php echo $row['west']; ?>
},{
"lat" : <?php echo $row['north']; ?>,
"lon" : <?php echo $row['east']; ?>
},{
"lat" : <?php echo $row['south']; ?>,
"lon" : <?php echo $row['east']; ?>
},{
"lat" : <?php echo $row['south']; ?>,
"lon" : <?php echo $row['west']; ?>
}
],
"title" : "<?php echo $row['title']; ?>",
"options" : {
// set the full HTML for the info window
"infoHtml": "<a href=/data/<?php echo $row['uuid']; ?>><?php echo $row['title']; ?></a><hr /><img src=/service/thumb/id/<?php echo $row['id']; ?> onclick='$.colorbox({photo:\"true\",href:\"/service/bigthumb/id/<?php echo $row['id']; ?>\"});' />"
}
},
<?php endforeach; ?>
]
}
}
],
bandIntervals: [
Timeline.DateTime.MONTH,
Timeline.DateTime.DECADE
]
});
// manipulate the timemap further here if you like
}
</script>