Merge lp:~effie-jayx/loco-team-portal/toabctl_openlayer_merge into lp:loco-team-portal

[Efrain Valles]

This Branch brings toabctl's Openlayers use for picking Longitude and Latitude and it was not merged back in rev 125. This is an attempt to get that in and fix a couple of bugs related to maps.

[Michael Hall (mhall119)]

I'm getting an empty square on the venue edit screen, is the map supposed to be there as well?

[Efrain Valles (effie-jayx)]

somehow the line with the google maps javascript got omited, shall comit the change and push it to this branch

> I'm getting an empty square on the venue edit screen, is the map supposed to
> be there as well?

[lp:~effie-jayx/loco-team-portal/toabctl_openlayer_merge]

153. By Efrain Valles on 2010-06-10

fixed d missing google maps api js import

[Efrain Valles (effie-jayx)]

Please make sure you have the GOOGLE_API_KEY in local_settings.py

> I'm getting an empty square on the venue edit screen, is the map supposed to
> be there as well?

[Daniel Holbach (dholbach)]

I have a few questions:

 - Why is this below changed?
394 - return render_to_response('venues/venue_new.html',
395 + return render_to_response('venues/venue_update.html',
396 context, RequestContext(request))

 - Is the Javascript code copied from somewhere? Should we add this information somewhere?

[Daniel Holbach (dholbach)]

Why is venue_new.html deleted? It still seems to be in urls.py

[Daniel Holbach (dholbach)]

Generally great stuff though. Seems to work OK for me.

review: Needs Information

[Michael Hall (mhall119)]

I think he's combining venue_new.html and venue_update.html because they were essentially identical.

[Michael Hall (mhall119)]

Tested and working, it looks good.

review: Approve

[Daniel Holbach (dholbach)]

Only question I have left is: "Is the Javascript code copied from somewhere? Should we add this information somewhere?"

[Daniel Holbach (dholbach)]

<dholbach> hey toabctl - do you still know where the javascript code for the openlayers branch came from?
 toabctl: seems like that's the only remaining question
<toabctl> dholbach, i think it was an example from openlayers.org and i change a lot of it.
<dholbach> toabctl: ok, so there's no licensing thing or "from: http://...." stuff we need to note down somewhere?
<toabctl> dholbach, i don't think so.
<dholbach> toabctl: ok, I'll merge the branch then
 thanks

review: Approve

=== modified file 'loco_directory/media/css/newstyle.css'
--- loco_directory/media/css/newstyle.css	2010-05-03 06:00:22 +0000
+++ loco_directory/media/css/newstyle.css	2010-06-10 03:10:45 +0000
@@ -7,14 +7,21 @@
 label {
     font-weight: bold;
 }
-
-div.map {
-    width: 300px;
-    height: 300px;
-    border: 1px solid gray;
-    position: absolute;
-    top: 60px;
-    right: 30px;
+#venue-map-selector {
+    width: 400px;
+    height: 300px;
+    border: 1px solid #ccc;
+    position: absolute;
+    right: 30px;
+    top: 40px;
+}
+#venue-map {
+    width: 400px;
+    height: 300px;
+    border: 1px solid #ccc;
+    position: absolute;
+    right: 30px;
+    bottom: 10px;
 }
 
 #main-content {

