Skip to content
This repository was archived by the owner on Dec 15, 2018. It is now read-only.

animate features in maps.data #2

Open
jlivni wants to merge 15 commits into
base: master
Choose a base branch
from
Open

animate features in maps.data #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
7317636
slightly better docs for example
jlivni May 1, 2014
f168021
add earthquake sample data
jlivni May 1, 2014
4517a8f
add basic start of animator sample lib
jlivni May 1, 2014
53f2678
create ux in animator lib, and don't hardcode time property
jlivni May 1, 2014
0859b4e
minor lint and remove init function
jlivni May 5, 2014
d7f0866
variety of minor changes (mostly jsdoc) for pull req
jlivni May 7, 2014
8b1280c
move futureTime to class variable
jlivni May 7, 2014
88ae281
move duration from seconds to ms
jlivni May 7, 2014
80d5d5a
refactor animate method to be cleaner; use requestAnimationFrame
jlivni May 16, 2014
74cc19a
private map_ and line up jsdoc
jlivni May 20, 2014
e612263
add back in steps functionality
jlivni May 20, 2014
daf6f8b
respond to a bunch of cbro's comments
jlivni May 20, 2014
416174b
don't set default steps
jlivni May 20, 2014
380c970
fix steps logica and make more methods private
jlivni May 20, 2014
b7f8dd0
make animate() method private
jlivni May 20, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 70 additions & 0 deletions examples/animator/animator.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#current-time {
padding: 2px;
margin-top: 6px;
margin-right: 6px;
background: white;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="../../src/animator/animator.js"></script>
<script>
var map;
var animator;

google.maps.event.addDomListener(window, 'load', initialize);

function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: { lat: 20, lng: -160 },
zoom: 3
});
map.data.setStyle(styler);
// use addGeoJson (which is synchronous) to ensure map.data is full of
// features before instantiating animation. Earthquakes data is from
// earthquake.usgs.gov/earthquakes/feed/v1.0/summary/1.0_week.geojsonp
$.getJSON('./earthquakes.json', function(json) {
map.data.addGeoJson(json);
animator = new Animator(map, {
steps: 30, // Less smooth than leaving this as default.
duration: 15000, // ms of animation
repeat: true
});
animator.start();
});
};


function styler(feature) {
return {
icon: {
path: google.maps.SymbolPath.CIRCLE,
strokeWeight: 1,
strokeColor: '#fff',
fillColor: 'orange',
fillOpacity: .8,
// while an exponent would technically be correct, quadratic looks nicer
scale: Math.pow(feature.getProperty('mag'), 2)
},
zIndex: Math.floor(15 - feature.getProperty('mag'))
};
}


</script>
</head>
<body id="map-container">
<div id="map-canvas"></div>
</body>
</html>
Loading