added unchecking

boazsender · Feb 26, 2011 · d09759c · d09759c
1 parent 29f83a7
commit d09759c
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 173 deletions.
diff --git a/map.html b/map.html
@@ -11,34 +11,8 @@
   <script type="text/javascript" src="script/jquery-1.4.4.min.js"></script>
   <script type="text/javascript" src="script/jquery.selectbox.js"></script>
   <script type="text/javascript" src="script/correlates.js"></script>
-  <script>
-    $.ajax({ 
-      url: "http://civicapi.com/datasets?",
-      dataType: 'jsonp', 
-      success: function(data){ 
-        $.each(data.datasets, function( i, item ){
-          $('<li>', {
-            class: item.name,
-            html: '<input type="checkbox"/>' + item.name.replace('_', ' ')
-          })
-          .appendTo('.sidebar')
-        })
-      } 
-    }); 
-
-    $('[type=checkbox]').live('click', function(){
-      showDataset('bos_' + $(this).parent().attr('class'));
-    });
-
-  </script>
 </head>
 <body>
-  <!-- <div class="topbar">
-    <span class="blue">Boston Fire Hydrants</span>
-    <span class="separator"> — </span>
-    <span class="lightest_gray"><a href="http://github.com/maxogden/polymapper">download source code</a></span>
-  </div> -->
-
   <div class="map"></div>
   <ul class="sidebar">
   </ul>