=== added file 'loco_directory/media/js/common.js'
--- loco_directory/media/js/common.js	1970-01-01 00:00:00 +0000
+++ loco_directory/media/js/common.js	2010-06-10 03:10:45 +0000
@@ -0,0 +1,103 @@
+//Click Control to get lonlat values. trigger function set the values
+OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {                
+    defaultHandlerOptions: {
+        'single': true,
+        'double': false,
+        'pixelTolerance': 0,
+        'stopSingle': false,
+        'stopDouble': false
+    },
+
+    initialize: function(options) {
+        this.handlerOptions = OpenLayers.Util.extend(
+            {}, this.defaultHandlerOptions
+        );
+        OpenLayers.Control.prototype.initialize.apply(
+            this, arguments
+        ); 
+        this.handler = new OpenLayers.Handler.Click(
+            this, {
+                'click': this.trigger
+            }, this.handlerOptions
+        );
+    }, 
+
+    trigger: function(e) {
+        var lonlat = map.getLonLatFromViewPortPx(e.xy);
+        $("#id_longitude").val(lonlat.lon)
+        $("#id_latitude").val(lonlat.lat)
+        map.markers.erase();
+        //alert("You clicked near " + lonlat.lat + " N, " + lonlat.lon + " E");
+    }
+
+});
+//function to add markers to map
+function addMarker(layer, lon, lat, popupContentHTML) {
+        var ll = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
+        var feature = new OpenLayers.Feature(layer, ll);
+        feature.closeBox = true;
+        feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, { minSize: new OpenLayers.Size(200, 100) });
+        feature.data.popupContentHTML = popupContentHTML;
+        feature.data.overflow = "hidden";
+
+        var marker = new OpenLayers.Marker(ll);
+        marker.feature = feature;
+
+        var markerClick = function(evt) {
+        if (this.popup == null) {
+                this.popup = this.createPopup(this.closeBox);
+                map.addPopup(this.popup);
+                this.popup.show();
+        } else {
+                this.popup.toggle();
+        }
+        OpenLayers.Event.stop(evt);
+        };
+        marker.events.register("mousedown", feature, markerClick);
+
+        layer.addMarker(marker);
+}
+
+//openlayers map
+var map;
+function showmap(divid, select, lon, lat, htmltext){
+    map = new OpenLayers.Map(divid);
+    map.addControl(new OpenLayers.Control.LayerSwitcher());
+    var gphy = new OpenLayers.Layer.Google(
+        "Google Physical",
+        {type: G_PHYSICAL_MAP}
+    );
+    var gmap = new OpenLayers.Layer.Google(
+        "Google Streets", // the default
+        {numZoomLevels: 20}
+    );
+    var ghyb = new OpenLayers.Layer.Google(
+        "Google Hybrid",
+        {type: G_HYBRID_MAP, numZoomLevels: 20}
+    );
+    var gsat = new OpenLayers.Layer.Google(
+        "Google Satellite",
+        {type: G_SATELLITE_MAP, numZoomLevels: 22}
+    );
+    var markers = new OpenLayers.Layer.Markers("Markers Layer");
+    
+    map.addLayers([gphy, ghyb, gsat, markers]);
+    if (lon === undefined && lat === undefined) {
+        map.setCenter(new OpenLayers.LonLat(0, 0), 0);
+    } else {
+        for (i=0;i<lon.length;i++) {
+                addMarker(markers, lon[i], lat[i], htmltext[i]);
+        }
+        var lonLat = new OpenLayers.LonLat(lon[0], lat[0]).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
+        map.setCenter (lonLat, 6);
+    }
+    //map.zoomToMaxExtent();
+    if (select) {
+        var click = new OpenLayers.Control.Click();
+        map.addControl(click);
+        click.activate();
+    }
+
+    
+}
+

=== modified file 'loco_directory/templates/base.html'
--- loco_directory/templates/base.html	2010-05-26 14:59:32 +0000
+++ loco_directory/templates/base.html	2010-06-10 03:10:45 +0000
@@ -11,24 +11,12 @@
   <style type="text/css" media="all">@import "/media/css/classes.css";</style> 
   <style type="text/css" media="all">@import "/media/css/ubuntu09.css";</style> 
   <style type="text/css" media="all">@import "/media/css/newstyle.css";</style>
-{% block initmap %}
+  <script type="text/javascript" src="{{MEDIA_URL}}/jquery/jquery.js"></script>
+  <script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
   <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key={{ google_api_key }}" type="text/javascript"></script>
-    <script type="text/javascript">
-    
-    function showmap(Lo, La, Content) {
-      if (GBrowserIsCompatible()) {
-        var map = new GMap2(document.getElementById("map_canvas"));
-        var center = new GLatLng(La, Lo)
-        map.setCenter(center, 13);
-        var marker = new GMarker(center)
-        map.addOverlay(marker)
-        GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(Content);})
-      }
-    }
-
-    </script>
-{% endblock %}
-{% block extrahead %}{% endblock %}
+  <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
+  <script type="text/javascript" src="{{MEDIA_URL}}/js/common.js"></script>
+  {% block extrahead %}{% endblock %}
 </head>
 
 <body class="ubuntu09 front not-logged-in page-node node-type-page no-sidebars">
@@ -97,5 +85,8 @@
       </div>
     </div>
   </div>
+  <div id="bg-left">&nbsp;</div><div id="bottom-left">&nbsp;</div> 
+</div>
+{% block extra_javascript %}{% endblock extra_javascript %}
 </body>
 </html>

=== modified file 'loco_directory/templates/venues/venue_detail.inc.html'
--- loco_directory/templates/venues/venue_detail.inc.html	2010-05-03 05:52:58 +0000
+++ loco_directory/templates/venues/venue_detail.inc.html	2010-06-10 03:10:45 +0000
@@ -15,6 +15,6 @@
         <br class="clear" />
 		<h2>{{venue_object.name}}</h2>
 		{% include "venues/venue_detail_basic.inc.html" %}
