140 lines
6.7 KiB
HTML
140 lines
6.7 KiB
HTML
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
|
||
|
|
<title>Polygon Tweening</title>
|
||
|
|
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAASI0kCI-azC8RgbOZzWc3VRRarOQe_TKf_51Omf6UUSOFm7EABRRhO0PO4nBAO9FCmVDuowVwROLo3w"
|
||
|
|
type="text/javascript"></script>
|
||
|
|
<script type="text/javascript" src="../lib/jquery-1.6.2.min.js"></script>
|
||
|
|
<script type="text/javascript" src="../lib/mxn/mxn.js?(google)"></script>
|
||
|
|
<script type="text/javascript" src="../lib/timeline-1.2.js"></script>
|
||
|
|
<script src="../src/timemap.js" type="text/javascript"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
var tm;
|
||
|
|
$(function() {
|
||
|
|
|
||
|
|
tm = TimeMap.init({
|
||
|
|
mapId: "map", // Id of map div element (required)
|
||
|
|
timelineId: "timeline", // Id of timeline div element (required)
|
||
|
|
options: {
|
||
|
|
eventIconPath: "../images/"
|
||
|
|
},
|
||
|
|
datasets: [
|
||
|
|
{
|
||
|
|
title: "Photos",
|
||
|
|
id: "photos",
|
||
|
|
theme: "blue",
|
||
|
|
type: "basic",
|
||
|
|
options: {
|
||
|
|
items: [
|
||
|
|
{ // polyline
|
||
|
|
"start" : "1980-01-02",
|
||
|
|
"end" : "1990-01-02",
|
||
|
|
"polygon" : [{"lat":43.79488907226601,"lon":11.205711364746094},{"lat":43.812977041006626,"lon":11.228370666503906},{"lat":43.7859669617277,"lon":11.2664794921875},{"lat":43.8028187190472,"lon":11.279182434082031},{"lat":43.78819761422739,"lon":11.277122497558594},{"lat":43.78398408962279,"lon":11.294631958007812},{"lat":43.76464763976463,"lon":11.182365417480469},{"lat":43.79488907226601,"lon":11.205711364746094}],
|
||
|
|
"title" : "Firenze",
|
||
|
|
"options" : {
|
||
|
|
"description": "Testing a polygon tween of Firenze",
|
||
|
|
"endpoly": [{"lat":43.81025180712872,"lon":11.1566162109375},{"lat":43.84492732139371,"lon":11.22802734375},{"lat":43.81669306861421,"lon":11.2554931640625},{"lat":43.81669306861421,"lon":11.311111450195312},{"lat":43.799349628071965,"lon":11.337890625},{"lat":43.77506035122469,"lon":11.370162963867188},{"lat":43.7641517511446,"lon":11.35986328125},{"lat":43.81025180712872,"lon":11.1566162109375}]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
bandIntervals: [
|
||
|
|
Timeline.DateTime.YEAR,
|
||
|
|
Timeline.DateTime.DECADE
|
||
|
|
],
|
||
|
|
// make pathlines
|
||
|
|
dataDisplayedFunction: function(tm) {
|
||
|
|
// new filter chain for poly tweening
|
||
|
|
tm.addFilterChain("polytween",
|
||
|
|
function(item) {
|
||
|
|
// create tween if item is visible
|
||
|
|
if (item.visible) {
|
||
|
|
var theme = item.opts.theme || item.dataset.opts.theme;
|
||
|
|
var pm = item.placemark;
|
||
|
|
var ep = item.opts.endpoly;
|
||
|
|
// get tween percent
|
||
|
|
var now = item.dataset.timemap.timeline.getBand(0)
|
||
|
|
.getCenterVisibleDate().getTime();
|
||
|
|
var start = item.event.getStart().getTime();
|
||
|
|
var end = item.event.getEnd().getTime();
|
||
|
|
var percent;
|
||
|
|
if (now < start) percent = 0;
|
||
|
|
else if (now > end) percent = 1;
|
||
|
|
else percent = 1 - ((end - now) / (end - start));
|
||
|
|
// assume the same number of vertices
|
||
|
|
var points=[], pt1, pt2;
|
||
|
|
for (var x=0; x<pm.points.length; x++) {
|
||
|
|
pt1 = pm.points[x];
|
||
|
|
pt2 = ep[x];
|
||
|
|
points.push(new mxn.LatLonPoint(
|
||
|
|
(pt1.lat + ((parseFloat(pt2.lat) - pt1.lat) * percent)),
|
||
|
|
(pt1.lng + ((parseFloat(pt2.lon) - pt1.lng) * percent))
|
||
|
|
));
|
||
|
|
// remove the old tween
|
||
|
|
if (item.tween) item.map.removePolyline(item.tween);
|
||
|
|
// hide the real placemark
|
||
|
|
item.placemark.hide();
|
||
|
|
// show the new tween
|
||
|
|
item.tween = new mxn.Polyline(points),
|
||
|
|
item.tween.addData({
|
||
|
|
color: theme.lineColor,
|
||
|
|
width: theme.lineWeight,
|
||
|
|
opacity: theme.lineOpacity,
|
||
|
|
closed: true,
|
||
|
|
fillColor: theme.fillColor,
|
||
|
|
fillOpacity: theme.fillOpacity
|
||
|
|
});
|
||
|
|
item.map.addPolyline(item.tween);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
// remove tween if any
|
||
|
|
if (item.tween) {
|
||
|
|
item.map.removePolyline(item.tween);
|
||
|
|
item.tween = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
function(item) {
|
||
|
|
}
|
||
|
|
);
|
||
|
|
tm.addFilter("polytween", function(item) {
|
||
|
|
return (item.event && item.placemark &&
|
||
|
|
!item.event.isInstant() && item.getType() == 'polygon' &&
|
||
|
|
item.opts.endpoly);
|
||
|
|
});
|
||
|
|
tm.filter("polytween");
|
||
|
|
// update map on timeline scroll
|
||
|
|
tm.timeline.getBand(0).addOnScrollListener(function() {
|
||
|
|
tm.filter("polytween");
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<link href="examples.css" type="text/css" rel="stylesheet"/>
|
||
|
|
<style>
|
||
|
|
div#timelinecontainer{ height: 150px; }
|
||
|
|
div#mapcontainer{ height: 450px; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="help">
|
||
|
|
<h1>On-the-fly Polygon Tweening</h1>
|
||
|
|
This example uses a custom filter to smoothly tween a polygon between a beginning set of vertices and an ending set. I'm not sure I'd recommend this as an implementation - among other things it's rough on slow computers, especially as you increase the number of vertices - but you get the idea.
|
||
|
|
</div>
|
||
|
|
<div id="timemap">
|
||
|
|
<div id="timelinecontainer">
|
||
|
|
<div id="timeline"></div>
|
||
|
|
</div>
|
||
|
|
<div id="mapcontainer">
|
||
|
|
<div id="map"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|