Add Google Maps integration for Role profiles create/edit views.
authorPawel Solyga <Pawel.Solyga@gmail.com>
Sun, 01 Feb 2009 16:10:20 +0000
changeset 1152 b82caf7bb17c
parent 1151 3116b927f4b9
child 1153 4804f7f5a7c0
Add Google Maps integration for Role profiles create/edit views. Now when editing/creating your Role Profile page Google Maps widget will show up at the bottom of the form as "Location" field. When you type in your Street, City, Country or State it will automatically update the map with the location based on your address. The zoom level depends on the address information you provided. So for example if you just select Country it will be different then when you select both Country and City. The longitude and latitude fields are hidden and are updated with the coordinates from the address you provided. Also if the map is not accurate enough you can adjust your location by dragging the red market, which will change your location and save new coordinates into hidden fields. This patch also includes some style fixes in soc.views.models.role module. Patch by: Mario Ferraro & Pawel Solyga Reviewed by: Pawel Solyga
app/soc/content/css/soc-090120.css
app/soc/content/js/map-090201.js
app/soc/templates/soc/role/edit.html
app/soc/views/models/role.py
--- a/app/soc/content/css/soc-090120.css	Sun Feb 01 16:09:43 2009 +0000
+++ b/app/soc/content/css/soc-090120.css	Sun Feb 01 16:10:20 2009 +0000
@@ -281,6 +281,12 @@
   text-align: right;
 }
 