-
-	</div>
+        
+        <br class="clear" />
 </div>

=== modified file 'loco_directory/templates/venues/venue_detail_basic.inc.html'
--- loco_directory/templates/venues/venue_detail_basic.inc.html	2010-02-18 10:32:46 +0000
+++ loco_directory/templates/venues/venue_detail_basic.inc.html	2010-06-10 03:10:45 +0000
@@ -1,5 +1,5 @@
 {% load i18n %}
-<table id="team-event-venue">
+<table>
 {% if venue_object %}
 		{% if venue_object.name %}
 		<tr>
@@ -25,17 +25,23 @@
 				<td>{{ venue_object.country }}</td>
 		</tr>
 		{% endif %}
-		{% if venue_object.map_url %}
-		<tr>
-				<th scope="row"><label>{% trans "Map URL:" %}</label></th>
-				<td><a href="{{ venue_object.map_url }}">Load Map</a></td>
-		</tr>
-		{% endif %}
 		{% if venue_object.venue_url %}
 		<tr>
 				<th scope="row"><label>{% trans "Homepage:" %}</label></th>
 				<td><a href="{{ venue_object.venue_url }}">{{ venue_object.venue_url }}</a></td>
 		</tr>
+        {% endif %}
+        {% if venue_object.longitude %}
+		<tr>
+				<th scope="row"><label>{% trans "Longitude:" %}</label></th>
+				<td>{{ venue_object.longitude }}</td>
+		</tr>
+        {% endif %}
+        {% if venue_object.latitude %}
+		<tr>
+				<th scope="row"><label>{% trans "Latitude:" %}</label></th>
+				<td>{{ venue_object.latitude }}</td>
+		</tr>
 		{% endif %}
 		{% if venue_object.comment %}
 		<tr>
@@ -47,9 +53,15 @@
 </table>
 
 {% if venue_object.longitude and venue_object.latitude %}
-<div id="map_canvas" class="map"></div>
+<div id="venue-map"></div>
 <script><!--
-showmap({{ venue_object.longitude }}, {{ venue_object.latitude }}, '<h3 style="margin: 0 0 0.4em 0;">{{ venue_object.name }}</h3><a href="http://maps.google.com/maps?saddr=&daddr={{ venue_object.address }}, {{ venue_object.city }}, {{ venue_object.country }}" target ="_blank">Get Directions<\/a>')
-
+    var lon = new Array();
+    var lat = new Array();
+    var htmltext = new Array();
+    lon[0] = {{ venue_object.longitude }}
+    lat[0] = {{ venue_object.latitude }}
+    htmltext[0] = "{{ venue_object.name }}"
+    var select = new Boolean(false);
+    showmap('venue-map', select, lon, lat, htmltext) 
 --></script>
 {% endif %}

=== removed file 'loco_directory/templates/venues/venue_new.html'
--- loco_directory/templates/venues/venue_new.html	2009-12-21 20:45:43 +0000
+++ loco_directory/templates/venues/venue_new.html	1970-01-01 00:00:00 +0000
@@ -1,16 +0,0 @@
-{% extends "base.html" %}
-{% load i18n %}
-
-{% block title %}{% trans "New Venue" %}{% endblock %}
-
-{% block content %}
-<h1>{% trans "Add new Venue" %}</h1>
-<form action="." method="post">
-    	<table>
-        	{{ form.as_table }}
-    	</table>
-    	<p><input type="submit" value="Submit" /></p>
-</form>
-
-
-{% endblock %}

=== modified file 'loco_directory/templates/venues/venue_update.html'
--- loco_directory/templates/venues/venue_update.html	2009-12-21 20:45:43 +0000
+++ loco_directory/templates/venues/venue_update.html	2010-06-10 03:10:45 +0000
@@ -1,16 +1,35 @@
 {% extends "base.html" %}
 {% load i18n %}
 
-{% block title %}{% trans "Update Venue" %}{% endblock %}
+{% block title %}{% if venue_object %}{% trans "Update Venue" %}{% else %}{% trans "New Venue" %}{% endif %}{% endblock %}
+
+{% block extra_javascript %}
+<script type="text/javascript"><!--
+    var lon = new Array();
+    var lat = new Array();
+    var htmltext = new Array();
+    var select = new Boolean(true);
+    {% if venue_object %}
+    lon[0] = $("#id_longitude").val()
+    lat[0] = $("#id_latitude").val()
+    htmltext[0] = "{{ venue_object.name }}"
+    showmap('venue-map-selector', select, lon, lat, htmltext) 
+    {% else %}
+    showmap('venue-map-selector', select) 
+    {% endif %}
+--></script>
+{% endblock extra_javascript %}
 
 {% block content %}
