+
+ About Float
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Float Map shows the projected impacts of unchecked climate change on American homes, businesses, and communities.
+Float Map shows projections of the 2040-2070 time period, if the current path continues with no serious reductions in climate pollution.
+Float Map currently shows projections related to worsening flooding in the Midwest US. We are preparing expansions into other impacts and further regions in the United States.
+We use data only from the most recent available NOAA and FEMA research, and we always share our sources.
+Float is an independent, non-partisan, not-for-profit organization. Float received the Judges’ Choice and Popular Choice awards in the MIT Climate Colab competition.
+The Average Precipitation layer shows how total rain and snowfall each year is projected to grow by the 2040-2070 period. More annual precipitation means more water going into rivers, lakes and snowbanks--a key risk factor for bigger floods. The Average Precipitation layer uses data from the National Oceanic and Atmospheric Administration’s “Regional Climate Trends and Scenarios for the U.S. National Climate Assessment” (Technical Report 142, 2013, link). This layer shows the percent change between high-emissions scenario (A2) projections of the 2040-2070 time period, versus the historical climate data from 1971-1999. The data presented on Float is a multi-model average of the results from 15 distinct climate models (Atmosphere-Ocean General Circulation Models), compiled in the Coupled Model Intercomparison Project phase 3 dataset. The Float average precipitation layer uses only the NOAA data where a majority of the models show statistically significant change, and over 67% of the models agree on the direction of the change, which is the highest category of data significance which NOAA distinguishes in this report. This data is visualized in the NOAA report for the Midwest (142-3) in Section 3.7, Figure 40, center left.
+ +The Storm Frequency layer uses shows how days with heavy rain or snow (over 1 inch per day) are projected to come more often, by the 2040-2070 period. More storm frequency means more rapid surges of water into rivers and lakes--a key risk factor for more frequent flooding. The Storm Frequency layer uses data from the National Oceanic and Atmospheric Administration’s “Regional Climate Trends and Scenarios for the U.S. National Climate Assessment” (Technical Report 142, 2013, link). This layer shows the percent change between high-emissions scenario (A2) projections of the 2040-2070 time period, versus the historical climate data from 1980-2000. The data presented on Float is a multi-model average of the results from 11 distinct climate models compiled in the North American Regional Climate Change Assessment Program dataset. The Float storm frequency layer uses only the NOAA data where a majority of the models show statistically significant change, and over 67% of the models agree on the direction of the change, which is the highest category of data significance which NOAA distinguishes in this report. This data is visualized in the NOAA report for the Midwest (142-3) in Section 3.9, Figure 44, top.
+ +The Flood Zones layer shows the areas that already are at major risk for flooding, based on where floods have historically reached. If floods become larger and more frequent, many neighboring areas to these historical flood zones are likely to start experience flooding. The Flood Zones layer uses the Special Flood Hazard Areas data from the Federal Emergency Management Administration (FEMA) Flood Maps. The layer shows the areas currently judged to be at significant risk of flooding, based on statistical analysis of river flow records, consultation with community members, extensive topographic surveys, hydrologic analyses, hydraulic analyses, and analyses of historical storm tides and rainfall. The FEMA Flood Maps are the official data used in support of the National Flood Insurance Program, and are updated on an ongoing basis. Public access to the FEMA Flood maps is available through the FEMA Map Service Center (link).
+ +We selected the data layers used for Float after consultation with experts at Lawrence Berkeley National Laboratory, the National Center for Atmospheric Research, and the National Climate Data Center. All of these organization are public, not-for-profit research institutions.
+ +Float Map utilizes several open-source frameworks and libraries, including Django, Elasticsearch, React, and Leaflet. View the full source and stay up to date with our progress on Github.
+Float is an independent, not-for-profit organization.
+ +Keith Brower Brown
+
+ 
+
+
+ Growing up in Oregon, with family on an apple orchard and summers on Cascade trails, Keith became passionate for protecting how communities depend on their land and climate. After studying Environmental Economics and Geography at UC Berkeley, Keith worked in the energy industry at PG&E and Navigant Consulting, before founding Float in 2013.
+ +Mike Vattuone
+
+ 
+
+
+ With a background in cognitive science and user experience research, Mike has a unique interest in both modular software architecture and user interface design. Formerly a full-stack developer at Citizen Engagement Laboratory, Mike has worked on several climate related campaigns for a number of online advocacy organizations.
+ +Max Gardner
+
+ 
+
+
+ Max has worked as a geologist for the U.S. Geological Survey Menlo Park, a GIS consultant for Urban Mapping Inc., and a smart-grid analyst for Oracle Corporation. He is currently pursuing his PhD in Systems Engineering at UC Berkeley where he leverages his experience in GIS, data analytics, and sensor networks to improve the operational efficiencies of urban systems.
+ +Matteo Banerjee
+
+ 
+
+
+ Matteo is a software engineer with a deep interest in politics and public policy. With several years of experience at companies like Google and Beats Music, he currently leads data engineering at Brigade, a social network focused on civic engagement.
+Please feel free to send questions and your feedback on how to make Float better:
+ info@floatmap.us
+
+ 
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. +
+ This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. +
+
+
+
+
+
+ );
+};
+
+/**
+ * React context
+ * @param {Func} handleSwitch
+ */
+LayerSwitch.contextTypes = {
+ _handleSwitch: React.PropTypes.func
+};
+
+module.exports = LayerSwitch;
diff --git a/floatmap/static/js/views/Logo.js b/floatmap/static/js/views/Logo.js
new file mode 100644
index 0000000..81f8d7f
--- /dev/null
+++ b/floatmap/static/js/views/Logo.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+/**
+ * Stateless Component - Float Map logo
+ * @TODO: Probably should support an image if we ever go that route...
+ */
+const Logo = ({ text, url }) => (
+
+
+
+);
+
+module.exports = Logo;
diff --git a/floatmap/static/js/views/Navigation.js b/floatmap/static/js/views/Navigation.js
new file mode 100644
index 0000000..553c574
--- /dev/null
+++ b/floatmap/static/js/views/Navigation.js
@@ -0,0 +1,24 @@
+import React from 'react';
+
+/**
+ * Stateless Component - navigation for Float Map
+ */
+const Navigation = ({ items, className='component-navigation', onMobileToggle }) => (
+ {text}
+ +
+
+
+
+);
+
+module.exports = Navigation;
diff --git a/floatmap/static/js/views/SearchForm.js b/floatmap/static/js/views/SearchForm.js
new file mode 100644
index 0000000..b4010ca
--- /dev/null
+++ b/floatmap/static/js/views/SearchForm.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+/**
+ * Stateless Component - search form for Float Map, used to geocode searched addresses
+ */
+
+const SearchForm = ({ onSearch, placeholder }) => (
+
+);
+
+module.exports = SearchForm;
diff --git a/floatmap/static/js/views/header.js b/floatmap/static/js/views/header.js
index 95f9fb6..5c4f041 100644
--- a/floatmap/static/js/views/header.js
+++ b/floatmap/static/js/views/header.js
@@ -1,58 +1,38 @@
-import $ from 'jquery';
-import L from '../vendor/leaflet';
-import DataTourView from './tour';
-
-Backbone.Layout.configure({
- manage: true
-});
-
-// Header View handles behavior for the header, including search and nav.
-let HeaderView = application.HeaderView = Backbone.View.extend({
-
- // As defined in map.html
- template: "#headerTemplate",
-
- // GeoCode whatever we put into the search input, update the location of the map by calling MapView.setAddress
- // from our layout
- getAddress(address) {
- let g = new google.maps.Geocoder();
- return g.geocode({ address }, function(results, status) {
- let latLng = [ results[0].geometry.location.lat(), results[0].geometry.location.lng() ];
- application.layout.views['map'].setAddress(latLng, 15);
- if (application.map.marker) {
- application.map.removeLayer(application.map.marker);
- }
- let marker = application.map.marker = L.marker(latLng, { icon: defaultIcon }).addTo(application.map);
- if ($("button.navbar-toggle").is(":visible")) {
- return $("button.navbar-toggle").trigger("click");
- }
- });
- },
-
- events: {
- ["submit #search"](e) {
- e.preventDefault();
- let address = $(e.target).find('.search-input').val();
- return this.getAddress(address);
+import React from 'react';
+import classnames from 'classnames';
+
+import Logo from './Logo';
+import SearchForm from './SearchForm';
+import Navigation from './Navigation';
+/**
+ * Stateless Component - header for Float Map
+ */
+const Header = ({ isMobileNavActive, onSearch, onTourClick, onAboutClick, onMobileToggle }) => {
+
+ const navLinks = [
+ {
+ name: "About",
+ url: '#about',
+ handler: onAboutClick,
},
-
- ["submit #searchMobile"](e) {
- e.preventDefault();
- let address = $(e.target).find('.search-input').val();
- return this.getAddress(address);
- },
-
- // TODO: Currently, we are blessed with Bootstrap Modal working properly outside of Backbone. I should probably
- // make an event that creates an AboutModalView at some point just so it follows our convention.
-
- // Start the tour from the nav
- ["click #tourLink"](e) {
- e.preventDefault();
- let dataTour = new DataTourView();
- let dataView = this.insertView('#dataTour', dataTour);
- return dataView.render();
+ {
+ name: "Tour",
+ url: "#tour",
+ handler: onTourClick
}
- }
-});
-
-export default HeaderView;
+ ];
+
+ const navClassNames = classnames('component-navigation', {
+ 'visible': isMobileNavActive
+ });
+
+ return (
+ `);
- if (index % 4 === 0) {
- let textNode = `+${this}%`;
- apValue.append(textNode);
- }
- return self.$el.find(".ap-values").append(apValue);
- });
- self.$el.find(".apRange").append("");
- self.$el.find(".apRange").append("Increasing Average Precipitation");
- // TODO: Why do I have to do this at all?
- self.$el.appendTo(application.layout.$el.find('#legend'));
-
- $('#legend').on("click", function(e) {
- if ($('#legend').hasClass('active')) {
- return;
- } else {
- $('.legend-wrapper, #legend-toggle, #legend').addClass('active');
- let callback = () => $('.legend-wrapper').removeClass('invisible');
- return setTimeout(callback, 150);
- }
- }
+ /**
+ * React Component Lifecycle - Render
+ * @instance
+ */
+ render() {
+ const apGrades = _.range(0,13,1);
+ return (
+
+
+
);
-
- if ($.cookie('welcomed')) {
- $('#floods-switch').prop('checked',true);
- $('#apLayer-switch').prop('checked',true);
- $('#epLayer-switch').prop('checked',true);
- }
-
- return $("[data-toggle=tooltip]").tooltip({ placement: 'left'});
}
-});
+};
+
+/**
+ * React context
+ * @param {Func} handleSwitch
+ */
+Legend.contextTypes = {
+ _handleSwitch: React.PropTypes.func
+};
-export default LegendView;
+module.exports = Legend;
diff --git a/floatmap/static/js/views/map.js b/floatmap/static/js/views/map.js
index ee96b9d..baae0aa 100644
--- a/floatmap/static/js/views/map.js
+++ b/floatmap/static/js/views/map.js
@@ -1,68 +1,66 @@
+import React from 'react';
import $ from 'jquery';
-import L from '../vendor/leaflet';
+import L from 'leaflet';
import 'jquery.cookie';
import { getColor, getPattern } from '../utils';
+import { topojson } from '../vendor/leaflet-omnivore';
+
+/**
+ * Class representing map layout component for Float Map
+ * @extends React.Component
+ */
+class Map extends React.Component {
+
+ /**
+ * Create Base Component, instantiating State and binding
+ * event handlers
+ * @param {Object} Props - Props passed into component
+ */
+ constructor(props) {
+ super(props);
+ }
-Backbone.Layout.configure({
- manage: true
-});
-
-let MapView = application.MapView = Backbone.View.extend({
- template: "#mapTemplate",
- el: false,
-
- initialize() {
- // Our layers object, which will contain all of the data layers
- // TODO: This seems like something Leaflet should be able to handle but I don't know...
- let layers = application.layers = {};
- let gjLayers = application.gjLayers = {};
- },
-
- setEvents() {
+ /**
+ * Set up non-React events
+ */
+ _setEvents() {
// For Debugging
// application.map.on 'click', (e) ->
// alert("Lat, Lng : " + e.latlng.lat + ", " + e.latlng.lng)
- let self = this;
-
- // When a user right clicks, trigger a query in Elasticsearch for the coords at the click.
- application.map.on('contextmenu', function(e) {
+ // on right click, trigger a query from Base component
+ application.map.on('contextmenu', (e) => {
if (!$('.legend-wrapper').hasClass('active')) {
- $('#legend-toggle').trigger('click');
+ $('.component-legend-toggle').trigger('click');
}
- return application.layout.views['#legend'].views['#query'].handleQuery(e.latlng);
+
+ return this.props.onQuery(e.latlng);
});
+ }
- // When zoom begins, get the current zoom and cache for later.
- application.map.on('zoomstart', e => self.previousZoom = application.map.getZoom());
+ /**
+ * Add layer to map
+ * @param {Undefined}
+ */
+ _addLayer(layer) {
+ return layer.addTo(application.map);
+ }
- // When zoom is over, remove marker if we're leaving the max zoom layer.
- return application.map.on('zoomend', function(e) {
- let { map } = application;
- if (map.getZoom() < this.previousZoom && this.previousZoom === 15) { return map.removeLayer(window.marker); }
- });
- },
-
- // Fairly self-descriptive
- addLayer(layer, zIndex) {
- return layer.setZIndex(zIndex).addTo(application.map);
- },
-
- setAddress(latlng, zoom) {
- application.map.setView(latlng, zoom);
- // Note that geoJson expects Longitude first (as x) and Latitude second (as y), so we have to switch the order
- let lnglat = [latlng[1], latlng[0]];
- return application.layout.views['#legend'].views['#query'].handleQuery(lnglat);
- },
-
- // Based on data type, creates geoJSON layer
- // and styles appropriately, based on features
- makegeoJsonLayer(data, type) {
+ /**
+ * Based on data type, creates geoJSON layer
+ * and styles appropriately, based on features
+ * @param {Object} data - data to convert to geoJSON layer
+ * @param {String} type - type of data we are converting
+ * @return {Object} geoJSON layer
+ * @TODO worth breaking up function more?
+ */
+ _makegeoJsonLayer(data, type) {
let self = this;
if (type === 'ap') {
var layer;
- return layer = application.layers['apLayer'] = application.gjLayers['apLayer'] = L.geoJson(data, {
- renderer: application.map.renderer,
+ return layer = application.layers['annual-precipitation'] = application.gjLayers['annual-precipitation'] = L.geoJson(data, {
+ renderer: application.map.dataLayers,
+ pane: 'dataLayers',
style(feature, layer) {
return {
className: 'ap',
@@ -73,8 +71,9 @@ let MapView = application.MapView = Backbone.View.extend({
} else if (type === 'ep') {
var layer;
- return layer = application.layers['epLayer'] = application.gjLayers['epLayer'] = L.geoJson(data, {
- renderer: application.map.renderer,
+ return layer = application.layers['storm-frequency'] = application.gjLayers['storm-frequency'] = L.geoJson(data, {
+ renderer: application.map.dataLayers,
+ pane: 'dataLayers',
style(feature, layer) {
return {className: getPattern("ep", feature.properties.DN) + " ep"};
},
@@ -89,69 +88,153 @@ let MapView = application.MapView = Backbone.View.extend({
} else {
var layer;
let config = L.geoJson(null, {
- renderer: application.map.renderer,
+ renderer: application.map.countries,
+ pane: 'countries',
style(feature, layer) {
return {className: "no-data-yet"};
}
});
- return layer = application.layers[type] = omnivore.topojson(data, null, config);
+ return layer = application.layers[type] = topojson(data, null, config);
+ }
+ }
+
+ /**
+ * Clear layers from map
+ * @param {Undefined}
+ */
+ _clearLayers() {
+ application.map.eachLayer(function (layer) {
+ application.map.removeLayer(layer);
+ });
+ }
+
+ /**
+ * Add ONLY data layers to map
+ * @param {Undefined}
+ */
+ _renderDataLayers() {
+ application.map.removeLayer(ap);
+ application.map.removeLayer(ep);
+ application.map.removeLayer(floods);
+
+ if (this.props.layers.showFloodZones) {
+ this._addLayer(floods);
+ }
+
+ if (this.props.layers.showAnnualPrecipitation) {
+ this._addLayer(ap);
+ }
+
+ if (this.props.layers.showStormFrequency) {
+ this._addLayer(ep);
}
- },
- renderTemplate() {
- // Path to Base layer (no labels)
- let baseURL = '//{s}.tiles.mapbox.com/v3/floatmap.2ce887fe/{z}/{x}/{y}.png';
- // Path to Base layer labels, overlaid last
+ }
+
+ /**
+ * React Lifecycle Event - called before component is mounted/rendered
+ * @instance
+ */
+ componentWillMount() {
+ // Our layers object, which will contain all of the data layers
+ // TODO: This seems like something Leaflet should be able to handle but I don't know...
+ let layers = application.layers = {};
+ let gjLayers = application.gjLayers = {};
+ }
+
+ /**
+ * React Lifecycle Event - component state/whatever has updated
+ * @instance
+ */
+ componentDidUpdate() {
let labelsURL = '//{s}.tiles.mapbox.com/v3/floatmap.2b5f6c80/{z}/{x}/{y}.png';
- // Instantiate map if we haven't
- if (!application.map) {
- let southWest = L.latLng(30.85343961959182, -123.1083984375);
- let northEast = L.latLng(56.12057809796008, -60.40917968750001);
- let center = L.latLng(44.2205730390537, -88);
- let bounds = L.latLngBounds(southWest, northEast);
- var map = application.map = new L.Map('map', {maxBounds: bounds, minZoom: 5, maxZoom: 15, zoom: 6, center, attributionControl: false});
+ this._renderDataLayers();
+
+ const { center, zoom } = this.props;
+ application.map.setView(center, zoom);
+
+ const defaultIcon = L.icon({
+ iconUrl: 'static/img/marker-icon.png',
+ shadowUrl: 'static/img/marker-shadow.png'
+ });
+
+ if (application.map.marker) {
+ application.map.removeLayer(application.map.marker);
}
+ let marker = application.map.marker = L.marker(this.props.center, { icon: defaultIcon }).addTo(application.map);
+
+ let lnglat = [this.props.center[1], this.props.center[0]];
+ }
+
+ /**
+ * React Lifecycle Event - component has been inserted into DOM
+ * @instance
+ */
+ componentDidMount() {
+ let southWest = L.latLng(30.85343961959182, -123.1083984375);
+ let northEast = L.latLng(56.12057809796008, -60.40917968750001);
+ let bounds = L.latLngBounds(southWest, northEast);
+ let center = L.latLng(this.props.center[0], this.props.center[1]);
+ let mapContainer = document.querySelector('.component-map');
+ var map = application.map = new L.Map(mapContainer, {maxBounds: bounds, minZoom: 5, maxZoom: 15, zoom: this.props.zoom, center, attributionControl: false});
+ map.createPane('base');
+ map.createPane('countries');
+ map.createPane('dataLayers');
+ map.createPane('labels');
+
+ map.getPane('base').style.zIndex = 1;
+ map.getPane('countries').style.zIndex = 2;
+ map.getPane('dataLayers').style.zIndex = 3;
+ map.getPane('labels').style.zIndex = 4;
// Create new SVG renderer and add to Tile pane, so we can work with geoJson like other layers
- map.renderer = L.svg({pane:'tilePane'}).addTo(map);
-
- // We're only dealing with the Midwest for now, so bound our
- // tile layer queries.
- // TODO: Determine a better way to have a more precise set of bounds
-
- // Create our layers
- let base = window.base = application.layers['base'] = L.tileLayer(baseURL, {pane: 'tilePane'});
- let floods = window.floods = application.layers['floods'] = L.tileLayer('/static/nfhl_tiles/{z}/{x}/{y}.png', {pane: 'tilePane', errorTileUrl: 'http://i.imgur.com/aZejCgY.png'});
- let labels = window.labels = application.layers['labels'] = L.tileLayer(labelsURL, {pane: 'tilePane'});
-
- let ap = window.ap = this.makegeoJsonLayer(window.apData, 'ap');
- let ep = window.ep = this.makegeoJsonLayer(window.epData, 'ep');
- let usNoData = window.usNoData = this.makegeoJsonLayer("static/geojson/regions/US_no_data_topo.geojson", 'usNoData');
- let canada = window.canada = this.makegeoJsonLayer("static/geojson/regions/canada_topo.geojson", 'canada');
- let mexico = window.mexico = this.makegeoJsonLayer("static/geojson/regions/mexico_topo.geojson", 'mexico');
-
- // ...and then append them to the map, in order!
- // TODO: Why doesn't zindex work with geoJson layers?
- this.addLayer(base, 0);
+ map.dataLayers = L.svg({pane:'dataLayers'}).addTo(map);
+ map.countries = L.svg({pane:'countries'}).addTo(map);
+
+ // Path to Base layer (no labels)
+ let baseURL = '//{s}.tiles.mapbox.com/v3/floatmap.2ce887fe/{z}/{x}/{y}.png';
+ // Path to Base layer labels, overlaget last
+ let labelsURL = '//{s}.tiles.mapbox.com/v3/floatmap.2b5f6c80/{z}/{x}/{y}.png';
+ let base = window.base = application.layers['base'] = L.tileLayer(baseURL, {pane: 'base'});
+ let floods = window.floods = application.layers['flood-zones'] = L.tileLayer('/static/nfhl_tiles/{z}/{x}/{y}.png', {pane: 'dataLayers', errorTileUrl: 'http://i.imgur.com/aZejCgY.png'});
+
+ let labels = window.labels = application.layers['labels'] = L.tileLayer(labelsURL, {pane: 'labels'});
+ let ap = window.ap = this._makegeoJsonLayer(window.apData, 'ap');
+ let ep = window.ep = this._makegeoJsonLayer(window.epData, 'ep');
+
+ let usNoData = window.usNoData = this._makegeoJsonLayer("static/geojson/regions/US_no_data_topo.geojson", 'usNoData');
+ let canada = window.canada = this._makegeoJsonLayer("static/geojson/regions/canada_topo.geojson", 'canada');
+ let mexico = window.mexico = this._makegeoJsonLayer("static/geojson/regions/mexico_topo.geojson", 'mexico');
+
+ this._addLayer(base);
+
if ($.cookie('welcomed')) {
- this.addLayer(floods, 2);
- this.addLayer(ap, 3);
- this.addLayer(ep, 4);
+ this._renderDataLayers();
}
- this.addLayer(labels, 5);
- this.addLayer(usNoData, 6);
- this.addLayer(canada, 6);
- this.addLayer(mexico, 6);
+ this._addLayer(labels);
+ this._addLayer(usNoData);
+ this._addLayer(canada);
+ this._addLayer(mexico);
// Then we add zoom controls and finally set off event listeners
map.addControl(L.control.zoom({position: "bottomleft"}));
- return this.setEvents();
+ return this._setEvents();
+ }
+
+ /**
+ * React Lifecycle Event - component renders
+ * @instance
+ */
+ render() {
+ return (
+
+ )
}
- });
+ }
-export default MapView;
+module.exports = Map;
diff --git a/floatmap/static/js/views/query.js b/floatmap/static/js/views/query.js
index 175b2eb..709a07a 100644
--- a/floatmap/static/js/views/query.js
+++ b/floatmap/static/js/views/query.js
@@ -1,66 +1,26 @@
-import $ from 'jquery';
-import _ from 'underscore';
-import QueryModel from '../models/query';
-import leafletPip from '../vendor/leaflet-pip';
-
-Backbone.Layout.configure({
- manage: true
-});
-
-// View for the data that appears in the collapsable element above the legend.
-let QueryView = application.QueryView = Backbone.View.extend({
- template: "#queryTemplate",
-
- initialize() {
- this.model = new QueryModel();
- return this.listenTo(this.model, "change", this.render);
- },
-
- serialize() {
- return { query: this.model.attributes };
- },
-
- handleQuery(lnglat) {
- // look through each layer in order and see if the clicked point,
- // e.latlng, overlaps with one of the shapes in it.
- let i = 0;
- while (i < _.size(application.gjLayers)) {
- let match = leafletPip.pointInLayer(lnglat, application.gjLayers[Object.keys(application.gjLayers)[i]], false);
- // if there's overlap, add some content to the popup: the layer name
- // and a table of attributes
-
- if (Object.keys(application.gjLayers)[i] === 'apLayer') {
- if (match.length) {
- this.model.set({'ap': match[0].feature.properties.DN + '%↑ Annual Precipitation'});
- } else {
- this.model.set({'ap': 'No average precipitation data yet.'});
- }
- }
- if (Object.keys(application.gjLayers)[i] === 'epLayer') {
- if (match.length) {
- this.model.set({'ep': match[0].feature.properties.DN + '%↑ Storm Frequency'});
- } else {
- this.model.set({'ep': 'No storm frequency data yet.'});
- }
- }
- i++;
- }
- return;
- },
-
- afterRender() {
- if (JSON.stringify(this.model.defaults) !== JSON.stringify(this.model.attributes)) {
- if (!$('.legend-wrapper').hasClass('active')) {
- $('#legend-toggle').trigger('click');
- }
- return setTimeout(function() {
- if (!$('#query').hasClass('active')) {
- return $('#query').addClass('active');
- }
- }
- , 200);
- }
- }
-});
-
-export default QueryView;
+import React from 'react';
+import classnames from 'classnames';
+
+/**
+ * Stateless Component - query UI for Float Map, located in legend
+ */
+const Query = ({ data }) => {
+
+ const classNames = classnames('component-query', {
+ 'active': data.shouldDisplay
+ });
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ {apGrades.map((grade) => {
+ const label = grade % 4 === 0 ? {grade}% : '';
+ return (
+
+
+ Increasing Average Precipitation
+
+
+ {label}
+
+ )
+ })}
+
+
+
+
+ -
+
- + + High Flooding + +
- + + Extreme Flooding + +
+
+ );
+}
+
+module.exports = Query;
diff --git a/floatmap/static/js/views/share.js b/floatmap/static/js/views/share.js
index 3206e1a..4989bb2 100644
--- a/floatmap/static/js/views/share.js
+++ b/floatmap/static/js/views/share.js
@@ -1,21 +1,26 @@
-import $ from 'jquery';
+import React from 'react';
-Backbone.Layout.configure({
- manage: true
-});
+/**
+ * Stateless Component - share buttons for Float Map
+ * @TODO: Makes sense to create ShareButton + ShareButtonContainer?
+ */
+const Share = ({ className }) => {
-let ShareView = application.ShareView = Backbone.View.extend({
- template: "#shareTemplate",
- events: {
- ["click #shareContent a"](e) {
- e.preventDefault();
- return this.openPopup(e.target.href);
- }
- },
-
- openPopup(url) {
+ const handleClick = (e) => {
+ e.preventDefault();
+ const url = e.nativeEvent.target.href;
return window.open( url, "window", "height = 500, width = 559, resizable = 0" );
- }
-});
+ };
+
+ return (
+
+ );
+};
-export default ShareView;
+module.exports = Share;
diff --git a/floatmap/static/js/views/tour.js b/floatmap/static/js/views/tour.js
index 0aa0407..b75203c 100644
--- a/floatmap/static/js/views/tour.js
+++ b/floatmap/static/js/views/tour.js
@@ -1,126 +1,109 @@
+import React from 'react';
import $ from 'jquery';
import Shepherd from 'tether-shepherd';
-Backbone.Layout.configure({
- manage: true
-});
+/**
+ * Tour component - mostly a way to invoke Shepherd outside of component lifecycle (i.e. after render)
+ * @class
+ */
+class Tour extends React.Component {
+
+ /**
+ * React Component Lifecycle - Called by React when the component is about to render
+ * @instance
+ */
+ componentWillMount() {
+ this.props.onStart();
+ }
-// Creates tour of the Float interface, using ShepherdJS
-let DataTourView = application.DataTourView = Backbone.View.extend({
+ /**
+ * React Component Lifecycle - Called by React when the component will be removed from the DOM
+ * @instance
+ */
+ componentWillUnmount() {
+ application.tour.complete();
+ application.tour = undefined;
+ }
- // Create new tour, use default Shepherd theme for now
- initialize() {
- // Remove existing instance of Shepherd Tour
- // TODO: Still have zombie view problem, which I *thought* LayoutManager helped with...
- if (window.tour) {
- if (application.map.marker) {
- application.map.removeLayer(application.map.marker);
- }
- window.tour.complete();
- }
- return window.tour = this.tour = new Shepherd.Tour({
+ /**
+ * React Component Lifecycle - Called by React when the component has rendered
+ * @instance
+ */
+ componentDidMount() {
+ application.tour = new Shepherd.Tour({
defaults: {
classes: 'shepherd-theme-arrows',
scrollTo: true
}
});
- },
-
- resetMapAfterTour() {
- if (application.map.marker) {
- application.map.removeLayer(application.map.marker);
- }
- if ($('.active')) {
- $('.active').removeClass('active').promise().done(() => $('.legend-wrapper').addClass('invisible'));
- }
- application.map.setZoom(6);
- application.map.addLayer(floods, 1);
- $('#floods-switch').prop('checked',true);
- application.map.addLayer(ap, 2);
- $('#apLayer-switch').prop('checked',true);
- application.map.addLayer(ep, 3);
- $('#epLayer-switch').prop('checked',true);
- return tour.complete();
- },
-
- resetMapData() {
- if ($('.active')) {
- $('.active').removeClass('active').promise().done(() => $('.legend-wrapper').addClass('invisible'));
- }
- let iterable = [window.ap, window.ep, window.floods];
- for (let i = 0; i < iterable.length; i++) {
- let layer = iterable[i];
- application.map.removeLayer(layer);
- }
- $('#floods-switch').prop('checked',false);
- $('#apLayer-switch').prop('checked',false);
- return $('#epLayer-switch').prop('checked',false);
- },
-
- // Once view renders, add steps to tour and start it up.
- afterRender() {
-
- application.map.setZoom(6);
- this.resetMapData();
- $('#welcomeModal').modal('hide');
- $('#legend-toggle').trigger('click');
+
+ application.tour.defaultIcon = L.icon({
+ iconUrl: 'static/img/marker-icon.png',
+ shadowUrl: 'static/img/marker-shadow.png'
+ });
L.Icon.Default.imagePath = "../static/img";
- // Display average precipitation layer - this sort of thing happens in tour step action methods hereafter
- $('#apLayer-switch').trigger('click');
+ $('.flood-zones input').prop('checked',false);
+ $('.annual-precipitation input').prop('checked',false);
+ $('.storm-frequency input').prop('checked',false);
+
+ // @TODO: Probably should utilize promises for better async
+ setTimeout(() => {
+ $('.annual-precipitation .switch').trigger('click');
+ }, 1);
// Avg Precip explanation step
- this.tour.addStep('ap-step', {
+ application.tour.addStep('ap-step', {
title: 'Annual Precipitation',
text: 'The Annual Precipitation layer shows how total rain and snowfall each year is projected to grow by the 2040-2070 period. More annual precipitation means more water going into rivers, lakes and snowbanks, a key risk factor for bigger floods. These projections come from the National Oceanic and Atmospheric Administration (2014).',
- attachTo: '#apToggle top',
+ attachTo: '.component-layer-switch.annual-precipitation top',
buttons: [{
text: 'Next',
action() {
- $('#epLayer-switch').trigger('click');
- return tour.next();
+ $('.storm-frequency .switch').trigger('click');
+ return application.tour.next();
}
}
]
});
// Ext Precip explanation step
- this.tour.addStep('ep-step', {
+ application.tour.addStep('ep-step', {
title: 'Storm Frequency',
text: 'The Storm Frequency layer shows how days with heavy rain or snow (over 1 inch per day) are projected to come more often by the 2040-2070 period. More storm frequency means more rapid surges of water into rivers and lakes, a key risk factor for more frequent flooding. These projections also come from the National Oceanic and Atmospheric Administration (2014).',
- attachTo: '#stormsToggle top',
+ attachTo: '.component-layer-switch.storm-frequency top',
buttons: [{
text: 'Next',
action() {
- $('#floods-switch').trigger('click');
- return tour.next();
+ $('.flood-zones .switch').trigger('click');
+ return application.tour.next();
}
}
]
});
// Floods explanation step
- this.tour.addStep('flood-step', {
+ application.tour.addStep('flood-step', {
title: 'Flood Zones',
text: 'The Flood Zones show the areas that already are at major risk for flooding, based on where floods have historically reached. If floods become larger and more frequent, many neighboring areas to these historical flood zones are likely to start experience flooding. This information comes from the Federal Emergency Management Administration (2014).',
- attachTo: '#floodZonesToggle top',
+ attachTo: '.component-layer-switch.flood-zones top',
buttons: [{
text: 'Next',
- action: tour.next
+ action: application.tour.next
}
]
});
// Display search step
- this.tour.addStep('search-step', {
+ application.tour.addStep('search-step', {
title: 'Search',
text: 'Search for a specific address, city or landmark. Try using the search bar now to find a location you care about in the Midwest.',
- attachTo: '.search-input bottom',
+ attachTo: '.component-search-form bottom',
buttons: [{
text: 'Next',
action() {
- return setTimeout(() => tour.next()
+ return setTimeout(() => application.tour.next()
, 450);
}
}
@@ -129,31 +112,31 @@ let DataTourView = application.DataTourView = Backbone.View.extend({
// Display query step
// TODO: Not totally in love w/ the animation here - play around with it some more.
- this.tour.addStep('query-step', {
+ application.tour.addStep('query-step', {
title: 'Inspect',
text: '
+
+ Flooding Risk Factors at This Location
+-
+
- {data.ap} +
- {data.ep} +
Right click anywhere on the map to inspect the numbers for that specific place.
Take a tour of some communities at high risk for worsened flooding.
', - attachTo: '#query left', + attachTo: '.component-query left', buttons: [{ text: 'Take a Tour', action() { let latlng = [44.519, -88.019]; - application.layout.views['map'].setAddress(latlng, 13); + application.map.setView(latlng, 13); if (application.map.marker) { application.map.removeLayer(application.map.marker); } - let marker = application.map.marker = L.marker(latlng, { icon: defaultIcon }).addTo(application.map); - return tour.next(); + let marker = application.map.marker = L.marker(latlng, { icon: application.tour.defaultIcon }).addTo(application.map); + return application.tour.next(); } } , { text: 'Stop Tour', - action: this.resetMapAfterTour + action: this.props.onComplete } ] }); // The following steps show particular regions on the map - this.tour.addStep('map-lambeau', { + application.tour.addStep('map-lambeau', { title: 'Green Bay, WI', text: 'The home of the Packers has a large neighborhood of paper plants and homes at high risk of worsened flooding, with storm days increasing nearly 40% and annual precipitation rising 10% in the next few decades.', attachTo: '.leaflet-marker-icon left', @@ -161,22 +144,22 @@ let DataTourView = application.DataTourView = Backbone.View.extend({ text: 'Continue', action() { let latlng = [43.1397, -89.3375]; - application.layout.views['map'].setAddress(latlng, 13); + application.map.setView(latlng, 13); if (application.map.marker) { application.map.removeLayer(application.map.marker); } - let marker = application.map.marker = L.marker(latlng, { icon: defaultIcon }).addTo(application.map); - return tour.next(); + let marker = application.map.marker = L.marker(latlng, { icon: application.tour.defaultIcon }).addTo(application.map); + return application.tour.next(); } } , { text: 'Stop Tour', - action: this.resetMapAfterTour + action: this.props.onComplete } ] }); - this.tour.addStep('map-dane', { + application.tour.addStep('map-dane', { title: 'Madison, WI Airport', text: 'Airports are often built on flat areas near rivers, placing them at serious risk of flooding, like Madison’s main airport, serving 1.6 million passengers per year.', attachTo: '.leaflet-marker-icon left', @@ -184,22 +167,22 @@ let DataTourView = application.DataTourView = Backbone.View.extend({ text: 'Continue', action() { let latlng = [42.732072157891224, -84.50576305389404]; - application.layout.views['map'].setAddress([42.73591782230738, -84.48997020721437], 13); + application.map.setView([42.73591782230738, -84.48997020721437], 13); if (application.map.marker) { application.map.removeLayer(application.map.marker); } - let marker = application.map.marker = L.marker(latlng, { icon: defaultIcon }).addTo(application.map); - return tour.next(); + let marker = application.map.marker = L.marker(latlng, { icon: application.tour.defaultIcon }).addTo(application.map); + return application.tour.next(); } } , { text: 'Stop Tour', - action: this.resetMapAfterTour + action: this.props.onComplete } ] }); - this.tour.addStep('map-lansing', { + application.tour.addStep('map-lansing', { title: 'Lansing, MI', text: 'A large stretch of downtown businesses and homes are at risk of worsened flooding, as well as part of the Michigan State campus.', attachTo: '.leaflet-marker-icon left', @@ -207,35 +190,56 @@ let DataTourView = application.DataTourView = Backbone.View.extend({ text: 'Continue', action() { let latlng = [41.726, -90.310]; - application.layout.views['map'].setAddress([41.7348457153312, -90.310], 13); + application.map.setView([41.7348457153312, -90.310], 13); if (application.map.marker) { application.map.removeLayer(application.map.marker); } - let marker = application.map.marker = L.marker(latlng, { icon: defaultIcon }).addTo(application.map); + let marker = application.map.marker = L.marker(latlng, { icon: application.tour.defaultIcon }).addTo(application.map); - return tour.next(); + return application.tour.next(); } } , { text: 'Stop Tour', - action: this.resetMapAfterTour + action: this.props.onComplete } ] }); - this.tour.addStep('map-quadcities', { + application.tour.addStep('map-quadcities', { title: 'Quad Cities Nuclear Generating Station', text: 'Power plants, including nuclear plants like the one here, are frequently built on riverbanks to use water for cooling. Larger, more frequent future floods could place these power plants and their communities at risk.', attachTo: '.leaflet-marker-icon bottom', buttons: [{ text: 'Stop Tour', - action: this.resetMapAfterTour + action: this.props.onComplete } ] }); - return this.tour.start(); + return application.tour.start(); } -}); -export default DataTourView; + /** + * React Component Lifecycle - render + * @instance + */ + render() { + return ( + + ) + } +}; + +/** + * Prop Validation + * @param {Function} onComplete - callback to fire when tour is done + * @param {Function} onStart - callback to fire when tour is starting + * @TODO Default props...? + */ +Tour.PropTypes = { + onComplete: React.PropTypes.func, + onStart: React.PropTypes.func +} + +module.exports = Tour; diff --git a/floatmap/static/js/views/welcome.js b/floatmap/static/js/views/welcome.js index f58911b..5d043b6 100644 --- a/floatmap/static/js/views/welcome.js +++ b/floatmap/static/js/views/welcome.js @@ -1,61 +1,35 @@ -import $ from 'jquery'; -import 'bootstrap'; -import DataTourView from './tour'; - -Backbone.Layout.configure({ - manage: true -}); - -// Display welcome modal - should only appear if a cookie hasn't been set in the browser -let WelcomeView = application.WelcomeView = Backbone.View.extend({ - - template: "#welcomeTemplate", - - events: { - ['click #startDataTour'](e) { - e.preventDefault(); - let dataTour = new DataTourView(); - let dataView = this.insertView('#dataTour', dataTour); - return dataView.render(); - }, - - ['shown.bs.modal #welcomeModal'](e) { - return this.reposition(); - }, - - ['click #closeModal'](e) { - application.map.addLayer(floods, 1); - $('#floods-switch').prop('checked',true); - application.map.addLayer(ap, 2); - $('#apLayer-switch').prop('checked',true); - application.map.addLayer(ep, 3); - return $('#epLayer-switch').prop('checked',true); - } - }, - - initialize(e) { - let self = this; - return $(window).on('resize', e => self.reposition()); - }, - - // Kick off the modal once the view has been created - afterRender() { - console.log('laksjg'); - return $('#welcomeModal').modal({ - backdrop: 'static', - keyboard: true - }, 'show'); - }, - - // Keeps the modal centered (more or less) - reposition() { - let modal = this.$el; - let dialog = modal.find('.modal-dialog'); - modal.css('display', 'block'); - // Dividing by two centers the modal exactly, but dividing by three - // or four works better for larger screens. - return dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2)); - } -}); - -export default WelcomeView; +import React from 'react'; +import Modal from 'react-modal'; + +/** + * Stateless Component - welcome modal for Float Map + * @TODO: Merge w/ welcome modal into one shared component? + */ +const Welcome = ({ onClose, onContinue, isWelcomeOpen }) => { + + return ( +
+
+
+ Welcome to Float
+
+
+ Float shows the projected impacts of climate change on American communities in the 2040-2070 period.
+ +Float currently shows how key risk factors for floods are projected to worsen in the Midwest US.
+ +If you see areas without some of the data present, that doesn’t mean those places are risk free--it just means the science hasn’t got there yet. We only show projections where a large majority of studies agree.
+
+
+
+
+
+
+
+
+
+
- {% block extra_js %}{%endblock%}
+ {% render_bundle 'main' %}
-
-
-
- {% endblock %}
- {% block content %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {%endblock%}
-
-
-
- {% block extra_js %}
-
-
-
-
- {% endblock %}
diff --git a/test/test.spec.js b/test/test.spec.js
index 7e25a6b..5419452 100644
--- a/test/test.spec.js
+++ b/test/test.spec.js
@@ -1,5 +1,5 @@
-var assert = require('assert');
-var mocha = require('mocha');
+import assert from 'assert';
+import mocha from 'mocha';
describe('test', function() {
diff --git a/urls.py b/urls.py
index c479faf..ac7a293 100644
--- a/urls.py
+++ b/urls.py
@@ -1,10 +1,5 @@
from django.conf.urls import patterns, include, url
-from django.contrib import admin
-admin.autodiscover()
-
urlpatterns = patterns('',
url(r'^$', 'floatmap.views.map', name='map'),
- url(r'^get_queries/$', 'floatmap.views.get_queries', name='get_queries'),
- url(r'^admin/', include(admin.site.urls)),
)
diff --git a/webpack.config.js b/webpack.config.js
index e6332d4..5c4d7c4 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,7 +1,13 @@
+ var path = require('path');
var webpack = require('webpack');
+var BundleTracker = require('webpack-bundle-tracker');
module.exports = {
- entry: "./lib/floatmap/static/js/app.js",
+ entry: [
+ "./floatmap/static/js/app.js",
+ 'webpack-dev-server/client?http://localhost:3000', // WebpackDevServer host and port
+ 'webpack/hot/only-dev-server'
+ ],
module: {
loaders: [
{
@@ -10,28 +16,24 @@ module.exports = {
},
{
test: /\.js$/,
- loader: 'babel-loader',
- include: [
- /floatmap\/static\/js/,
- ],
- query: {
- babelrc: false,
- presets: [
- 'es2015-webpack',
- ]
- }
+ loaders: ['react-hot', 'babel-loader?presets[]=es2015,presets[]=react'],
+ exclude: [
+ /node_modules/
+ ]
}
]
},
output: {
- path: __dirname,
- filename: "dist/bundle.js"
+ path: path.resolve(__dirname, 'dist/'),
+ filename: "bundle.js",
+ publicPath: "http://localhost:3000/dist/"
},
plugins: [
+ new BundleTracker({filename: './webpack-stats.json'}),
+ new webpack.HotModuleReplacementPlugin(),
new webpack.ProvidePlugin({
$: "jquery",
- jQuery: "jquery",
- "Backbone.Layout": "backbone.layoutmanager"
+ jQuery: "jquery"
})
]
}
- 
- 
- 
-