+/* Google Map */
+#role_profile_map {
+  height: 240px;
+  width: 320px;
+}
+
 /* SIDEBAR MENU */
 #side {
   width: 200px;
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/app/soc/content/js/map-090201.js	Sun Feb 01 16:10:20 2009 +0000
@@ -0,0 +1,175 @@
+role_profile_gmap = new function(){
+  // Create global variables
+  var map;
+  var marker;
+  var geocoder;
+
+  // The following strings can be customized to reflect ids in the page. 
+  // You can also add or remove fields used for GMap Geocoding in 
+  // the JSON address object
+
+  var current_lat = 0;
+  var current_lng = 0;
+
+  // Two different levels for zoom: Starting one and an inner that 
+  // is used when showing the map if lat and lon page fields are set
+  var world_zoom = 0;
+  var country_zoom = 4;
+  var state_zoom = 6;
+  var city_zoom = 10;
+  var address_zoom = 13;
+
+  // Do not add a starting # as this JQuery selector seems 
+  // incompatible with GMap API
+  var map_div = "role_profile_map";
+
+  var field_lat = "#id_latitude";
+  var field_lng = "#id_longitude";
+  // Need to save old values to avoid unwanted updating 
+  // of lat and lot if marker dragged and blur another time an address field
+  var address = {
+    street: {
+      id: "#id_res_street",
+      old_value: ""
+    },
+    city: {
+      id: "#id_res_city",
+      old_value: ""
+    },
+    state: {
+      id: "#id_res_state",
+      old_value: ""
+    },
+    country: {
+      id: "#id_res_country",
+      old_value: ""
+    },
+    postalcode: {
+      id: "#id_res_postalcode",
+      old_value: ""
+    }
+  }
+
+  // Save current address fields in the JSON Object
+  function saveOldAddress() {
+    for (var a in address) {
+      address[a].old_value = $(address[a].id).val();
+    }
+  }
+
+  // Return true if the user has edited address fields
+  function isNewAddress() {
+    for (var a in address) {
+      if ($(address[a].id).val() != address[a].old_value) return true;
+    }
+    return false;
+  }
+
+  // Write saved lat and lng values to page fields
+  function setLatLngFields() {
+    $(field_lat).val(current_lat);
+    $(field_lng).val(current_lng);
+  }
+
+  // Read lat and lng fields and store them
+  function readLatLngFields() {
+    current_lat = $(field_lat).val();
+    current_lng = $(field_lng).val();
+  }
+
+  // This function reads address fields, merge them and uses 
+  // GMap API geocoding to find the first hit
+  // Using geocoding http://code.google.com/intl/it-IT/apis/maps/documentation/services.html#Geocoding
+  function calculateAddress() {
+    // If the user has really edited address fields...
+    if (isNewAddress()) {
+      // Merge address fields
+      var address_string = "";
+      for (var a in address) {
+        address_string+=$(address[a].id).val();
+        if (a!=address.length-1) {address_string+=","};
+      }
+
+      // Ask GMap API for geocoding
+      geocoder.getLatLng(
+        address_string,
+        function(point) {
+          // If a point is found
+          if (point) {
+            // Save the current address in the JSON object
+            saveOldAddress();
+            // Set the new zoom, map center and marker coords
+            var zoom_set = world_zoom;
+            if ($(address.street.id).val()!="") zoom_set = address_zoom;
+            else if ($(address.city.id).val()!="") zoom_set = city_zoom;
+            else if ($(address.state.id).val()!="") zoom_set = state_zoom;
+            else if ($(address.country.id).val()!="") zoom_set = country_zoom;
+            map.setCenter(point, zoom_set);
+            marker.setPoint(point);
+            map.clearOverlays();
+            map.addOverlay(marker);
+            // Save point coords in local variables and then update 
+            // the page lat/lng fields
+            current_lat = point.lat();
+            current_lng = point.lng();
+            setLatLngFields();
+          }
+        }
+      );
+    }
+  }
+
+  // Public function to load the map
+  this.map_load = function() {
+    // All can happen only if there is gmap compatible browser.
+    // TODO: Fallback in case the browser is not compatible
+    if (GBrowserIsCompatible()) {
+      // Save the address fields. This is useful if the page is being edited 
+      // to not update blindly the lat/lng fields with GMap geocoding if 
+      // blurring an address field
+      saveOldAddress();
+      var starting_point;
+      var zoom_selected = world_zoom;
+      var show_marker = false;
+
+      // Create the map and add small controls
+      map = new GMap2(document.getElementById(map_div));
+      map.addControl(new GSmallMapControl());
+      map.addControl(new GMapTypeControl());
+
+      // Instantiate a global geocoder for future use
+      geocoder = new GClientGeocoder();
+
+      // If lat and lng fields are not void (the page is being edited) then 
+      // update the starting coords, modify the zoom level and tells following 
+      // code to show the marker
+      if ($(field_lat).val()!="" && $(field_lng).val()!="") {
+        readLatLngFields();
+        zoom_selected = address_zoom;
+        show_marker = true;
+      }
+      
+      // Set map center, marker coords and show it if this is an editing
+      starting_point = new GLatLng(current_lat,current_lng);
+      map.setCenter(starting_point, zoom_selected);
+      marker = new GMarker(starting_point, {draggable:true});
+      if (show_marker) map.addOverlay(marker);
+      
+      // Adds a new event listener to geocode the address when an address 
+      // field is blurred
+      for (var a in address) {
+        $(address[a].id).blur(calculateAddress);
+      }
+      
+      // Adds a new event listener: if the marker has been dragged around...
+      GEvent.addListener(marker, "dragend", function() {
+        // Update internal variables with current marker coords...
+        current_lat = marker.getPoint().lat();
+        current_lng = marker.getPoint().lng();
+        // ...and set page fields accordingly
+        setLatLngFields();
+      });
+    }
+  }
+};
+
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/app/soc/templates/soc/role/edit.html	Sun Feb 01 16:10:20 2009 +0000
@@ -0,0 +1,91 @@
+{% extends "soc/base.html" %}
+{% comment %}
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+{% endcomment %}
+{% load forms_helpers %}
+
+{% block scripts %}
+	<script type="text/javascript" src="/tiny_mce/tiny_mce_src.js"></script>
+{% if gmaps_api_key %}
+	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key={{ gmaps_api_key }}" type="text/javascript"></script>
+	<script type="text/javascript" src="/soc/content/js/map-090201.js"></script>
+{% endif %}
+{% endblock %}
+{% block header_title %}
+{{ page_name }}
+ {% if entity %}
+   <!-- TODO(srabbelier) use a generic entity name as link -->
+   <a href="/{{ entity_type_url|lower }}/show/{{ entity_suffix }}"
+>{% if entity.name %}{{ entity.name }} {% endif %}(public view)</a>
+ {% endif %}
+{% endblock %}
+
+{% block body %}
+{% block body_tag %}
+  {% if gmaps_api_key %}
+    <body onLoad="role_profile_gmap.map_load()" onunload="GUnload()">
+  {% else %}
+    {{ block.super }}
+  {% endif %}
+{% endblock %}
+<p>
+<p>
+{% block instructions %}
+Please use this form to edit the {{ entity_type }}.
+{% if not gmaps_api_key %}
+<br /><span class="error">Google Maps API key not present: please login as administrator and insert your key in Site, Edit Site Settings, Google Maps field</span>
+{% endif %}
+{% endblock %}
+</p>
+<form method="POST">
+  <table>
+    {% block form_table %}
+      {% as_table form %}
+    {% endblock %}
+    {% if gmaps_api_key %}
+    <tr title="your location">
+      <td class="formfieldlabel">
+        <label for="id_location">Location:</label>
+      </td>
+      <td>
+        <div id="role_profile_map"></div>
+      </td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    {% endif %}
+  </table>
+  <table>
+  <tr>
+   <td colspan="4">&nbsp;</td>
+  </tr>
+  <tr>
+    {% block submit_buttons %}
+   <td> 
+    <input style="font-weight: bold" type="submit" value="Save Changes"/></span>
+   </td>
+   <td>
+    <input type="button" onclick="location.href='/'" value="Cancel"/>
+   </td>
+   {% if entity %}
+   <td>
+    <input type="button" onclick="location.href='/{{ entity_type_url|lower }}/delete/{{ entity_suffix }}'" value="Delete"/>
+   </td>
+   {% endif %}
+   {% endblock %}
+  </tr>
+ </table>
+</form>
+</p>
+{% endblock %}
--- a/app/soc/views/models/role.py	Sun Feb 01 16:09:43 2009 +0000
+++ b/app/soc/views/models/role.py	Sun Feb 01 16:10:20 2009 +0000
@@ -115,12 +115,16 @@
 
     new_params['extra_django_patterns'] = patterns
     new_params['scope_redirect'] = redirects.getInviteRedirect
