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);
+  }
+});