diff --git a/script/correlates.js b/script/correlates.js
@@ -3,6 +3,8 @@ var map, po, currentData, geoJson;
 $(function(){  
   po = org.polymaps;
   geoJson = po.geoJson();
+
+  var featuresCache = {};
 
   map = po.map()
       .container($('.map')[0].appendChild(po.svg("svg")))
@@ -29,11 +31,17 @@ $(function(){
 
   function load(e){
     var randColor = randomColor();
+
     for (var i = 0; i < e.features.length; i++) {
+
       var feature = e.features[i];
-      console.log(e)
-      $(feature.element).css({fill: randColor,opacity: .7})
 
+      //console.log(feature.data.geometry.type == 'LineString' ? 'none' : randColor)
+
+      $(feature.element).css({
+        fill: randColor,
+        opacity: .9 
+      })
     }    
   }
 
@@ -48,19 +56,54 @@ $(function(){
     });
   }
 
-  var showDataset = window.showDataset = function( dataset ) {
+  var showDataset = function( dataset ) {
     var bbox = getBB();
-    fetchFeatures(bbox, dataset, function(data){
-      map.add(
-        geoJson
-          .features(data.features)
-          .on("load", load) 
-      );
+
+    fetchFeatures( bbox, dataset, function( data ){
+
+      var feature = po.geoJson()
+            .features( data.features )
+            .on( "show", load );
+
+      featuresCache[dataset] = feature;
+
+      map.add( feature );
+
     })
   }
+
+  var removeDataset = function( dataset ) {
+    map.remove( featuresCache[dataset] );
+  }
 
   var getBB = function(){
     return map.extent()[0].lon + "," + map.extent()[0].lat + "," + map.extent()[1].lon + "," + map.extent()[1].lat;
   }
 
+  //Interaction
+  $.ajax({ 
+    url: "http://civicapi.com/datasets?",
+    dataType: 'jsonp', 
+    success: function(data){ 
+      $.each(data.datasets, function( i, item ){
+        $('<li>', {
+          class: item.name,
+          html: '<input type="checkbox"/>' + item.name.replace('_', ' ')
+        })
+        .appendTo('.sidebar')
+      })
+    } 
+  }); 
+
+  $('[type=checkbox]').live('click', function(){
+    var input = $(this)
+        dataSet = 'bos_' + input.parent().attr('class');
+
+    if( $(this).attr('checked') ) {
+      showDataset( dataSet );
+    } else {
+      removeDataset( dataSet );
+    }
+  });
+
 });
diff --git a/style/map.css b/style/map.css
@@ -1,8 +1,7 @@
-.topbar {
-  height: 30px;
-  background-color: #1A1A1A;
+body {
+  overflow: hidden;
+  background-color: #f4f4f4;
 }
-
 .showbar {
   height: 50px;
   background-color: #252525;
@@ -13,9 +12,12 @@
   width: 90%;
 }
 .sidebar {
+  max-height: 100%;
+  overflow-y:scroll;
   position: absolute;
-  left: 82%;
+  right: 0px;
   top: 10px;
+  width: 18%;
 }
 
 a {
@@ -142,136 +144,3 @@ svg {
 .compass.active .active .direction {
   fill: #999;
 }
-
-
-/* DROPDOWN STYLEZ */
-
-.dropdown_filter {
-  font-family: "Geneva";
-  font-size: 14px;
-  text-decoration: none;
-  line-height: 27px;
-  padding: 0px 0px 0px 1px;
-  line-height: 50px;
-  height: 50px;
-  float: left;
-  }
-  .dropdown_filter .show_me {
-    color: #fff799;
-    float: left;
-    font-size: 14px;
-    margin: 0px 0px 0px 0px;
-    padding: 0 1px 0 18px; }
-  .dropdown_filter select {
-    width: 100px; 
-    line-height: 50px;
-    }
-  .dropdown_filter .menuContainer {
-    border-radius: 3px;
-    -moz-border-radius-bottomleft: 3px;
-    -moz-border-radius-bottomright: 3px;
-    -moz-border-radius-topleft: 3px;
-    -moz-border-radius-topright: 3px;
-    -webkit-border-top-left-radius: 3px;
-    -webkit-border-top-right-radius: 3px;
-    -webkit-border-bottom-left-radius: 3px;
-    -webkit-border-bottom-right-radius: 3px;
-    background: #57708c url('dropdown.png') no-repeat scroll 141px 3.5px;
-    color: black;
-    float: left;
-    height: 26px;
-    margin: 12px 0px 0px 9px;
-    padding: 0px;
-    width: 169px;
-    outline-style: none; }
-    .dropdown_filter .menuContainer .selected {
-      font-family: "Geneva";
-      font-size: 12px;
-      text-decoration: none;
-      color: white;
-      font-size: 14px;
-      font-weight: 200;
-      height: 29px;
-      line-height: 27px;
-      padding: 0 23px 0 0;
-      margin-left: 10px;
-      opacity: 1; }
-    .dropdown_filter .menuContainer div {
-      display: block;
-      padding: 0px 0px 0px 9px;
-      text-align: left !important;
-      width: 149px; }
-    .dropdown_filter .menuContainer ul.menu {
-      border-radius: 8px;
-      -moz-border-radius-bottomleft: 8px;
-      -moz-border-radius-bottomright: 8px;
-      -moz-border-radius-topleft: 8px;
-      -moz-border-radius-topright: 8px;
-      -webkit-border-top-left-radius: 8px;
-      -webkit-border-top-right-radius: 8px;
-      -webkit-border-bottom-left-radius: 8px;
-      -webkit-border-bottom-right-radius: 8px;
-      -webkit-box-shadow: 3px 3px 8px #555;
-      -moz-box-shadow: 3px 3px 8px #555;
-      box-shadow: 3px 3px 8px #555;
-      outline-style: none;
-      background: white;
-      color: black;
-      font-size: 0.85em;
-      height: auto;
-      left: 0;
-      list-style: none;
-      overflow: hidden;
-      position: absolute;
-      text-align: left;
-      top: 25px;
-      width: 169px;
-      z-index: 666; }
-      .dropdown_filter .menuContainer ul.menu * {
-        margin: 0;
-        padding: 0; }
-      .dropdown_filter .menuContainer ul.menu a {
-        color: black;
-        display: block;
-        text-decoration: none; }
-      .dropdown_filter .menuContainer ul.menu li {
-        border-top: 1px solid #4e647d;
-        background: #57708c;
-        height: 29px; }
-        .dropdown_filter .menuContainer ul.menu li .menuHover {
-          background: #fffee5;
-          color: black;
-          cursor: default; }
-        .dropdown_filter .menuContainer ul.menu li .menuOptionTitle {
-          font-weight: bold; }
-          .dropdown_filter .menuContainer ul.menu li .menuOptionTitle li {
-            border-left: 1px solid #cccccc;
-            font-weight: normal; }
-          .dropdown_filter .menuContainer ul.menu li .menuOptionTitle ul {
-            margin: 3px 0 0; }
-        .dropdown_filter .menuContainer ul.menu li .menuSelFocus {
-          background-position: auto; }
-        .dropdown_filter .menuContainer ul.menu li .menuSelFocus {
-          cursor: default; }
-        .dropdown_filter .menuContainer ul.menu li a {
-          outline-style: none;
-          font-weight: lighter;
-          font-size: 14px;
-          height: 29px;
-          line-height: 27px;
-          color: white;
-          display: block;
-          padding-left: 10px; }
-          .dropdown_filter .menuContainer ul.menu li a:focus {
-            -moz-outline-style: none; }
-        .dropdown_filter .menuContainer ul.menu li.last-li {
-          -moz-border-radius-bottomleft: 3px;
-          -moz-border-radius-bottomright: 3px;
-          -webkit-border-bottom-left-radius: 3px;
-          -webkit-border-bottom-right-radius: 3px; }
-      .dropdown_filter .menuContainer ul.menu .hiLite {
-        color: white; }
-        .dropdown_filter .menuContainer ul.menu .hiLite a {
-          background: #650101;
-          color: white;
-          font-size: 14px; }