You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@community.apache.org by rg...@apache.org on 2009/12/28 20:32:09 UTC
svn commit: r894231 - /comdev/nearby_people/templates/people.html
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&v=2&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>