load a dataset on page load to not confuse people

max-mapper · Oct 31, 2010 · d839454 · d839454
1 parent f5b6570
commit d839454
Show file tree

Hide file tree

Showing 2 changed files with 117 additions and 115 deletions.
diff --git a/_attachments/pages/index.html b/_attachments/pages/index.html
@@ -81,6 +81,7 @@
         <tr id='section-1'>
           <td id='left_content' class='docs'>
             <h3>coming soon</h3>
+            <p>in the meantime, check out the <a href='http://civicapi.com/preview'>super rough NYC data previewer</a></p>
             <!-- <div class="colmask">
               <h1 class="continent_header"><a name="US"></a>US</h1>
                 <div class="colmid">

diff --git a/_attachments/script/civicapi.js b/_attachments/script/civicapi.js
@@ -1,4 +1,5 @@
-var map, po, geoJson, elements, selectedElement, datasets, currentFeatures, couchUrl = "nycapi.couchone.com", currentDataset = "parks";
+var map, po, geoJson, elements, selectedElement, datasets, currentFeatures, couchUrl = "nycapi.couchone.com", 
+currentDataset = "oem_hospitals";
 function getDbs() {
   $.ajax({
     url: "http://" + couchUrl + "/nycapi/_design/civicapi/_view/datasets",
@@ -42,128 +43,128 @@ $(function(){
   map = po.map()
       .container(document.getElementById("map").appendChild(po.svg("svg")))
       .center({lat: 40.7143528, lon: -74.0059731})
-      .zoom(16)
+      .zoom(14)
       .zoomRange([0, 20])
       .add(po.interact());
 
-      map.add(po.image()
-          .url(po.url("http://{S}tile.cloudmade.com"
-          + "/675b7177e2e14f2c85edf6455ad5cea4" // http://cloudmade.com/register
-          + "/24968/256/{Z}/{X}/{Y}.png")
-          .hosts(["a.", "b.", "c.", ""])));
-
-      geoJson = po.geoJson();
-      geoJson.on("load", function(e){ elements = e.features });
-
-    	geoJson.container()
-    		.addEventListener("mouseover", onMouseOver, false);		
-
-    	geoJson.container()
-    		.addEventListener("mouseout", onMouseOut, false);
-
-    	geoJson.container()
-    		.addEventListener("click", onMouseClick, false);
-
-      showDataset(currentDataset);
-
-      map.add(po.compass()
-          .pan("none"));
-
-      function dataFor(element) {
-        var match;
-        $.each(elements, function(i,el) {
-          if (el.element == element) {
-            match = el;
-            return;
-          }
-        });
-        return match;
-      }
-
-      function onMouseClick(e) {
-      	if (selectedElement) {
-      		selectedElement.setAttribute("class", "hover");
-      	}
-
-      	e.target.setAttribute("class", "selected");
-
-      	selectedElement = e.target;
-      	fetchMetadata(dataFor(e.target).data.properties.couchID);
-      }
-
-      function onMouseOver(e) {
-    	  if (e.target != selectedElement) e.target.setAttribute("class", "hover");
-    	  updateHoverWindow();
-      }
-
-      function onMouseOut(e) {
-        if (e.target != selectedElement) e.target.setAttribute("class", "");  
-        hideHoverWindow();     
-      }
-
-      function initializeUI() {
-      	initializeInfoWindow();
-      	hideHoverWindow();
-      	$(this).mousemove(onMouseMove);
-      }
-
-      function formatMetadata(data) {
-        out = '<dl>';
-        $.each(data, function(key, val) {
-          if (typeof(val) == 'string' && key[0] != '_') {
-            out = out + '<dt>' + key + '<dd>' + val;
-          } else if (typeof(val) == 'object' && key != "geometry" && val != null) {
-            if (key == 'properties') {
-              $.each(val, function(attr, value){
-                out = out + '<dt>' + attr + '<dd>' + value;
-              })
-            } else {
-              out = out + '<dt>' + key + '<dd>' + val.join(', ');
-            }
-          }
-        });
-        out = out + '</dl>';
-        return out;
-      }
-
-      function fetchMetadata(docid) {
-        $.ajax({
-          url: "http://" + couchUrl + "/" + currentDataset + "/" + docid,
-          dataType: 'jsonp',
-          success: function(data){
-            updateInfoWindow(data);
-          }
-        })
-      }
-
-      function initializeInfoWindow() {
-      	$("#infoClose").click(closeInfoWindow);
+  map.add(po.image()
+      .url(po.url("http://{S}tile.cloudmade.com"
+      + "/675b7177e2e14f2c85edf6455ad5cea4" // http://cloudmade.com/register
+      + "/24968/256/{Z}/{X}/{Y}.png")
+      .hosts(["a.", "b.", "c.", ""])));
+
+  geoJson = po.geoJson();
+  geoJson.on("load", function(e){ elements = e.features });
+
+	geoJson.container()
+		.addEventListener("mouseover", onMouseOver, false);		
+
+	geoJson.container()
+		.addEventListener("mouseout", onMouseOut, false);
+
+	geoJson.container()
+		.addEventListener("click", onMouseClick, false);
+
+  showDataset(currentDataset);
+
+  map.add(po.compass()
+      .pan("none"));
+
+  function dataFor(element) {
+    var match;
+    $.each(elements, function(i,el) {
+      if (el.element == element) {
+        match = el;
+        return;
       }
+    });
+    return match;
+  }
 
-      function updateInfoWindow(data) {
-      	$("#info").show("fast");
-      	$("#infoTitle").html('Details');
-      	$("#infoDescription").html(formatMetadata(data));
-      }
+  function onMouseClick(e) {
+  	if (selectedElement) {
+  		selectedElement.setAttribute("class", "hover");
+  	}
 
-      function closeInfoWindow() {
-      	$("#info").hide("fast");
-      	selectedElement.setAttribute("class", "");  
-      	selectedElement = null;
-      }
+  	e.target.setAttribute("class", "selected");
 
-      function updateHoverWindow() {
-      	$("#hoverLabel").show().html("View more info");
-      }
+  	selectedElement = e.target;
+  	fetchMetadata(dataFor(e.target).data.properties.couchID);
+  }
 
-      function hideHoverWindow() {
-      	$("#hoverLabel").hide();
+  function onMouseOver(e) {
+	  if (e.target != selectedElement) e.target.setAttribute("class", "hover");
+	  updateHoverWindow();
+  }
+
+  function onMouseOut(e) {
+    if (e.target != selectedElement) e.target.setAttribute("class", "");  
+    hideHoverWindow();     
+  }
+
+  function initializeUI() {
+  	initializeInfoWindow();
+  	hideHoverWindow();
+  	$(this).mousemove(onMouseMove);
+  }
+
+  function formatMetadata(data) {
+    out = '<dl>';
+    $.each(data, function(key, val) {
+      if (typeof(val) == 'string' && key[0] != '_') {
+        out = out + '<dt>' + key + '<dd>' + val;
+      } else if (typeof(val) == 'object' && key != "geometry" && val != null) {
+        if (key == 'properties') {
+          $.each(val, function(attr, value){
+            out = out + '<dt>' + attr + '<dd>' + value;
+          })
+        } else {
+          out = out + '<dt>' + key + '<dd>' + val.join(', ');
+        }
       }
-
-      function onMouseMove(e) {
-      	$("#hoverLabel").css('top',  e.pageY + 10);
-      	$("#hoverLabel").css('left', e.pageX + 10);
+    });
+    out = out + '</dl>';
+    return out;
+  }
+
+  function fetchMetadata(docid) {
+    $.ajax({
+      url: "http://" + couchUrl + "/" + currentDataset + "/" + docid,
+      dataType: 'jsonp',
+      success: function(data){
+        updateInfoWindow(data);
       }
-
-      initializeUI();
+    })
+  }
+
+  function initializeInfoWindow() {
+  	$("#infoClose").click(closeInfoWindow);
+  }
+
+  function updateInfoWindow(data) {
+  	$("#info").show("fast");
+  	$("#infoTitle").html('Details');
+  	$("#infoDescription").html(formatMetadata(data));
+  }
+
+  function closeInfoWindow() {
+  	$("#info").hide("fast");
+  	selectedElement.setAttribute("class", "");  
+  	selectedElement = null;
+  }
+
+  function updateHoverWindow() {
+  	$("#hoverLabel").show().html("View more info");
+  }
+
+  function hideHoverWindow() {
+  	$("#hoverLabel").hide();
+  }
+
+  function onMouseMove(e) {
+  	$("#hoverLabel").css('top',  e.pageY + 10);
+  	$("#hoverLabel").css('left', e.pageX + 10);
+  }
+
+  initializeUI();
 })