Project

General

Profile

hw.html

O resultado obtido deverá ser algo deste género. - Miguel Lopes Luis, 10/24/2011 04:50 PM

Download (4.26 KB)

 
1
<html> 
2

    
3
<head> 
4

    
5
  <title>API de Mapas do SAPO</title> 
6
           <script src='http://js.sapo.pt/Bundles/SAPOMapsAPI.js'></script> 
7
        <script src='http://pajhome.org.uk/crypt/md5/md5.js'></script>
8
           <script type='text/javascript'>
9
        window.onload = init;
10

11
        var map = false;
12
        var marker = false;
13
        var sd = false;
14

15
        function init() {
16
                //POI - USER WHO REQUESTED MUST BE FIRST IN THE LIST!
17
                var        people = [ {Longitude: -8.6569513822745,
18
                                         Latitude: 40.629898402438,
19
                                         Name: 'You!',
20
                                         email: 'mluis@ua.pt'},
21
                                        {Longitude: -8.656318380945,
22
                                         Latitude: 40.630134533142,
23
                                         Name: 'Andre Prata',
24
                                         email: 'andreprata@ua.pt'},
25
                                        {Longitude: -8.657259,
26
                                         Latitude: 40.629262,
27
                                         Name: 'Diogo Gomes',
28
                                         email: 'dgomes@ua.pt'},
29
                                        {Longitude: -8.657519,
30
                                         Latitude: 40.629555,
31
                                         Name: 'Joao Paulo Barraca',
32
                                         email: 'jpbarraca@ua.pt'},
33
                                        {Longitude: -8.656677,
34
                                         Latitude: 40.62914,
35
                                         Name: 'Patrick Marques',
36
                                         email: 'patrickfmarques@ua.pt'},
37
                                        {Longitude: -8.656417,
38
                                         Latitude: 40.628877,
39
                                         Name: 'Carlos Goncalves',
40
                                         email: 'carlos.goncalves@ua.pt'},
41
                                        {Longitude: -8.65591,
42
                                         Latitude: 40.629441,
43
                                         Name: 'Pedro Goucha Francisco',
44
                                         email: 'goucha@ua.pt'},
45
                                        {Longitude: -8.656253,
46
                                         Latitude: 40.629492,
47
                                         Name: 'Tiago Marques',
48
                                         email: 'tiagomnm@gmail.com'}
49
                                        ];
50

51
                   map = new SAPO.Maps.Map('map');
52
                sd = new SAPO.Maps.Directions(map, "results");
53
                map.setMapCenter(new OpenLayers.LonLat(people[0].Longitude,people[0].Latitude), 17);
54
                map.setBaseLayer(map.getBaseLayers().SATELLITE_MAP);
55

56
        //        map.addControl(new SAPO.Maps.Control.MapType('en'));
57
                map.addControl(new OpenLayers.Control.KeyboardDefaults());
58
                map.addControl(new SAPO.Maps.Control.Navigation());
59
                map.addControl(new SAPO.Maps.Control.MiniMap());
60

61
                markers = new SAPO.Maps.Markers('Friends');
62
                map.addMarkers(markers);
63

64
//***************************************
65
                var pois = people;
66
                var lonlat = false;
67
                
68
                for (var i = 1; i < pois.length; ++i) {                                        
69
                        lonlat = new OpenLayers.LonLat(Number(pois[i].Longitude), Number(pois[i].Latitude));
70
                        marker = new SAPO.Maps.Marker(lonlat,{dragable:false},
71
                                                        {
72
                                                                markerImage: 'http://www.gravatar.com/avatar/'+ hex_md5(people[i].email) +'.jpg',
73
                                                                size: new OpenLayers.Size(32, 32)
74
                                                        } );
75
                        marker.html = '<h2>' + pois[i].Name + '</h2>';
76
                        marker.openPopup(marker.html);
77
                        marker.registerEvent('click', this, function(marker){
78
                                marker.openPopup(marker.html);
79
                        });
80
                        marker.registerEvent('mouseover', this, function(marker){
81
                //TODO AUTOMATICALY DRAW WALKING PATH TO FRIEND
82
                /*
83
                                alert('BEFORE sd.cancel()! sd.status: ' + sd.getStatus());
84
                                sd.cancel();
85
                                alert('status: ' + sd.getStatus());
86
                                sd.registerEvent("completed", this, function(directions){
87
                                        var x = 1;
88
                                });
89
                                alert('registeredEvent! sd.status: ' + sd.getStatus());
90
                                sd.getDirections(new OpenLayers.LonLat(people[0].Longitude, people[0].Latitude),
91
                                                                 new OpenLayers.LonLat(people[i].Longitude, people[i].Latitude),
92
                                                                {mode:'walk', description: "textmap"});
93
                                alert('GotDirections! sd.status: ' + sd.getStatus());
94
                */
95
                        });        
96
                        markers.addMarker(marker);
97
                }
98
//****************************************
99

100
                //Mark CURRENT user location
101
                marker = new SAPO.Maps.Marker(new OpenLayers.LonLat(people[0].Longitude,people[0].Latitude),
102
                        {dragable:false},
103
                        {
104
                                markerImage: 'http://www.gravatar.com/avatar/'+ hex_md5(people[0].email) +'.jpg',
105
                                size: new OpenLayers.Size(32, 32)
106
                        });
107

108
                marker.html = '<h1>' + people[0].Name + '<h1>';
109
                marker.openPopup(marker.html);
110
            marker.registerEvent('click', this, function(marker){
111
                        marker.openPopup(marker.html);
112
                });
113

114
                markers.addMarker(marker);
115
        }
116

117
        function clearResults(){
118
        }
119
  </script> 
120

    
121

    
122
 </head> 
123

    
124
 <body onload="init();"> 
125

    
126
<!--  <div id='map' style='width:600px;height:400px'></div>--!>
127
  <div id='map' style='width:50%;height:400px;float:left'></div>
128
<!--
129
  <div id="results" style='width:40%; float:right; height: 400px; overflow-y: scroll;'></div>
130
  <div style='width:24%; float:left; margin-left: 10px; border:solid 1px;'>
131
                        <div onclick='clearResults();' style='cursor:pointer; text-align:left; margin-bottom:10px;'>Limpar resultados</div>
132
                        <div id='results' style='height:300px; overflow-y: scroll;'></div>
133
                </div>
134
--!>
135
 </body> 
136

137
</html> 
138