Part II of Bug 356607 -- more to come! [p=ryan@ryanflint.com]

webtools/partytool/controllers/parties_controller.php

@@ -45,7 +45,20 @@ class PartiesController extends AppController {
   function index() {
     $this->pageTitle = 'Party Map';
     $this->set('current', 'map');
-    $this->set('map', 'initMashUp()');
+
+    if (!empty($this->data)) {
+      $gcoder = new webServices(array('type' => 'geocode'));
+      $loc = $gcoder->geocode($this->data['Party']['mloc']);
+      
+      if ($loc)
+        $this->set('map', 'initMashUp('.$loc['lat'].', '.$loc['lng'].');');
+
+      else
+        $this->set('map', 'initMashUp();');
+    }
+
+    else
+      $this->set('map', 'initMashUp();');
   }
 
   function add() {
@@ -440,11 +453,20 @@ class PartiesController extends AppController {
     $this->redirect('/parties/view/'.$pid);
   }
 
-  function js() {
+  function js($type = null, $data = null) {
     $this->layout = 'ajax';
-    header('Content-type: text/javascript');
-    $parties = $this->Party->findAll();
-    $this->set('parties', $parties);
+
+    if ($type == 'html') {
+      header('Content-type: text/plain');
+      $party = $this->Party->findById($data);
+      $this->set('party', $party);
+    }
+
+    else {
+      header('Content-type: text/javascript');
+      $parties = $this->Party->findAll();
+      $this->set('parties', $parties);
+    }
   }
 }
 ?>

webtools/partytool/vendors/webServices.php

@@ -151,7 +151,7 @@ class webServices {
       if (stristr($results, '<code>200</code>')) {
         preg_match('/coordinates>(.*)</', $results, $matches);
         $ll = explode(',', $matches[1]);          
-        $rv = array('lat' => $ll[0], 'lng' => $ll[1]);
+        $rv = array('lat' => $ll[1], 'lng' => $ll[0]);
         return $rv;
       }
     }

webtools/partytool/views/parties/index.thtml

@@ -1,7 +1,19 @@
 <?php if(GMAP_API_KEY != null): ?>
-<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=<?php echo GMAP_API_KEY; ?>"
-      type="text/javascript"></script>
+<div style="text-align: center">
+  <form action="<?php echo $html->url('/parties/'); ?>" class="fxform" onsubmit="search(event)" method="post">
+    <label for="PartyMloc"><strong>Find a party:</strong></label>
+    <?php echo $html->input('Party/mloc', array('size' => 60, 'id' => 'location')).' '.$html->submit('Search'); ?>
+    <div id="locerr" class="info" style="display: none">Did you mean: <a id="locerrlink" onclick="geocode_suggest()" href="#"></a>?  <a href="#" onclick="shide()"><span style="font-size: x-small">(close)</span></a></div>
+  </form>
+</div>
+<br/>
+<script src="http://maps.google.com/maps?file=api&amp;v=2.67&amp;key=<?php echo GMAP_API_KEY; ?>"
+        type="text/javascript"></script>
 <script src="<?php echo $html->url('/js/maps.js'); ?>" type="text/javascript"></script>
 <script src="<?php echo $html->url('/parties/js'); ?>" type="text/javascript"></script>
-<div id="map" class="large-map"/>
+<div id="map" class="large-map"></div>
+<div id="map-load" style="visibility: hidden" class="load">
+  <img src="<?php echo $html->url('/img/throbber.gif'); ?>"/>
+  Loading...
+</div>
 <?php endif; ?>

webtools/partytool/views/parties/js.thtml

@@ -1,6 +1,11 @@
+<?php if (isset($party)): ?>
+<strong><?php echo $party['Party']['name']?></strong><br/><?php echo $party['Party']['vname']; ?><br/><a href="<?php echo $html->url('/parties/view/'.$party['Party']['id'])?>">View Party</a>
+<?php else: ?>
 function addParties() {
 <?php foreach ($parties as $party):
   if (!empty($party['Party']['lat']) && !empty($party['Party']['long']) && !$party['Party']['canceled']): ?>
-addParty(<?php echo $party['Party']['lat'];?>, <?php echo $party['Party']['long']?>, "<strong><?php echo $party['Party']['name']?></strong><br/><?php echo $party['Party']['vname']; ?><br/><a href=\"<?php echo $html->url('/parties/view/'.$party['Party']['id'])?>\">View Party</a>");
+addParty(<?php echo $party['Party']['lat'];?>, <?php echo $party['Party']['long']?>, <?php echo $party['Party']['id']; ?>);
 <?php endif; endforeach;?>
 }
+//
+<?php endif; ?>

webtools/partytool/webroot/css/main.css

@@ -82,6 +82,8 @@
 .small-map { width: 400px; height: 200px;}
 .small-map div { margin: 0; }
 
+.load { width: 700px; margin: 0 auto; padding-top: 5px; }
+
 .comment { 
   border: 1px solid #ccc;
   border-top: 0;

webtools/partytool/webroot/js/maps.js

@@ -1,5 +1,20 @@
 var map;
 var marker;
+var mouseloc;
+
+function wheelZoom(event) {
+  function out() {
+    map.setCenter(mouseloc);
+    map.zoomOut();
+  }
+
+  if (event.cancelable) event.preventDefault();
+  {
+    (event.detail || -event.wheelDelta) < 0 ? map.zoomIn(mouseloc, true) : out();
+  }
+
+  return false; 
+}
 
 function mapInit(aLat, aLng, aZoom, aState) {
   map = new GMap2(document.getElementById("map"));
@@ -28,6 +43,28 @@ function mapInit(aLat, aLng, aZoom, aState) {
   }
 }
 
+function search(event) {
+  document.getElementById('map-load').setAttribute('style', '');
+  
+  if (event.cancelable) event.preventDefault();
+  {
+    var q = document.getElementById('location').value;
+    var gcoder = new GClientGeocoder();
+    gcoder.getLatLng(q, function (point) {
+      if (!point) {
+        suggest(q);
+        document.getElementById('map-load').setAttribute('style', 'visibility: hidden');
+      }
+      else {
+        map.setZoom(10);
+        map.panTo(point);
+        document.getElementById('map-load').setAttribute('style', 'visibility: hidden');
+      }
+    });
+  }
+  return false;
+}
+
 function geocode(aLoc) {
     var gcoder = new GClientGeocoder();
     gcoder.getLatLng(aLoc, function (point) {
@@ -75,11 +112,29 @@ function onDragEnd() {
   map.panTo(point);
 }
 
-function initMashUp() {
+function initMashUp(lat, lng) {
   map = new GMap2(document.getElementById("map"));
+  map.enableDoubleClickZoom();
+  map.enableContinuousZoom();
   map.addControl(new GLargeMapControl());
   map.addControl(new GMapTypeControl());
   map.setCenter(new GLatLng(0, -5.25), 1);
+  GEvent.addDomListener(document.getElementById("map"), "DOMMouseScroll", wheelZoom);
+  GEvent.addDomListener(document.getElementById("map"), "mousewheel",     wheelZoom);
+  GEvent.addListener(map, "mousemove", function(point) { mouseloc = point; });
+  GEvent.addListener(map, "click", function(overlay, point) {
+    if (overlay) {
+      if (overlay.mid) {
+        downloadMarker(overlay.mid, overlay);
+      }
+    }
+  });
+
+  if (lat && lng)
+    map.setCenter(new GLatLng(lat, lng), 10);
+  else
+    map.setCenter(new GLatLng(0, -5.25), 1);
+
   addParties();
 }
 
@@ -94,11 +149,24 @@ function shide() {
   document.getElementById('locerr').setAttribute('style', 'display: none');
 }
 
-function addParty(aLat, aLng, aTxt) {
-  var point = new GLatLng(aLat, aLng);
-  var mark = new GMarker(point);
-  GEvent.addListener(mark, "click", function() {
-    mark.openInfoWindowHtml(aTxt);
+function downloadMarker(mid, overlay) {
+  document.getElementById('map-load').setAttribute('style', '');
+  GDownloadUrl("/parties/js/html/" + mid, function(data, responseCode) {
+    if (data != "" && responseCode == 200) {
+      document.getElementById('map-load').setAttribute('style', 'visibility: hidden');
+      overlay.openInfoWindowHtml(data);
+    }
   });
+}
+
+function addParty(aLat, aLng, aId) {
+  var point = new GLatLng(aLat, aLng);
+  var icon = new GIcon();
+  icon.image = "/img/marker.png";
+  icon.iconSize = new GSize(12, 20);
+  icon.iconAnchor = new GPoint(6, 20);
+  icon.infoWindowAnchor = new GPoint(5, 1);
+  var mark = new GMarker(point, icon);
+  mark.mid = aId;
   map.addOverlay(mark);
 }