☰

Craigslist apartment map view with filters

Craigslist apartment search is most useful on the map view, since after all real estate is about location, location, location, but other factors matter too. For example you probably want to see listings that are reasonably new but not just from today, but the current UI only lets you pick "Listed today" or no filter. This tampermonkey script lets you eliminate listings by a configurable age range.

  1. // ==UserScript==
  2. // @name         Craigslist apartment map view with filters
  3. // @namespace    http://ivanjoukov.com/
  4. // @version      0.1
  5. // @description  Craigslist apartment search is most useful on the map view, since after all real estate is about location, location, location, but other factors matter too.  For example you probably want to see listings that are reasonably new but not just from today, but the current UI only lets you pick "Listed today" or no filter.  This tampermonkey script lets you eliminate listings by a configurable age range.
  6. // @author       Ivan Joukov
  7. // @include      http://*.craigslist.tld/search/apa
  8. // @require      https://code.jquery.com/jquery-1.11.3.min.js
  9. // @grant        none
  10. // ==/UserScript==
  11. /* jshint -W097 */
  12.  
  13. this.$ = this.jQuery = jQuery.noConflict(true);
  14.  
  15. (function (window, document, $, undefined) {
  16.     'use strict';
  17.  
  18. 	// Sanity check that this has any chance of working
  19. 	if (!(CL && CL.banish && CL.maps)) {
  20. 		return;
  21. 	}
  22.  
  23.     var minAgeSlider, maxAgeSlider, $minDaysSpan, $maxDaysSpan, $filteringProgress;
  24.     
  25.     // Create and set up the slider elements that will form our UI
  26.     minAgeSlider = document.createElement("INPUT");
  27.     minAgeSlider.setAttribute("type", "range");
  28.     minAgeSlider.setAttribute("min", "0");
  29.     minAgeSlider.setAttribute("max", "30");
  30.     minAgeSlider.value = 0;
  31.     minAgeSlider.id = "minAgeSlider";
  32.  
  33.     maxAgeSlider = document.createElement("INPUT");
  34.     maxAgeSlider.setAttribute("type", "range");
  35.     maxAgeSlider.setAttribute("min", "0");
  36.     maxAgeSlider.setAttribute("max", "30");
  37.     maxAgeSlider.value = 30;
  38.     maxAgeSlider.id = "maxAgeSlider";
  39.  
  40.     // Replace the default posted today checkbox with our UI
  41.     $('.postedToday > input').remove();
  42.     $('.postedToday').append("<div>Post min age <span id='minDays'>0</span> (days)<div>").append(minAgeSlider);
  43.     $('.postedToday').append("<div>Posting max age <span id='maxDays'>30</span>(days)<div>").append(maxAgeSlider);
  44.     $('.postedToday').append("<div>Filtering progress: <span id='filteringProgress'>100</span>%<div>");
  45.  
  46.     $minDaysSpan = $("#minDays");
  47.     $maxDaysSpan = $("#maxDays");
  48.     $filteringProgress = $("#filteringProgress");
  49.  
  50.  
  51.     //Borrowed from https://davidwalsh.name/javascript-debounce-function
  52.     // Because filtering is a pretty expensive operation, let's delay it until the user has finished adjusting the sliders
  53.     function debounce(func, wait, immediate) {
  54.         var timeout;
  55.         return function () {
  56.             var context = this,
  57. 				args = arguments,
  58. 				later = function () {
  59. 					timeout = null;
  60. 					if (!immediate) {
  61. 						func.apply(context, args);
  62. 					}
  63. 				},
  64. 				callNow = immediate && !timeout;
  65.             window.clearTimeout(timeout);
  66.             timeout = window.setTimeout(later, wait);
  67.             if (callNow) {
  68. 				func.apply(context, args);
  69. 			}
  70.         };
  71.     }
  72.  
  73.     // Inspired by http://stackoverflow.com/a/10344560
  74.     // This prevents locking the UI while doing the pretty slow/expensive filtering
  75.     // The basic idea is rather than iterating over all the (possibly thousands) of listings in a single blocking call
  76.     // We can break up the processing into small chunks, pausing often enough to allow the UI thread to run to prevent
  77.     // UI locking from the user's perspective
  78.     function processLargeArrayAsync(array, fn, maxTimePerChunk, context, done) {
  79.         context = context || window;
  80.         maxTimePerChunk = maxTimePerChunk || 200;
  81.         var index = 0;
  82.  
  83.         function now() {
  84.             return new Date().getTime();
  85.         }
  86.  
  87.         function doChunk() {
  88.             var startTime = now();
  89.             while (index < array.length && (now() - startTime) <= maxTimePerChunk) {
  90.                 // callback called with args (value, index, array)
  91.                 fn.call(context, array[index], index, array);
  92.                 ++index;
  93.             }
  94.             if (index < array.length) {
  95.                 // set Timeout for async iteration
  96.                 window.setTimeout(doChunk, 1);
  97.             } else {
  98.                 done.call(context);
  99.             }
  100.         }
  101.         doChunk();
  102.     }
  103.  
  104. 	function inDateRange(dateToCheck, newestDate, oldestDate) {
  105.         return dateToCheck > oldestDate && dateToCheck < newestDate;
  106.     }
  107.  
  108.     function hideByDate(newestDate, oldestDate) {
  109.         var containingPIDKeys = Object.keys(CL.maps.marker.containingPID),
  110. 			byIDKeys = Object.keys(CL.maps.marker.byID),
  111. 			totalLength = containingPIDKeys.length + byIDKeys.length,
  112. 			totalProcessed = 0,
  113. 			processMarker = function (key, index, keyArray) {
  114. 				var marker = this[key];
  115. 				if (!inDateRange(marker.marker.options.posteddate, newestDate, oldestDate)) {
  116. 					CL.banish.ban(key);
  117. 				} else {
  118. 					CL.banish.unban(key);
  119. 				}
  120. 				$filteringProgress.text(Math.round(100 * ++totalProcessed / totalLength));
  121. 			},
  122. 			doneCallback = function () {
  123. 				CL.banish.hide();
  124. 			};
  125.         processLargeArrayAsync(containingPIDKeys, processMarker, 100, CL.maps.marker.containingPID, doneCallback);
  126.         processLargeArrayAsync(byIDKeys, processMarker, 100, CL.maps.marker.byID, doneCallback);
  127.     }
  128.  
  129.     // Do the cheap UI changes in real time    
  130.     $('#minAgeSlider, #maxAgeSlider').on('input change', function () {
  131.         $minDaysSpan.text(minAgeSlider.value);
  132.         $maxDaysSpan.text(maxAgeSlider.value);
  133.     });
  134.  
  135.     // But debounce and offload the really expensive filtering operation
  136.     var debouncedHandleSliderChange = debounce(function () {
  137.         var newestDate = Date.now() - (1000 * 60 * 60 * minAgeSlider.value),
  138. 			oldestDate = Date.now() - (1000 * 60 * 60 * maxAgeSlider.value);
  139.         hideByDate(newestDate, oldestDate);
  140.     }, 500);
  141.  
  142.     $('#minAgeSlider, #maxAgeSlider').on('change', debouncedHandleSliderChange);
  143.  
  144. })(window, document, jQuery);