Working springfield

scripts/make_fake_pm_data.js

@@ -39,8 +39,9 @@ function generateBuildingObject(cb) {
         source_eui: Math.floor(randomNumber(1, 100)),
         energy_star_score: Math.floor(randomNumber(1, 100)),
         total_ghg_emissions: Math.floor(randomNumber(1, 100)),
-        total_ghg_emissions_intensity: Math.floor(randomNumber(1, 100))
-       }
+        total_ghg_emissions_intensity: Math.floor(randomNumber(1, 100)),
+        id: Math.floor(randomNumber(1, 1000))
+      }
     })
     cb(null, dataset);
 }
@@ -86,10 +87,10 @@ function normalizeBuildingData(dataset, cb) {
     let normalizedBuildingsObj = dataset.map(building => {
         return {
             ...building,
-            latitude: shiftCoordinates(building.LAT_LONG[0], 3),
-            longitude: shiftCoordinates(building.LAT_LONG[1], -3),
+            latitude: building.LAT_LONG[0],
+            longitude: building.LAT_LONG[1],
             city: "Springfield",
-            year: 2016,
+            year: 2015,
             reported_address: building.PROPERTY_ADDRESS,
             property_type: building.PRIMARY_USE,
             property_name: building.NOTES,

src/app/router.mustache

@@ -9,8 +9,11 @@ define([
   'models/scorecard',
   'collections/city_buildings',
   'views/map/map',
+  'views/map/map_controls',
   'views/map/address_search_autocomplete',
-  'views/map/year_control',
+  'views/map/category_dropdown',
+  'views/map/year_control_desktop',
+  'views/map/year_control_mobile',
   'views/layout/activity_indicator',
   'views/layout/building_counts',
   'views/layout/compare_bar',
@@ -21,8 +24,8 @@ define([
   'views/modals/modal',
   'views/layout/footer'
 ], function($, deparam, _, Backbone, CityModel, ScorecardModel,
-            CityBuildings, MapView, AddressSearchView,
-            YearControlView, ActivityIndicator,
+            CityBuildings, MapView, MapControlsView, AddressSearchView, 
+            CategoryDropdownView, YearControlDesktopView, YearControlMobileView, ActivityIndicator,
             BuildingCounts, CompareBar, ScorecardController,
             Button, MobileAlert, ModalModel, ModalController, FooterView) {
 
@@ -166,18 +169,20 @@ define([
 
     initialize: function(){
       const activityIndicator = new ActivityIndicator({state: this.state});
-      const yearControlView = new YearControlView({state: this.state});
+      const categoryDropdownView = new CategoryDropdownView({isOpen: false});
+      const yearControlDesktopView = new YearControlDesktopView({state: this.state});
+      const yearControlMobileView = new YearControlMobileView({state: this.state});
+      const mapControls = new MapControlsView({state: this.state, isOpen: true});
       const mapView = new MapView({state: this.state});
       const addressSearchView = new AddressSearchView({mapView: mapView, state: this.state});
-
       const buildingCounts = new BuildingCounts({state: this.state});
       const compareBar = new CompareBar({state: this.state});
       const scorecardController = new ScorecardController({state: this.state, mapView: mapView});
       const mobileAlert = new MobileAlert({state: this.state});
       const footerView = new FooterView({state: this.state});
 
       const button = new Button({
-        el: '#city-scorcard-toggle',
+        el: '#city-scorecard-toggle',
         onClick: _.bind(this.toggleCityScorecard, this),
         value: 'Citywide Report'
       });

src/app/templates/map/year_control.html → src/app/templates/map/year_control_desktop.html

@@ -2,4 +2,4 @@
 <% _.each(years, function(year){ %>
   <li><input type="radio" id="year-<%= year %>" id="year-<%= year %>" value="<%= year %>" name="year" <%= (year == current_year) ? 'checked="checked"' : ''%>/><label for="year-<%= year %>"><%= year %></label></li>
 <% }) %>
-</ol>
+</ol>

src/app/templates/map/year_control_mobile.html

@@ -0,0 +1,15 @@
+<svg id="calender-svg" xmlns="http://www.w3.org/2000/svg"  fill='white' height='24' width='24' viewBox="0 0 448 512">
+    <path d="M436 160H12c-6.6 0-12-5.4-12-12v-36c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48v36c0 6.6-5.4 12-12 12zM12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm116 204c0-6.6-5.4-12-12-12H76c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12v-40zm0-128c0-6.6-5.4-12-12-12H76c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12v-40zm128 128c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12v-40zm0-128c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12v-40zm128 128c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12v-40zm0-128c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12v-40z"
+    />
+</svg>
+<span class="current-year"><%= current_year %></span>
+<div class="year-dropdown-control">
+    <ol>
+        <% _.each(years, function(year){ %>
+            <li>
+                <a  id="year-<%= year %>" id="year-<%= year %>" value="<%= year %>" name="year" <%=( year== current_year) ? 'checked="checked"' : ''%>><%= year %></a>
+            </li>
+        <% }) %>
+    </ol>
+</div>
+

src/app/views/layout/compare_bar.js

@@ -14,13 +14,14 @@ define([
       this.$applyTo = $('.main-container');
 
       this.listenTo(this.state, 'change:building_compare_active', this.onCompareChange );
+      this.listenTo(this.state, 'change:building_compare_active', this.onScreenResize );
       this.listenTo(this.state, 'change:allbuildings', this.render);
       this.listenTo(this.state, 'change:selected_buildings', this.render);
       this.listenTo(this.state, 'change:categories', this.onCategoryChange);
 
       this.propertyTypeKey = 'property_type';
       this._lastPropertyType = null;
-
+      
       this.render();
     },
 

src/app/views/map/category_dropdown.js

@@ -0,0 +1,40 @@
+const bars = '<svg xmlns="http://www.w3.org/2000/svg" fill="white" width="24" height="24" viewBox="0 0 448 512"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"/></svg>'
+
+define([
+  'jquery',
+  'underscore',
+  'backbone', 
+], function($, _, Backbone){
+    var CategoryDropdownView = Backbone.View.extend({
+      $container: $('#toolbar'),
+      className: 'toolbar-control-container',  
+
+      initialize: function(state) {
+        this.state = state;
+        this.render();
+      },
+
+      render: function() {
+        this.$el.appendTo(this.$container);
+        this.$el.html(`<div class='toolbar-control-button'>${bars}</div>`);
+
+        return this;
+      },
+
+      events: {
+        'click' : 'toggleDisplay'
+      },
+
+      toggleDisplay: function(event) {
+        const $dropdownWrapper = $('.dropdown-wrapper');
+        if (this.state.isOpen == false) {
+          $dropdownWrapper.css("display", "block")
+          this.state.isOpen = !this.state.isOpen;
+        } else if (this.state.isOpen == true) {
+            $dropdownWrapper.css("display", "none")
+            this.state.isOpen = !this.state.isOpen;
+        }
+      }
+    })
+  return CategoryDropdownView;
+});

src/app/views/map/map_controls.js

@@ -0,0 +1,67 @@
+define(["jquery", "backbone"], function($, Backbone) {
+  var cssLargeScreen = 900;
+  var closed = `<div>Filters</div>
+    <svg fill='#000000' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'>
+      <path d='M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z'/> <path d='M0-.25h24v24H0z' fill='none'/>
+    </svg>`;
+
+  var open = `<svg fill='#000000' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'>
+    <path d='M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z'/>
+    <path d='M0-.5h24v24H0z' fill='none'/>
+  </svg>`;
+
+  var MapControlsView = Backbone.View.extend({
+    el: "#map-controls",
+    initialize: function(options) {
+      var self = this;
+      this.state = options.state;
+      this.isOpen = options.isOpen;
+      this.listenTo(this.state, 'change:building_compare_active', this.render);
+
+      $(window).on('resize', function () {
+        var isCompareActive = options.state.get('building_compare_active')
+        if (window.innerWidth < cssLargeScreen && isCompareActive) {
+          $('.main-container').removeClass('compare-mode');
+          options.state.set({'building_compare_active': false})
+        }
+      });
+
+      this.render();
+    },
+
+    events: {
+      "click #map-controls--toggle": function(e) {
+        e.stopPropagation();
+        this.isOpen = !this.isOpen;
+        this.render();
+      }
+    },
+
+    render: function() {
+      var isCompareModeActive = this.state.get("building_compare_active") || false;
+      var $mapControlsCounts = $('#map-controls-counts')
+      var $toggle = this.$("#map-controls--toggle");
+
+      if (isCompareModeActive && !this.isOpen) {
+        this.isOpen = true;
+      };
+
+      if (isCompareModeActive) {
+        $mapControlsCounts.css({ "background": "none", "padding-top": "20px" })
+      } else {
+        $mapControlsCounts.css({ "background": "#f2f2f2", "padding-top": "0" })
+      };
+
+      if (this.isOpen) {
+        $toggle.html(open);
+        this.$el.removeClass("closed");
+      } else {
+        $toggle.html(closed);
+        this.$el.addClass("closed");
+      };
+      return this;
+    }
+  });
+
+  return MapControlsView;
+});

src/app/views/map/year_control.js → src/app/views/map/year_control_desktop.js

@@ -2,9 +2,9 @@ define([
   'jquery',
   'underscore',
   'backbone',
-  'text!templates/map/year_control.html',
-], function($, _, Backbone, YearControlTemplate) {
-  var YearControlView = Backbone.View.extend({
+  'text!templates/map/year_control_desktop.html',
+], function($, _, Backbone, YearControlDesktopTemplate) {
+  var YearControlDesktopView = Backbone.View.extend({
     $container: $('#year-select-container'),
     className: 'year-control',
 
@@ -26,7 +26,7 @@ define([
 
       this.$el.appendTo(this.$container);
 
-      var template = _.template(YearControlTemplate);
+      var template = _.template(YearControlDesktopTemplate);
       this.$el.html(template({
         years: _.keys(city.get('years')),
         current_year: this.state.get('year'),
@@ -45,5 +45,5 @@ define([
     },
   });
 
-  return YearControlView;
+  return YearControlDesktopView;
 });

src/app/views/map/year_control_mobile.js

@@ -0,0 +1,50 @@
+define([
+    'jquery',
+    'underscore',
+    'backbone',
+    'text!templates/map/year_control_mobile.html',
+], function ($, _, Backbone, YearControlMobileTemplate) {
+    var YearControlMobileView = Backbone.View.extend({
+        $container: $('#year-select-container'),
+        className: 'year-dropdown',
+
+        initialize: function (options) {
+            this.state = options.state;
+            this.listenTo(this.state, 'change:city', this.onCityChange);
+        },
+
+        onCityChange: function () {
+            this.listenTo(this.state.get('city'), 'sync', this.onCitySync);
+        },
+
+        onCitySync: function () {
+            this.render();
+        },
+
+        render: function () {
+            var city = this.state.get('city');
+
+            this.$el.appendTo(this.$container);
+
+            var template = _.template(YearControlMobileTemplate);
+            this.$el.html(template({
+                years: _.keys(city.get('years')),
+                current_year: this.state.get('year'),
+            }));
+
+            return this;
+        },
+
+        events: {
+            'click': 'selectYear',
+        },
+
+        selectYear: function (event) {
+            event.preventDefault();
+            var year = event.target.innerHTML;
+            this.state.set({ year: year });
+        },
+    });
+
+    return YearControlMobileView;
+});

src/cities/springfield.json

@@ -13,12 +13,12 @@
     "backgroundTileSource": "https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png",
     "labelTileSource": "https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_only_labels/{z}/{x}/{y}.png",
     "center": [
-      46.133,
-      -120.091
+      49.1664,
+      -123.137
     ],
     "zoom": 12,
     "categoryDefaults": [],
-    "cartoDbUser": "testemailforgreg",
+    "cartoDbUser": "regenerative",
     "table_name": "springfield",
     "property_id": "id",
     "property_name": "property_name",
@@ -57,7 +57,7 @@
     "popup_fields": [
         {"field": "property_name", "label": ""},
         {"field": "reported_address", "template": "{reported_address}"},
-        {"field": "zip", "template": "Seattle, WA {zip}", "skipFormatter": true},
+        {"field": "property_postal_code", "template": "Springfield, BC {property_postal_code}", "skipFormatter": true},
         {"field": "property_type", "template": "<strong>{property_type}</strong>"},
         {"field": "reported_gross_floor_area", "template": "<strong>{reported_gross_floor_area}</strong> ft²"},
         {"field": "id", "label": "Building ID "},