+    new_params['create_template'] = 'soc/role/edit.html'
+    new_params['edit_template'] = 'soc/role/edit.html'
 
     new_params['create_extra_dynafields'] = {
-       'clean_link_id' : cleaning.clean_existing_user('link_id'),
-       'clean_home_page' : cleaning.clean_url('home_page'),
-       'clean_blog' : cleaning.clean_url('blog'),
-       'clean_photo_url' : cleaning.clean_url('photo_url'),
+       'latitude':forms.fields.FloatField(widget=forms.HiddenInput),
+       'longitude': forms.fields.FloatField(widget=forms.HiddenInput),
+       'clean_link_id': cleaning.clean_existing_user('link_id'),
+       'clean_home_page': cleaning.clean_url('home_page'),
+       'clean_blog': cleaning.clean_url('blog'),
+       'clean_photo_url': cleaning.clean_url('photo_url'),
        'scope_path': forms.CharField(widget=forms.HiddenInput,
                                   required=True),
        }
@@ -137,7 +141,7 @@
   @decorators.merge_params
   @decorators.check_access
   def invite(self, request, access_type,
-                   page_name=None, params=None, **kwargs):
+             page_name=None, params=None, **kwargs):
     """Creates the page on which an invite can be send out.
 
     Args:
@@ -369,7 +373,7 @@
   @decorators.merge_params
   @decorators.check_access
   def manage(self, request, access_type,
-                   page_name=None, params=None, **kwargs):
+             page_name=None, params=None, **kwargs):
     """Handles the request concerning the view that let's 
        you manage a role's status.
 
@@ -422,7 +426,7 @@
   @decorators.merge_params
   @decorators.check_access
   def request(self, request, access_type,
-                   page_name=None, params=None, **kwargs):
+              page_name=None, params=None, **kwargs):
     """Handles the request concerning the view that creates a request
     for attaining a certain Role.
 
@@ -528,7 +532,7 @@
   @decorators.merge_params
   @decorators.check_access
   def processRequest(self, request, access_type,
-                   page_name=None, params=None, **kwargs):
+                     page_name=None, params=None, **kwargs):
     """Creates the page upon which a request can be processed.
 
     Args:
@@ -596,7 +600,7 @@
       return False
 
     # check if the role already exists
-    fields = {'scope' : request_fields['scope'],
+    fields = {'scope': request_fields['scope'],
         'link_id': request_fields['link_id'],
         'status': ['active','inactive'],
         }