1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
<!DOCTYPE html>
<html>
<head>
<title>Modest Maps JS</title>
<script type="text/javascript" src="../../modestmaps.js"></script>
<script type="text/javascript" src="bluemarble.js"></script>
<script type="text/javascript" src="follower.js"></script>
<script type="text/javascript">
var map;
var jsonFlickrApi;
function initMap() {
var src = document.getElementById('src');
eval(src.textContent || src.innerText);
}
</script>
</head>
<body onload="initMap()">
<h1>Modest Maps JS</h1>
<p><a href="javascript:map.zoomIn()">zoom in</a> | <a href="javascript:map.zoomOut()">zoom out</a>
<br><a href="javascript:map.panLeft()">pan left</a> | <a href="javascript:map.panRight()">pan right</a> | <a href="javascript:map.panDown()">pan down</a> | <a href="javascript:map.panUp()">pan up</a></p>
<div id="map">
</div>
<p>The above div is a map initialized like so:</p>
<pre id="src">
// "import" the namespace
var MM = com.modestmaps;
var provider = new MM.Layer(new MM.BlueMarbleProvider());
map = new MM.Map('map', provider, new MM.Point(1024,512))
map.setCenterZoom(new MM.Location(20.0, 0), 2);
window.jsonFlickrApi = function(rsp) {
var photos = rsp.photos.photo;
for (var i = 0; i < photos.length; i++) {
var p = photos[i];
var url = [ 'http://farm', p.farm, '.static.flickr.com/', p.server, '/', p.id, '_', p.secret, '_s.jpg' ].join('');
var html = "<" + "img src='" + url + "'" + ">"; // weird for 'eval', sorry
var location = new MM.Location(p.latitude, p.longitude);
var dimensions = new MM.Point(75, 75);
var f = new MM.Follower(map, location, html, dimensions);
}
}
var script = document.createElement('script');
script.src = 'http://api.flickr.com/services/rest/?'+
'method=flickr.photos.search&'+
'api_key=a96cbef093a8c0280d3aed4e0c004d4c&'+
'tags=clouds&'+
'extras=geo&'+
'has_geo=1&'+
'format=json';
document.getElementsByTagName('head')[0].appendChild(script);
</pre>
<p>Hands up who wants overlays?</p>
<div id="log"></div>
</body>
</html>
|