-<h1>{% trans "Update Venue" %}</h1>
+<h1>{% if venue_object %}{% trans "Update Venue" %}{% else %}{% trans "New Venue" %}{% endif %}</h1>
+<div style="float: left;">
 <form action="." method="post">
     	<table>
         	{{ form.as_table }}
     	</table>
     	<p><input type="submit" value="Submit" /></p>
-</form>
-
+    </form>
+</div>
+<div id="venue-map-selector" title="{% trans "Select venue position" %}">&nbsp;</div>
 
 {% endblock %}

=== added file 'loco_directory/venues/migrations/0004_remove_venue_map_field.py'
--- loco_directory/venues/migrations/0004_remove_venue_map_field.py	1970-01-01 00:00:00 +0000
+++ loco_directory/venues/migrations/0004_remove_venue_map_field.py	2010-06-10 03:10:45 +0000
@@ -0,0 +1,46 @@
+
+from south.db import db
+from django.db import models
+from venues.models import *
+
+class Migration:
+    
+    def forwards(self, orm):
+        
+        # Deleting field 'Venue.map_url'
+        db.delete_column('venues_venue', 'map_url')
+        
+    
+    
+    def backwards(self, orm):
+        
+        # Adding field 'Venue.map_url'
+        db.add_column('venues_venue', 'map_url', orm['venues.venue:map_url'])
+        
+    
+    
+    models = {
+        'teams.continent': {
+            'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'name': ('django.db.models.fields.TextField', [], {'max_length': '50'})
+        },
+        'teams.country': {
+            'continents': ('django.db.models.fields.related.ManyToManyField', [], {'to': "orm['teams.Continent']"}),
+            'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'name': ('django.db.models.fields.TextField', [], {'max_length': '100'})
+        },
+        'venues.venue': {
+            'Meta': {'unique_together': "(('name', 'country', 'city'), ('longitude', 'latitude'))"},
+            'address': ('django.db.models.fields.CharField', [], {'max_length': '150', 'null': 'True', 'blank': 'True'}),
+            'city': ('django.db.models.fields.CharField', [], {'max_length': '150', 'null': 'True', 'blank': 'True'}),
+            'comment': ('django.db.models.fields.TextField', [], {'null': 'True', 'blank': 'True'}),
+            'country': ('django.db.models.fields.related.ForeignKey', [], {'to': "orm['teams.Country']", 'null': 'True'}),
+            'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'latitude': ('django.db.models.fields.FloatField', [], {'null': 'True', 'blank': 'True'}),
+            'longitude': ('django.db.models.fields.FloatField', [], {'null': 'True', 'blank': 'True'}),
+            'name': ('django.db.models.fields.CharField', [], {'max_length': '150'}),
+            'venue_url': ('django.db.models.fields.URLField', [], {'max_length': '200', 'null': 'True', 'blank': 'True'})
+        }
+    }
+    
+    complete_apps = ['venues']

=== modified file 'loco_directory/venues/models.py'
--- loco_directory/venues/models.py	2010-06-04 14:02:03 +0000
+++ loco_directory/venues/models.py	2010-06-10 03:10:45 +0000
@@ -21,7 +21,6 @@
     longitude = models.FloatField(help_text=_('Longitude in Degrees East'), null=True, blank=True)
     latitude = models.FloatField(help_text=_('Latitude in Degrees North'), null=True, blank=True)
     venue_url = models.URLField(help_text=_('URL for the Venue Homepage'), verbose_name=_('URL of the Venue'), max_length=200, verify_exists=False, blank=True, null=True)
-    map_url = models.URLField(help_text=_('Map URL for the Venue'), verbose_name=_('URL of the Map'), max_length=200, verify_exists=False, blank=True, null=True)
     comment = models.TextField(help_text=_('Comment about the Venue'), blank=True, null=True)
     
     class Meta:

=== modified file 'loco_directory/venues/views.py'
--- loco_directory/venues/views.py	2010-05-02 13:39:19 +0000
+++ loco_directory/venues/views.py	2010-06-10 03:10:45 +0000
@@ -59,7 +59,7 @@
     context = {
         'form': form,
     }
-    return render_to_response('venues/venue_new.html', 
+    return render_to_response('venues/venue_update.html', 
                                      context, RequestContext(request))
 
 @login_required
@@ -80,6 +80,7 @@
         
     context = {
         'form': form,
+        'venue_object':venue_object,
     }
     return render_to_response('venues/venue_update.html', 
                                      context, RequestContext(request))