Startup screen + nice layout

public/css/style.css

+:root {
+    --main-bg-color: #262626;
+    --main-text-color: #b2b2b2;
+}
+
+*{
+  margin:0;
+  padding:0;
+  -webkit-box-sizing:border-box;
+  -moz-box-sizing:border-box;
+  box-sizing:border-box;
+}
+
+body {
+  color:#333;
+  font-family:sans-serif;
+  background-color: var(--main-bg-color);
+}
+
+.img_bg{
+   /* Set rules to fill background */
+   min-height: 100%;
+   min-width: 1024px;
+   
+   /* Set up proportionate scaling */
+   width: 100%;
+   height: auto;
+   
+   /* Set up positioning */
+   position: fixed;
+   top: 0;
+   left: 0;
+}
+
+.photo-credit {
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+    font-size: 10px;
+    color: #b2b2b2;
+    background-color: rgba(0,0,0,0.7);
+    padding: 2px;
+    border-radius: .25rem;
+}
+
+/* Dates */
+#date-initial, #date-final {
+    text-align: center;
+}
+
+#datePickers{
+  display: none;
+  position: absolute;
+  /* width: 285px; */
+  z-index: 401;
+  background: #cbddf3;
+  border: 1px solid #999;
+  padding: 4px;
+  border-radius: 5px;
+  /*box-shadow: 0px 0px 15px #999;*/
+  top: 13px;
+  left: 50px;
+}
+
+.picker {
+    position: absolute;
+    left: 50px;
+    top: 45px;
+    z-index: 401;
+    background: #cbddf3;
+    border: 1px solid #999;
+    padding: 4px;
+    border-radius: 5px;
+    /*box-shadow: 0px 0px 15px #999;*/
+}
+.ui-datepicker-calendar {
+  display: none;
+}
+
+/* Main */
+#mainContainer {
+  display: none !important;
+  min-height: 100vh;
+}
+
+#title {
+    font-size: 2em;
+    color: var(--main-text-color);
+    display: block;
+}
+
+#middle {
+    /*height: 854px;*/
+    /*color: var(--main-text-color);*/
+    color: #333;
+}
+
+#story {
+    /*height: 100%;*/
+    opacity: 0.75;
+    margin-left: -50%;
+    /*position: absolute;*/
+    background-color: var(--main-bg-color);
+    z-index: 1001 !important;
+    -webkit-box-shadow: -15px 0px 5px -5px rgba(128,121,128,1); 
+    -moz-box-shadow: -15px 0px 5px -5px rgba(128,121,128,1); 
+    box-shadow: -15px 0px 5px -5px rgba(128,121,128,1); 
+    /*left: 50%;
+    width: 50%*/
+}
+
+/* have the loader div fill the map screen while disabling interaction */
+.loader {
+    display: none;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0px;
+    width: 100%;
+    background-color: rgba(245, 245, 245, 0.7);
+    z-index: 1002;
+    cursor: wait;
+  }
+  /* since we know the height/width of the loader gif, 
+   position absolutely and use top/left, subtracting half of 
+   width and height using margin */
+  .loadSpinner {
+    /*width: 66px;
+    height: 66px;*/
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: -33px 0 0 -33px;
+  }
+  .loadText {
+    /*width: 66px;
+    height: 66px;*/
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: 33px 0 0 -50px;
+  }
+
+/* Map */
+.leaflet-top {
+    z-index: 1001 !important;
+}
+
+.draw-control-disabled {
+    filter: contrast(22%) brightness(157%);
+    pointer-events:none;
+}
+
+#camap {
+    background:white;
+    height:100%;
+}
+
+.legend {
+  color: #555;
+}
+
+.legend ul {
+  padding: 0px;
+  margin: 0px;
+}
+
+.legend i {
+  width: 18px;
+  height: 18px;
+  float: left;
+  margin-right: 8px;
+  opacity: 0.75;
+}
+
+.legend li {
+  height: 18px;
+  list-style: none;
+}
+
+.info {
+  padding: 6px 8px;
+  /*font: 11px/16px Arial, Helvetica, sans-serif;*/
+  /*background: white;
+  background: rgba(255, 255, 255, 1);*/
+  background: #F5F5F3;
+  /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+  border-radius: 5px;*/
+}
+
+.info h6 {
+  margin: 0 0 5px;
+  color: #777;
+  /*text-transform: capitalize;*/
+}
+
+/* Footer */
+img.grayscale {
+  filter: gray; /* IE6-9 */
+  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
+}
+
+img.grayscale:hover {
+  filter: none;
+  -webkit-filter: grayscale(0%);
+}
+
+/* Modal windows */
+.equation {
+    text-align: center;
+}
+
+span.frac {
+    display: inline-block;
+    text-align: center;
+    vertical-align: middle;
+  }
+
+span.frac > sup, span.frac > sub {
+    display: block;
+    font: inherit;
+    padding: 0 0.3em;
+    top:0;
+}
+
+span.frac > sup {
+    border-bottom: 0.08em solid;
+}
+
+span.frac > span {
+    display: none;
+}
+
+/******
+Icons
+******/
+
+@font-face {
+  font-family: 'icomoon';
+  src:  url('fonts/icomoon.eot?woqphe');
+  src:  url('fonts/icomoon.eot?woqphe#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?woqphe') format('truetype'),
+    url('fonts/icomoon.woff?woqphe') format('woff'),
+    url('fonts/icomoon.svg?woqphe#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^="fa-"], [class*=" fa-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.fa-casetapeaje:before {
+  content: "\e900";
+}
+.fa-desechos:before {
+  content: "\e901";
+}
+.fa-escuela:before {
+  content: "\e902";
+}
+.fa-presa:before {
+  content: "\e905";
+}
+.fa-puente:before {
+  content: "\e906";
+}
+.fa-puertoindustrial:before {
+  content: "\e907";
+  /* color: #fff; */
+  color: #000; 
+  background-color: #F5F5F3;
+}
+.fa-puntofronterizo:before {
+  content: "\e908";
+}
+.fa-spinner:before {
+  content: "\e97a";
+}
+.fa-spinner2:before {
+  content: "\e97b";
+}
+.fa-spinner3:before {
+  content: "\e97c";
+}
+.fa-spinner4:before {
+  content: "\e97d";
+}
+.fa-spinner5:before {
+  content: "\e97e";
+}
+.fa-spinner6:before {
+  content: "\e97f";
+}
+.fa-spinner7:before {
+  content: "\e980";
+}
+.fa-spinner8:before {
+  content: "\e981";
+}
+.fa-spinner9:before {
+  content: "\e982";
+}
+.fa-spinner10:before {
+  content: "\e983";
+}
+.fa-plus-circle:before {
+  content: "\f055";
+}
+.fa-bed:before {
+  content: "\f236";
+}
+.fa-hotel:before {
+  content: "\f236";
+}
+
+/* Graphs */
+.active {
+    text-decoration: underline;
+    font-weight: 600;
+    display: inline-block;
+    stroke: var(--main-text-color);
+    stroke-width: 0.5px;
+    fill: var(--main-text-color);
+}
+
+.label{
+    font-size: 16px;
+    font-family: sans-serif;
+}
+.bar text {
+  font: 10px sans-serif;
+  text-anchor: end;
+}
+
+.bar:hover {
+  stroke-opacity:0.5;
+  opacity: 1;
+}
+
+/*.axis--x path {
+  display: none;
+}*/
+
+.yearTick {
+    opacity: 0.3;
+    stroke-width:3;
+    stroke-dasharray: 6,6;
+}
+
+/* no stroke for all x axis-ticks, x axis-month-labels,
+ and x axis-year-labels paths and lines */
+[class^="x axis-"] path, [class^="x axis-"] line {
+    stroke: none;
+}
+
+.axis path, .axis line, .axis-ticks line {
+    fill: none;
+    stroke: grey;
+    stroke-width: 1;
+    shape-rendering: crispEdges;
+}
+
+.x.axis, .y.axis {
+    font: 12px sans-serif;
+    font-family:verdana,sans-serif;
+    color: var(--main-text-color);
+}
+
+.tooltip {
+    position: absolute;
+    bottom: 50%; /* so it is not added below the map and scroll bars appear */
+    /*width: 120px;
+    height: 20px;*/
+    z-index: 1001;
+    pointer-events: none;
+    color: var(--main-text-color);
+    /*background: #F5F5F3;
+    border-radius: 5px;*/
+}
\ No newline at end of file

public/js/L.VisualClick/L.VisualClick.css

+/*
+* Heavily based on the CSS for https://github.com/mapshakers/leaflet-icon-pulse
+*
+* Modified to get rid of the opaque circle, and tweaked the pulse to be subtler.
+*/
+
+.leaflet-visualclick-icon {
+    border-radius: 100%;
+    pointer-events: none;
+}
+
+.leaflet-visualclick-icon:after {
+    content: "";
+    border-radius: 100%;
+    height: 60px;
+    width: 60px;
+    position: absolute;
+    margin-left: -30px;
+    margin-top: -30px;
+    pointer-events: none;
+
+    box-shadow: inset 0 0 25px -1px #E1E3E4, 0 0 10px -1px #C5C5C5;
+
+    animation: visualclick-pulsate 0.7s ease-out;
+    animation-iteration-count: 1;
+    animation-delay: 0s;
+    opacity: 0;
+}
+
+.leaflet-visualclick-icon-touch:after {
+    content: "";
+    border-radius: 100%;
+    height: 140px;
+    width: 140px;
+    position: absolute;
+    margin-left: -70px;
+    margin-top: -70px;
+    pointer-events: none;
+
+    box-shadow: inset 0 0 25px -1px #E1E3E4, 0 0 10px -1px #C5C5C5;
+
+    animation: visualclick-pulsate-touch 0.7s ease-out;
+    animation-iteration-count: 1;
+    animation-delay: 0s;
+    opacity: 0;
+}
+
+@keyframes visualclick-pulsate {
+    0% {
+        transform: scale(0.5);
+        opacity: 1;
+    }
+    100% {
+        transform: scale(1.3);
+        opacity: 0;
+    }
+}
+
+
+@keyframes visualclick-pulsate-touch {
+    from {
+        transform: scale(1);
+        opacity: 0.8;
+    }
+    to {
+        transform: scale(0.2);
+        opacity: 0.0;
+    }
+}
+
+
+.leaflet-pane.leaflet-ie10-visual-click-pane-pane { z-index: 300; }
\ No newline at end of file

public/js/L.VisualClick/L.VisualClick.js

+/*
+* L.VisualClick
+* Description: A plugin that adds visual feedback when user clicks/taps the map. Useful for when you have a delay on the clickEvents for async fetching of data, or implmentation of Leaflet.singleclick
+* Example: L.visualClick({map: leafletMap}); //Just works
+* Author: Dag Jomar Mersland (twitter: @dagjomar)
+*/
+
+
+L.Map.VisualClick = L.Handler.extend({
+
+    _makeVisualIcon: function() {
+
+        var touchMode = this._map.options.visualClickMode === 'touch' ? true : false;
+
+        return L.divIcon({
+            className: "leaflet-visualclick-icon" + (touchMode ? '-touch' : ''),    // See L.VisualClick.css
+            iconSize: [0, 0],
+            clickable: false
+        });
+    },
+
+    _visualIcon: null,
+
+    _onClick: function(e) {
+
+        var map = this._map;
+
+        var latlng = e.latlng;
+        var marker = L.marker(latlng, {
+            pane: this._map.options.visualClickPane,
+            icon: this._visualIcon,
+            interactive: false
+        }).addTo(map);
+
+        window.setTimeout(function() {
+            if (map) {
+                map.removeLayer(marker);
+            }
+        }.bind(this), map.options.visualClick.removeTimeout || 450);    // Should somewhat match the css animation to prevent loops
+
+        return true;
+    },
+
+    addHooks: function () {
+        if (this._visualIcon === null) {
+            this._visualIcon = this._makeVisualIcon();
+        }
+
+        if (this._map.options.visualClickPane === 'ie10-visual-click-pane') {
+            this._map.createPane('ie10-visual-click-pane');
+        }
+
+        this._map.on(this._map.options.visualClickEvents, this._onClick, this);
+    },
+
+    removeHooks: function () {
+        this._map.off(this._map.options.visualClickEvents, this._onClick, this);
+    },
+
+});
+
+
+L.Map.mergeOptions({
+    visualClick: L.Browser.any3d ? true : false, //Can be true, desktop, touch, false. Not straight forward to use L.Browser.touch flag because true on IE10
+    visualClickMode: L.Browser.touch && L.Browser.mobile ? 'touch' : 'desktop', //Not straight forward to use only L.Browser.touch flag because true on IE10 - so this is slightly better
+    visualClickEvents: 'click contextmenu', //Standard leaflety way of defining which events to hook on to
+    visualClickPane: (L.Browser.ie && document.documentMode === 10) ?
+        'ie10-visual-click-pane' :
+        'shadowPane'	// Map pane where the pulse markers will be showh
+});
+
+L.Map.addInitHook('addHandler', 'visualClick', L.Map.VisualClick);
\ No newline at end of file

public/js/Leaflet.BeautifyIcon/leaflet-beautify-marker-icon.css

+/*
+  Leaflet.BeautifyIcon, a plugin that adds colorful iconic markers for Leaflet by giving full control of style to end user, It has also ability to adjust font awesome
+  and glyphicon icons
+  (c) 2016-2017, Muhammad Arslan Sajid
+  http://leafletjs.com
+*/
+.beautify-marker {
+    text-align: center;
+    font-weight: 700;
+    font-family: monospace;
+    position:absolute;
+     -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+    .beautify-marker.circle {
+        border-radius: 100%;
+    }
+
+    .beautify-marker.circle-dot, .beautify-marker.doughnut {
+        border-radius: 100%;
+    }
+
+    .beautify-marker.marker {
+        border-top-left-radius: 50%;
+        border-top-right-radius: 50% 100%;
+        border-bottom-left-radius: 100% 50%;
+        border-bottom-right-radius: 0%;
+        /* rotating 45deg clockwise to get the corner bottom center */
+        transform: rotate(45deg); 
+        
+    }
+
+    .beautify-marker.marker > * {
+        /* rotating 45deg counterclock to adjust marker content back to normal */
+        transform: rotate(-45deg);
+    }
\ No newline at end of file

public/js/Leaflet.BeautifyIcon/leaflet-beautify-marker-icon.js

+/*
+  Leaflet.BeautifyIcon, a plugin that adds colorful iconic markers for Leaflet by giving full control of style to end user, It has also ability to adjust font awesome
+  and glyphicon icons
+  (c) 2016-2017, Muhammad Arslan Sajid
+  http://leafletjs.com
+*/
+
+/*global L of leaflet*/
+
+(function (window, document, undefined) {
+
+    'use strict';
+
+    /*
+    * Leaflet.BeautifyIcon assumes that you have already included the Leaflet library.
+    */
+
+    /*
+    * Default settings for various style markers
+    */
+    var defaults = {
+
+        iconColor: '#1EB300',
+
+        iconAnchor: {
+            'marker': [14, 36]
+            , 'circle': [11, 10]
+            , 'circle-dot': [5, 5]
+            , 'rectangle-dot': [5, 6]
+            , 'doughnut': [8, 8]
+        },
+
+        popupAnchor: {
+            'marker': [0, -25]
+            , 'circle': [-3, -76]
+            , 'circle-dot': [0, -2]
+            , 'rectangle-dot': [0, -2]
+            , 'doughnut': [0, -2]
+        },
+
+        innerIconAnchor: {
+            'marker': [-2, 5]
+            , 'circle': [0, 2]
+        },
+
+        iconSize: {
+            'marker': [28, 28]
+            , 'circle': [22, 22]
+            , 'circle-dot': [2, 2]
+            , 'rectangle-dot': [2, 2]
+            , 'doughnut': [15, 15]
+        }
+    };
+
+    L.BeautifyIcon = {
+
+        Icon: L.Icon.extend({
+
+            options: {
+                icon: 'leaf'
+               , iconSize: defaults.iconSize.circle
+               , iconAnchor: defaults.iconAnchor.circle
+               , iconShape: 'circle'
+               , iconStyle: ''
+               , innerIconAnchor: [0, 3] // circle with fa or glyphicon or marker with text
+               , innerIconStyle: ''
+               , isAlphaNumericIcon: false
+               , text: 1
+               , borderColor: defaults.iconColor
+               , borderWidth: 2
+               , borderStyle: 'solid'
+               , backgroundColor: 'white'
+               , textColor: defaults.iconColor
+               , customClasses: ''
+               , spin: false
+               , prefix: 'fa'
+               , html: ''
+            },
+
+            initialize: function (options) {
+
+                this.applyDefaults(options);
+                this.options = (!options || !options.html)  ? L.Util.setOptions(this, options) : options;
+            },
+
+            applyDefaults: function (options) {
+
+                if (options) {
+                    if (!options.iconSize && options.iconShape) {
+                        options.iconSize = defaults.iconSize[options.iconShape];
+                    }
+
+                    if (!options.iconAnchor && options.iconShape) {
+                        options.iconAnchor = defaults.iconAnchor[options.iconShape];
+                    }
+
+                    if (!options.popupAnchor && options.iconShape) {
+                        options.popupAnchor = defaults.popupAnchor[options.iconShape];
+                    }
+
+                    if (!options.innerIconAnchor) {
+                        // if icon is type of circle or marker
+                        if (options.iconShape === 'circle' || options.iconShape === 'marker') {
+                            if (options.iconShape === 'circle' && options.isAlphaNumericIcon) { // if circle with text
+                                options.innerIconAnchor = [0, -1];
+                            }
+                            else if (options.iconShape === 'marker' && !options.isAlphaNumericIcon) {// marker with icon
+                                options.innerIconAnchor = defaults.innerIconAnchor[options.iconShape];
+                            }
+                        }
+                    }
+                }
+            },
+
+            createIcon: function () {
+
+                var iconDiv = document.createElement('div')
+                    , options = this.options;
+
+                iconDiv.innerHTML = !options.html ? this.createIconInnerHtml() : options.html;
+                this._setIconStyles(iconDiv);
+                
+                // having a marker requires an extra parent div for rotation correction
+                if (this.options.iconShape === 'marker') { 
+                    var wrapperDiv = document.createElement('div');
+                    wrapperDiv.className = 'beautify-marker';
+                    wrapperDiv.appendChild(iconDiv);
+                    return wrapperDiv;
+                }
+
+                return iconDiv;
+            },
+
+            createIconInnerHtml: function () {
+
+                var options = this.options;
+
+                if (options.iconShape === 'circle-dot' || options.iconShape === 'rectangle-dot' || options.iconShape === 'doughnut') {
+                    return '';
+                }
+
+                var innerIconStyle = this.getInnerIconStyle(options);
+                if (options.isAlphaNumericIcon) {
+                    return '<div style="' + innerIconStyle + '">' + options.text + '</div>';
+                }
+
+                var spinClass = '';
+                if (options.spin) {
+                    spinClass = ' fa-spin';
+                }
+
+                return '<i class="' + options.prefix + ' ' + options.prefix + '-' + options.icon + spinClass + '" style="' + innerIconStyle + '"></i>';
+            },
+
+            getInnerIconStyle: function (options) {
+
+                var innerAnchor = L.point(options.innerIconAnchor)
+                return 'color:' + options.textColor + ';margin-top:' + innerAnchor.y + 'px; margin-left:' + innerAnchor.x + 'px;' + options.innerIconStyle;
+            },
+
+            _setIconStyles: function (iconDiv) {
+
+                var options = this.options
+                    , size = L.point(options.iconSize)
+                    , anchor = L.point(options.iconAnchor);
+
+                iconDiv.className = 'beautify-marker ';
+
+                if (options.iconShape) {
+                    iconDiv.className += options.iconShape;
+                }
+
+                if (options.customClasses) {
+                    iconDiv.className += ' ' + options.customClasses;
+                }
+
+                iconDiv.style.backgroundColor = options.backgroundColor;
+                iconDiv.style.color = options.textColor;
+                iconDiv.style.borderColor = options.borderColor;
+                iconDiv.style.borderWidth = options.borderWidth + 'px';
+                iconDiv.style.borderStyle = options.borderStyle;
+
+                if (size) {
+                    iconDiv.style.width = size.x + 'px';
+                    iconDiv.style.height = size.y + 'px';
+                }
+
+                if (anchor) {
+                    iconDiv.style.marginLeft = (-anchor.x) + 'px';
+                    iconDiv.style.marginTop = (-anchor.y) + 'px';
+                }
+
+                if (options.iconStyle) {
+                    var cStyle = iconDiv.getAttribute('style');
+                    cStyle += options.iconStyle;
+                    iconDiv.setAttribute('style', cStyle);
+                }
+            }
+        })
+    };
+
+    L.BeautifyIcon.icon = function (options) {
+        return new L.BeautifyIcon.Icon(options);
+    }
+
+}(this, document));
\ No newline at end of file