Initial commit

lib/assets/javascripts/dashboard/views/data-library/header/header-view.js

@@ -0,0 +1,53 @@
+const CoreView = require('backbone/core-view');
+const $ = require('jquery');
+const _ = require('underscore');
+const L = require('leaflet');
+const checkAndBuildOpts = require('builder/helpers/required-opts');
+const template = require('./header.tpl');
+
+const REQUIRED_OPTS = [
+  'configModel'
+];
+
+/**
+ * The header map in the data-library page, where the user can filter by country, e.g.:
+ */
+module.exports = CoreView.extend({
+
+  className: 'DataLibrary-header',
+
+  initialize: function (opts) {
+    checkAndBuildOpts(opts, REQUIRED_OPTS, this);
+    _.bindAll(this, '_addGeojsonData');
+  },
+
+  render: function () {
+    this.$el.html(template());
+
+    return this;
+  },
+
+  load: function () {
+    this.map = L.map(this.$('#DataLibraryMap')[0], {
+      zoomControl: false,
+      attributionControl: false
+    }).setView([44, -31], 3);
+
+    var sqlDomain = this._configModel.get('sql_api_template').replace('{user}', this._configModel.get('common_data_user'));
+    var geojsonURL = sqlDomain + '/api/v2/sql?q=' + encodeURIComponent('select * from world_borders') + '&format=geojson&filename=world_borders';
+
+    $.getJSON(geojsonURL).done(this._addGeojsonData);
+  },
+
+  _addGeojsonData: function (geojsonData) {
+    var style = {
+      color: '#2E3C43',
+      weight: 1,
+      opacity: 1,
+      fillColor: '#242D32',
+      fillOpacity: 1
+    };
+
+    this.layer = L.geoJson(geojsonData, { style: style }).addTo(this.map);
+  }
+});

lib/assets/javascripts/dashboard/views/data-library/header/header.tpl

@@ -0,0 +1,26 @@
+<div class="DataLibrary-gradient"></div>
+
+<div class="Header-inner Header-title js-Header-title u-inner">
+  <div class="Header-innerTitle">
+    <h1 class="Title-small">Data library</h1>
+    <p class="Title Title--l Title--white u-vspace-l">Open resources to help you populate your maps</p>
+  </div>
+</div>
+
+<div class="Header-inner Header-footer is-hidden">
+  <div class="CountrySelector js-CountrySelector u-inner">
+    <p class="CountrySelector-text">Filter datasets by country selecting it in this map</p>
+    <button class="CountrySelector-button js-country"></button>
+  </div>
+
+  <div class="CountrySelector CountrySelector-back js-CountrySelector-back is-hidden">
+    <div class="CountrySelector-inner u-inner">
+      <p class="CountrySelector-text">Back</p>
+      <button class="NavButton Dialog-countryBack js-back">
+        <i class="CDB-IconFont CDB-IconFont-close"></i>
+      </button>
+    </div>
+  </div>
+</div>
+
+<div id="DataLibraryMap" class="DataLibraryMap"></div>