view membermap/static/js/membermap.js @ 821:71db8076dc3d

Bandmap WIP: geocoding integrated with add form. Add form works. Before submitting the form, client side JS makes a geocode request to Google and populates hidden lat/lon fields with the result. Successfully created a model instance on the server side. Still need to update admin dashboard, admin approval, and give out badges for adding bands to the map. Once that is done, then work on displaying the map with filtering.
author Brian Neal <bgneal@gmail.com>
date Tue, 23 Sep 2014 20:40:31 -0500
parents ee87ea74d46b
children 6164cc091649
line wrap: on
line source
var mmap = {
   map: null,
   geocoder: null,
   users: Object,
   userOnMap: false,
   userClick: function() {
      var name = $('option:selected', this).text();
      if (name != mmap.selectText)
      {
         mmap.clickUser(name);
      }
   },
   clickUser: function(name) {
      pt = new GLatLng(mmap.users[name].lat, mmap.users[name].lon);
      mmap.map.setCenter(pt);
      mmap.users[name].marker.openInfoWindowHtml(mmap.users[name].message);
   },
   clear: function() {
      mmap.users.length = 0;
   },
   selectText: "(select)",
   onMapDir: 'You have previously added yourself to the member map. Your information appears below. You may change ' +
      'the information if you wish. To delete yourself from the map, click the Delete button.',
   offMapDir: 'Your location is not on the map. If you would like to appear on the map, please fill out the form below ' +
      'and click the Submit button.'
};
$(document).ready(function() {
   if (GBrowserIsCompatible())
   {
      $(window).unload(GUnload);
      mmap.map = new GMap2($('#member_map_map')[0]);
      mmap.map.setCenter(new GLatLng(15.0, -30.0), 2);
      mmap.map.enableScrollWheelZoom();
      mmap.map.addControl(new GLargeMapControl());
      mmap.map.addControl(new GMapTypeControl());
      mmap.geocoder = new GClientGeocoder();

      if (mmapUser.userName)
      {
         $.getJSON('/member_map/query/', 
            function(data) {
               mmap.map.clearOverlays();
               var sel = $('#member_map_members');
               sel[0].length = 0;
               sel.append($('<option />').html(mmap.selectText));
               mmap.clear();
               $.each(data.users, function(i, item) {
                  sel.append($('<option />').html(item.name));
                  var marker = new GMarker(new GLatLng(item.lat, item.lon));
                  marker.bindInfoWindowHtml(item.message);
                  mmap.map.addOverlay(marker);
                  mmap.users[item.name] = item;
                  mmap.users[item.name].marker = marker;
                  if (mmapUser.userName == item.name)
                  {
                     mmap.userOnMap = true;
                  }
               });
               $('#member_map_count').html(data.users.length);

               sel = $('#member_map_recent');
               sel[0].length = 0;
               sel.append($('<option />').html(mmap.selectText));
               $.each(data.recent, function(i, item) {
                  sel.append($('<option />').html(item));
               });
               var submitButton = $('#member_map_submit');
               var deleteButton = $('#member_map_delete');

               submitButton.click(function() {
                  if (mmap.geocoder)
                  {
                     $(this).attr('disabled', 'disabled').val('Updating Map...');
                     var address = $('#id_location').val();
                     mmap.geocoder.getLatLng(address, 
                        function(point) { 
                           if (!point)
                           {
                              alert(address + ' could not be found on Google Maps.');
                              submitButton.removeAttr('disabled').val('Update');
                              return;
                           }
                           $.ajax({
                              url: '/member_map/add/', 
                              type: 'POST',
                              data: {
                                 loc : address,
                                 lat : point.lat(),
                                 lon : point.lng(),
                                 msg : $('#id_message').val()
                              },
                              dataType: 'json',
                              success: function(data, textStatus) {
                                 var wasOnMap = mmap.userOnMap;
                                 if (mmap.userOnMap)
                                 {
                                    mmap.map.removeOverlay(mmap.users[mmapUser.userName].marker);
                                 }
                                 else
                                 {
                                    $('#member_map_members').append($('<option />').html(data.name));
                                    $('#member_map_recent').append($('<option />').html(data.name));
                                    mmap.userOnMap = true;
                                    deleteButton.removeAttr('disabled').val('Delete');
                                 }
                                 var marker = new GMarker(new GLatLng(data.lat, data.lon));
                                 marker.bindInfoWindowHtml(data.message);
                                 mmap.map.addOverlay(marker);
                                 mmap.users[mmapUser.userName] = data;
                                 mmap.users[mmapUser.userName].marker = marker;
                                 mmap.clickUser(mmapUser.userName);
                                 submitButton.removeAttr('disabled').val('Update');
                                 $('#member_map_directions').html(mmap.onMapDir);
                                 $('#member_map_count').html($('#member_map_members')[0].length - 1);
                                 alert(wasOnMap ? "Your location has been updated!" : 
                                       "You've been added to the map!");
                              },
                              error: function (xhr, textStatus, ex) {
                                 alert('Oops, an error occurred. ' + xhr.statusText + ' - ' + 
                                    xhr.responseText);
                              }
                           });
                     });
                  }
                  return false;
               });

               deleteButton.click(function() {
                  deleteButton.attr('disabled', 'disabled').val('Deleting...');
                  $.ajax({ 
                     url: '/member_map/delete/', 
                     type: 'POST',
                     dataType: 'text',
                     success: function(data, textStatus) {
                        $('#id_location').val('');
                        $('#id_message').val('');
                        $("#member_map_members option[value='" + mmapUser.userName + "']").remove();
                        $("#member_map_recent option[value='" + mmapUser.userName + "']").remove();
                        mmap.map.removeOverlay(mmap.users[mmapUser.userName].marker);
                        mmap.users[mmapUser.userName].marker = null;
                        mmap.users[mmapUser.userName] = null;
                        mmap.userOnMap = false;
                        deleteButton.val('Delete');
                        submitButton.removeAttr('disabled').val('Add');
                        $('#member_map_directions').html(mmap.offMapDir);
                        $('#member_map_count').html($('#member_map_members')[0].length - 1);
                        alert("You've been removed from the map.");
                     },
                     error: function (xhr, textStatus, ex) {
                        alert('Oops, an error occurred. ' + xhr.statusText + ' - ' + 
                           xhr.responseText);
                     }
                  });
                  return false;
               });
               
               if (mmap.userOnMap)
               {     
                  submitButton.val('Update');
                  $('#member_map_directions').html(mmap.onMapDir);
               }
               else
               {
                  submitButton.val('Add');
                  deleteButton.attr('disabled', 'disabled');
                  $('#member_map_directions').html(mmap.offMapDir);
               }
         });
         $('#member_map_members').change(mmap.userClick);
         $('#member_map_recent').change(mmap.userClick);
      }
   }
});