diff --git a/app/static/scripts/main.js b/app/static/scripts/main.js index d8e08ee..2e33b56 100644 --- a/app/static/scripts/main.js +++ b/app/static/scripts/main.js @@ -140,7 +140,7 @@ ee.initialize(null, null, function () { queryMap = true; }); - $('#info-close-button').click(function () { + $('.info-close-button').click(function () { $('#info-box').transition('slide right'); //$('#twitter-timeline-box').transition('slide right'); $('#info-button').toggleClass('active'); diff --git a/app/static/scripts/script.js b/app/static/scripts/script.js index 4b3e70c..06cc4c9 100644 --- a/app/static/scripts/script.js +++ b/app/static/scripts/script.js @@ -236,7 +236,21 @@ function clickShorelineProfile(pt) { var feature = featureProxy.getInfo(); // d is lost in translation var id = _.get(feature, 'properties.transect_i'); - console.log('show info for', feature.properties); + if (_.isNil(id)) { + return; + } + + var url = 'https://storage.googleapis.com/shoreline-monitor/features/030/000/BOX_030_000.json'; + $.getJSON(url, function(data) { + console.log('data', data); + var feature = _.first(_.filter(data.features, function(feature) { + return _.get(feature, 'properties.transect_id', id); + })); + createShoreChart(feature); + $('#chart-modal') + .show(); + }); + console.log('id', id); return id; } @@ -762,6 +776,7 @@ function initializeMap() { // hide all boxes $('#info-box .info-text').hide(); + $('#info-box .extra.content').hide(); // show the relevant ones _.each(datasets || ['surface-water'], function(dataset) { $('*[data-dataset=' + '"' + dataset + '"' + ']').show(); diff --git a/app/static/scripts/shore-chart.js b/app/static/scripts/shore-chart.js new file mode 100644 index 0000000..37c3f11 --- /dev/null +++ b/app/static/scripts/shore-chart.js @@ -0,0 +1,123 @@ +function createShoreChart(json) { + + var elementId = 'chart-modal' ; + + // data from global shore json file (single location) + var props = json.properties; + var intercept = props.intercept; + var dt = props.dt; + var dist = props.distances; + + var data = []; + $.each(dist, function( index, value ) { + var item = {}; + item.value = dist[index] - intercept; + item.date = new Date(1984 + dt[index], 0, 1); + if (dist[index] === -999) { + return; + } + data.push(item); + }); + + // D3js time series chart + var margin = {top: 20, right: 20, bottom: 20, left: 40}, + width = 600 - margin.left - margin.right, + height = 400 - margin.top - margin.bottom; + + // Set the ranges + var x = d3.time.scale().range([0, width]); + var y = d3.scale.linear().range([height, 0]); + + // Define the axes + var xAxis = d3.svg.axis().scale(x) + .orient("bottom").ticks(10); + + var yAxis = d3.svg.axis().scale(y) + .orient("left").ticks(5); + + // Define the line + var valueline = d3.svg.line() + .x(function (d) { + return x((d.date)); + }) + .y(function (d) { + return y(d.value); + }); + + // clear content + d3.select('#' + elementId) + .selectAll('*') + .remove(); + + // Adds the svg canvas + var svg = d3.select("#"+ elementId) + .append("svg") + .classed({'query-chart': true}) + .attr("width", width + margin.left + margin.right) + .attr("height", height + margin.top + margin.bottom) + .append("g") + .attr("transform", + "translate(" + margin.left + "," + margin.top + ")"); + + // var tip = d3.tip() + // .attr('class', 'd3-tip') + // .offset([-10, 0]) + // .html(function (d) { + // return 'Date: ' + formatDate(d.date) + ', Value: ' + d.value; + // }); + + // svg.call(tip); + + var lineSvg = svg.append("g"); + + var focus = svg.append("g") + .style("display", "none"); + + // Scale the range of the data + x.domain(d3.extent(data, function (d) { + return d.date; + })); + y.domain(d3.extent(data, function (d) { + return d.value; + })); + + // Add the dotsh. + svg.append("g") + .attr("class", "dots") + .selectAll("path") + .data(data) + .enter().append("path") + .attr("transform", function(d) { return "translate(" + x(d.date) + "," + y(d.value) + ")"; }) + .attr("d", d3.svg.symbol() + .size(40)); + + + // Add the X Axis + svg.append("g") + .attr("class", "x axis") + .attr("transform", "translate(0," + height + ")") + .call(xAxis); + + // Add the Y Axis + svg.append("g") + .attr("class", "y axis") + .call(yAxis); + + // append the x line + focus.append("line") + .attr("class", "x") + .style("stroke", "blue") + .style("stroke-dasharray", "3,3") + .style("opacity", 0.5) + .attr("y1", 0) + .attr("y2", height); + + // append the y line + focus.append("line") + .attr("class", "y") + .style("stroke", "blue") + .style("stroke-dasharray", "3,3") + .style("opacity", 0.5) + .attr("x1", width) + .attr("x2", width); +} diff --git a/app/static/styles/colormaps.scss b/app/static/styles/colormaps.scss new file mode 100644 index 0000000..e042570 --- /dev/null +++ b/app/static/styles/colormaps.scss @@ -0,0 +1,31 @@ +.legend-box { + width: 1em; + min-width: 10px; +} +.legend { + display: flex; + margin-top: 12px; + margin-bottom: 12px; +} +.RdYlGn { + .q0-5{ + fill: rgb(215,25,28); + background-color: rgb(215,25,28); + } + .q1-5{ + fill: rgb(253,174,97); + background-color: rgb(253,174,97); + } + .q2-5{ + fill: rgb(255,255,191); + background-color: rgb(255,255,191); + } + .q3-5{ + fill: rgb(166,217,106); + background-color: rgb(166,217,106); + } + .q4-5 { + fill: rgb(26,150,65); + background-color: rgb(26,150,65); + } +} diff --git a/app/static/styles/main.scss b/app/static/styles/main.scss index cc75461..e1c8238 100644 --- a/app/static/styles/main.scss +++ b/app/static/styles/main.scss @@ -7,6 +7,7 @@ $button-shadow: rgba($black, .3) 0 1px 4px -1px; // bower:scss // endbower + #map .gm-style { // OverlayMapPanes for these layers div:first-child > div:first-child { @@ -215,7 +216,7 @@ $button-shadow: rgba($black, .3) 0 1px 4px -1px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); border-radius: 2px; -#info-close-button { +.info-close-button { background: transparent; position: absolute; right: 0px; @@ -504,3 +505,8 @@ $button-shadow: rgba($black, .3) 0 1px 4px -1px; font-size: 11px; text-shadow: 1px 1px 0px black, -1px -1px 0px black, 1px -1px 0px black, -1px 1px 0px black; } + + +#chart-modal.ui.modal { + top: 20%; +} diff --git a/app/templates/index.html b/app/templates/index.html index 88a3ab5..97c4d5c 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -24,9 +24,7 @@ - {# - #} @@ -41,6 +39,7 @@ + @@ -231,15 +230,74 @@

- Shoreline changes (1985-2016) + Long-term Shoreline Changes (1984-2016)

- Red and green colors represent sandy coastlines where erosion occured during the last 30 years. - Yellow coasts represent sandy coastlines without erosion. - The results of the analysis are published in:

Luijendijk et.al, 2018, Nature Scientific Reports + The bars represent the erosion/accretion along sandy coasts, every 500m, over the period 1984-2016. + Green bars indicate where shoreline accretion has occurred (natural accretion, land reclamation, nourishments). + Red bars indicate erosive shorelines. +

+
+ -10m/yr  +
 
+
 
+
 
+
 
+
 
+  10m/yr +
+

+ + + + The results of the global analysis and methods can be found in: + Luijendijk et al., 2018, Scientific Reports + +
+ For inquiries please fill in this form.

+ +
+ + +
+ + + +
+
+ +

Surface water changes (1985-2016) @@ -258,30 +316,30 @@

-
-