svn commit: r894231 - /comdev/nearby_people/templates/people.html

[rgardler]

Author: rgardler
Date: Mon Dec 28 19:32:08 2009
New Revision: 894231

URL: http://svn.apache.org/viewvc?rev=894231&view=rev
Log:
Improve page styling and add some nice features for locating people on the map.

Add JQuery too, it's not really used yet, but the plan is to create a table 
that allows manipulation of the people returned based on projects they work on 
etc.

Modified:
    comdev/nearby_people/templates/people.html

Modified: comdev/nearby_people/templates/people.html
URL: 
http://svn.apache.org/viewvc/comdev/nearby_people/templates/people.html?rev=894231&r1=894230&r2=894231&view=diff
==============================================================================
--- comdev/nearby_people/templates/people.html (original)
+++ comdev/nearby_people/templates/people.html Mon Dec 28 19:32:08 2009
@@ -5,30 +5,21 @@
 {% block heading %}People Near You{% endblock %}
 {% block bodyclass %}people{% endblock %}
 {% block extrahead %}
-<script 
src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAteF8gqn96L8K4RRZYtk7ZRQv7OBTi813IEDuwD3BusDViujKIBTUfK-gV5SL7dqLeRkgc0jLmyXgkg";
 type="text/javascript"></script>
-<script type="text/javascript">
-<!--
-    var map;
-    var mapObj;
 
-    function createMarker(name,lat,lng,link) {
-      var point = new GLatLng(lat,lng);
-      var options = { title: name }; // appears when cursor hovers over marker
-      var marker = new GMarker(point,options);
-      GEvent.addListener(marker, "click", function() {
-        var msg = name + "<br \/>";
-        msg = msg + " <a href=\"" + link + "\">" +
-                    "<small>Info<\/small><\/a>"; 
-        marker.openInfoWindowHtml(msg);
-      });
-      return marker;
-    }
+<script type="text/javascript" 
src="http://www.google.com/jsapi?key=ABQIAAAAteF8gqn96L8K4RRZYtk7ZRQv7OBTi813IEDuwD3BusDViujKIBTUfK-gV5SL7dqLeRkgc0jLmyXgkg";></script>
+<script type="text/javascript" charset="utf-8">
+    google.load("maps", "2.x");
+    google.load("jquery", "1.3.1");
+</script>
 
-    function load() {
-      mapObj = document.getElementById("map");
+<script type="text/javascript" charset="utf-8">
+<!--
+var markers = [];
+var map;
 
-      if (GBrowserIsCompatible()) {
-        map = new GMap2(mapObj);
+$(document).ready(function(){
+       if (GBrowserIsCompatible()) {
+               map = new GMap2(document.getElementById('map'));
         map.addControl(new GLargeMapControl());
         map.setCenter(new GLatLng({{center_lat}}, {{center_long}}), 14);
 
@@ -36,8 +27,8 @@
         map.panTo(new GLatLng( {{center_lat}}, {{center_long}} ));
         map.setZoom(
              map.getBoundsZoomLevel(new GLatLngBounds(
-                    new GLatLng( {{bl_lat}}-0.05, {{bl_long}}-0.05 ),
-                    new GLatLng( {{tr_lat}}+0.05, {{tr_long}}+0.05 )
+                    new GLatLng( {{bl_lat}} - 0.05, {{bl_long}} - 0.05 ),
+                    new GLatLng( {{tr_lat}} + 0.05, {{tr_long}} + 0.05 )
              ))
         );
 
@@ -46,6 +37,7 @@
             marker = createMarker("{{person.name}}",{{person.latitude}},
                          {{person.longitude}},"{{person.link}}");
             map.addOverlay(marker);
+            markers["{{person.name}}"] = marker;
         {% endfor %}
 
         // Add the search marker
@@ -57,8 +49,30 @@
            search_icon, false
         );
         map.addOverlay(search_point);
-      }
     }
+});
+
+function createMarker(name,lat,lng,link) {
+    var point = new GLatLng(lat,lng);
+    var options = { title: name }; // appears when cursor hovers over marker
+    var marker = new GMarker(point,options);
+    GEvent.addListener(marker, "click", function() {
+      var msg = name + "<br \/>";
+      msg = msg + " <a href=\"" + link + "\">" +
+                  "<small>Info<\/small><\/a>"; 
+      marker.openInfoWindowHtml(msg);
+    });
+
+       GEvent.addListener(marker, "click", function(){
+               map.panTo(marker.getLatLng());
+       });
+       
+    return marker;
+}
+
+function panTo(name) {
+       map.panTo(markers[name].getLatLng());
+}
 //-->
 </script>
 <style type="text/css">
@@ -67,16 +81,21 @@
        height: 400px;
        width: 80%;
 }
+
+       #map { float:left; width:500px; height:500px; }
+       #list { float:left; width:300px; background:#eee; list-style:none; 
padding:0; }
+       #list li { padding:5px; }
+       #list li:hover { background:#FFF; color:#ff;}
 </style>
+
 {% endblock %}
 {% block content %}
 
 {% if people %}
-       <h4>People near you...</h4>
-       <ul>
-       {% for dist, person in people %}
-               <li>{{dist|distanceformat}} - <a 
href="{{person.link}}">{{person.name}}</a></li>
-       {% endfor %}
+       <ul id="list">
+         {% for dist, person in people %}
+               <li><a 
href="javascript:panTo('{{person.name}}')">{{person.name}}</a> - 
{{dist|distanceformat}} - <a href="{{person.link}}">(info)</a></li>
+         {% endfor %}
        </ul>
 
        <div id="map"></div>