Load notice data using javascript from the html on the page instead of writing json representations of the notices on each page

Clicking on a geo link pops up a map

plugins/Mapstraction/MapstractionPlugin.php

@@ -110,11 +110,6 @@ class MapstractionPlugin extends Plugin
     function onEndShowScripts($action)
     {
         $actionName = $action->trimmed('action');
-        // These are the ones that have maps on 'em
-        if (!in_array($actionName,
-                      array('showstream', 'all', 'allmap', 'usermap'))) {
-            return true;
-        }
 
         switch ($this->provider)
         {
@@ -151,37 +146,6 @@ class MapstractionPlugin extends Plugin
         $action->raw(sprintf('var _provider = "%s";', $this->provider));
         $action->elementEnd('script');
 
-        switch ($actionName) {
-        case 'usermap':
-        case 'showstream':
-            $notice = empty($action->tag)
-              ? $action->user->getNotices(($action->page-1)*NOTICES_PER_PAGE, NOTICES_PER_PAGE + 1)
-                : $action->user->getTaggedNotices($action->tag, ($action->page-1)*NOTICES_PER_PAGE, NOTICES_PER_PAGE + 1, 0, 0, null);
-            break;
-        case 'all':
-        case 'allmap':
-            $cur = common_current_user();
-            if (!empty($cur) && $cur->id == $action->user->id) {
-                $notice = $action->user->noticeInbox(($action->page-1)*NOTICES_PER_PAGE, NOTICES_PER_PAGE + 1);
-            } else {
-                $notice = $action->user->noticesWithFriends(($action->page-1)*NOTICES_PER_PAGE, NOTICES_PER_PAGE + 1);
-            }
-            break;
-        }
-
-        $jsonArray = array();
-
-        while ($notice->fetch()) {
-            if (!empty($notice->lat) && !empty($notice->lon)) {
-                $jsonNotice = $this->noticeAsJson($notice);
-                $jsonArray[] = $jsonNotice;
-            }
-        }
-
-        $action->elementStart('script', array('type' => 'text/javascript'));
-        $action->raw('var _notices = ' . json_encode($jsonArray));
-        $action->elementEnd('script');
-
         return true;
     }
 
@@ -212,34 +176,4 @@ class MapstractionPlugin extends Plugin
 
         $action->elementEnd('div');
     }
-
-    function noticeAsJson($notice)
-    {
-        // FIXME: this code should be abstracted to a neutral third
-        // party, like Notice::asJson(). I'm not sure of the ethics
-        // of refactoring from within a plugin, so I'm just abusing
-        // the ApiAction method. Don't do this unless you're me!
-
-        require_once(INSTALLDIR.'/lib/api.php');
-
-        $act = new ApiAction('/dev/null');
-
-        $arr = $act->twitterStatusArray($notice, true);
-        $arr['url'] = $notice->bestUrl();
-        $arr['html'] = htmlspecialchars($notice->rendered);
-        $arr['source'] = htmlspecialchars($arr['source']);
-
-        if (!empty($notice->reply_to)) {
-            $reply_to = Notice::staticGet('id', $notice->reply_to);
-            if (!empty($reply_to)) {
-                $arr['in_reply_to_status_url'] = $reply_to->bestUrl();
-            }
-            $reply_to = null;
-        }
-
-        $profile = $notice->getProfile();
-        $arr['user']['profile_url'] = $profile->profileurl;
-
-        return $arr;
-    }
 }

plugins/Mapstraction/usermap.js

@@ -1,14 +1,82 @@
 $(document).ready(function() {
-     var mapstraction = new mxn.Mapstraction("map_canvas", _provider);
+     notices = [];
+     $(".notice").each(function(){
+        notice = getNoticeFromElement($(this));
+        if(notice['geo'])
+            notices.push(notice);
+     });
+     if($("#map_canvas") && notices.length>0)
+     {
+        showMapstraction($("#map_canvas"), notices);
+     }
+
+     $('a.geo').click(function(){
+        noticeElement = $(this).closest(".notice");
+        notice = getNoticeFromElement(noticeElement);
+
+        $.fn.jOverlay.options = {
+            color : '#000',
+            opacity : '0.6',
+            zIndex : 99,
+            center : false,
+            bgClickToClose : true,
+            autoHide : true,
+            css : {'max-width':'542px', 'top':'5%', 'left':'32.5%'}
+        };
+        html="<div id='map_canvas_popup' class='gray smallmap' style='width: 542px; height: 500px' />";
+        html+="<button class='close'>&#215;</button>";
+        html+=$("<div/>").append($(this).clone()).html();
+        $().jOverlay({ "html": html });
+        $('#jOverlayContent').show();
+        $('#jOverlayContent button').click($.closeOverlay);
+        
+        showMapstraction($("#map_canvas_popup"), notice);
+
+        return false;
+     });
+});
+
+function getMicroformatValue(element)
+{
+    if(element[0].tagName.toLowerCase() == 'abbr'){
+        return element.attr('title');
+    }else{
+        return element.text();
+    }
+}
+
+function getNoticeFromElement(noticeElement)
+{
+    notice = {};
+    if(noticeElement.find(".latitude").length){
+        notice['geo']={'coordinates': [
+            parseFloat(getMicroformatValue(noticeElement.find(".latitude"))),
+            parseFloat(getMicroformatValue(noticeElement.find(".longitude")))] };
+    }
+    notice['user']={
+        'profile_image_url': noticeElement.find("img.avatar").attr('src'),
+        'profile_url': noticeElement.find(".author a.url").attr('href'),
+        'screen_name': noticeElement.find(".author .nickname").text()
+    };
+    notice['html']=noticeElement.find(".entry-content").html();
+    notice['url']=noticeElement.find("a.timestamp").attr('href');
+    notice['created_at']=noticeElement.find("abbr.published").text();
+    return notice;
+}
+
+function showMapstraction(element, notices) {
+     if(element instanceof jQuery) element = element[0];
+     if(! $.isArray(notices)) notices = [notices];
+     var mapstraction = new mxn.Mapstraction(element, _provider);
 
      var minLat = 181.0;
      var maxLat = -181.0;
      var minLon = 181.0;
      var maxLon = -181.0;
 
-     for (var i in _notices)
+     for (var i in notices)
      {
-          var n = _notices[i];
+          var n = notices[i];
 
           var lat = n['geo']['coordinates'][0];
           var lon = n['geo']['coordinates'][1];
@@ -42,4 +110,4 @@ $(document).ready(function() {
      bounds = new mxn.BoundingBox(minLat, minLon, maxLat, maxLon);
 
      mapstraction.setBounds(bounds);
-});
+}