MITCriticalData-Colombia · PaulaRosero · Oct 3, 2021 · Oct 3, 2021 · Oct 3, 2021 · Oct 3, 2021
diff --git a/.DS_Store b/.DS_Store
diff --git a/front_end/.DS_Store → docs/.DS_Store b/front_end/.DS_Store → docs/.DS_Store
diff --git a/front_end/_config.yml → docs/_config.yml b/front_end/_config.yml → docs/_config.yml
diff --git a/front_end/data/.DS_Store → docs/data/.DS_Store b/front_end/data/.DS_Store → docs/data/.DS_Store
diff --git a/docs/data/.Rhistory b/docs/data/.Rhistory
diff --git a/docs/data/Leaflet.Control.Custom.js b/docs/data/Leaflet.Control.Custom.js
@@ -0,0 +1,65 @@
+(function (window, document, undefined) {
+    L.Control.Custom = L.Control.extend({
+        version: '1.0.1',
+        options: {
+            position: 'topright',
+            id: '',
+            title: '',
+            classes: '',
+            content: '',
+            style: {},
+            datas: {},
+            events: {},
+        },
+        container: null,
+        onAdd: function (map) {
+            this.container = L.DomUtil.create('div');
+            this.container.id = this.options.id;
+            this.container.title = this.options.title;
+            this.container.className = this.options.classes;
+            this.container.innerHTML = this.options.content;
+
+            for (var option in this.options.style)
+            {
+                this.container.style[option] = this.options.style[option];
+            }
+
+            for (var data in this.options.datas)
+            {
+                this.container.dataset[data] = this.options.datas[data];
+            }
+
+
+            /* Prevent click events propagation to map */
+            L.DomEvent.disableClickPropagation(this.container);
+
+            /* Prevent right click event propagation to map */
+            L.DomEvent.on(this.container, 'contextmenu', function (ev)
+            {
+                L.DomEvent.stopPropagation(ev);
+            });
+
+            /* Prevent scroll events propagation to map when cursor on the div */
+            L.DomEvent.disableScrollPropagation(this.container);
+
+            for (var event in this.options.events)
+            {
+                L.DomEvent.on(this.container, event, this.options.events[event], this.container);
+            }
+
+            return this.container;
+        },
+
+        onRemove: function (map) {
+            for (var event in this.options.events)
+            {
+                L.DomEvent.off(this.container, event, this.options.events[event], this.container);
+            }
+        },
+    });
+
+    L.control.custom = function (options) {
+        return new L.Control.Custom(options);
+    };
+
+}(window, document));
diff --git a/docs/data/data_alpha.geojson b/docs/data/data_alpha.geojson
diff --git a/docs/data/data_gamma.geojson b/docs/data/data_gamma.geojson
diff --git a/docs/data/data_mu.geojson b/docs/data/data_mu.geojson
diff --git a/docs/data/datepicker-full.min.js b/docs/data/datepicker-full.min.js
diff --git a/docs/data/datepicker.min.css b/docs/data/datepicker.min.css
diff --git a/front_end/data/line.geojson → docs/data/line.geojson b/front_end/data/line.geojson → docs/data/line.geojson
diff --git a/front_end/data/line.js → docs/data/line.js b/front_end/data/line.js → docs/data/line.js
diff --git a/front_end/data/nepaldata → docs/data/nepaldata b/front_end/data/nepaldata → docs/data/nepaldata
diff --git a/front_end/data/nepaldata.js → docs/data/nepaldata.js b/front_end/data/nepaldata.js → docs/data/nepaldata.js
diff --git a/front_end/data/point.geojson → docs/data/point.geojson b/front_end/data/point.geojson → docs/data/point.geojson
diff --git a/front_end/data/point.js → docs/data/point.js b/front_end/data/point.js → docs/data/point.js
diff --git a/front_end/data/polygon.geojson → docs/data/polygon.geojson b/front_end/data/polygon.geojson → docs/data/polygon.geojson
diff --git a/front_end/data/polygon.js → docs/data/polygon.js b/front_end/data/polygon.js → docs/data/polygon.js
diff --git a/docs/data/usstates(1).js b/docs/data/usstates(1).js
diff --git a/front_end/data/usstates.js → docs/data/usstates.js b/front_end/data/usstates.js → docs/data/usstates.js
diff --git a/front_end/data/usstates_original.js → docs/data/usstates_original.js b/front_end/data/usstates_original.js → docs/data/usstates_original.js
diff --git a/front_end/index - Shortcut.lnk → docs/index - Shortcut.lnk b/front_end/index - Shortcut.lnk → docs/index - Shortcut.lnk
diff --git a/front_end/index.html → docs/index.html b/front_end/index.html → docs/index.html
@@ -8,6 +8,8 @@
     <title>Colombia COVID-19 Risk</title>
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
     <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
+    <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
+    <link rel="stylesheet" href="./data/datepicker.min.css"/>
     <style>
         #map {
             height: 90vh;
@@ -40,6 +42,9 @@
             margin-right: 8px;
             opacity: 0.7;
         }
+        .datepicker-dropdown {
+            z-index: 99999 !important;
+        }
     </style>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
 
@@ -78,14 +83,16 @@
 <script src="./data/point.js"></script>
 <script src="./data/polygon.js"></script>
 <script src="./data/nepaldata.js"></script>
+<script src="./data/Leaflet.Control.Custom.js"></script>
+<script src="./data/datepicker-full.min.js"></script>
 <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
 <script src="./data/usstates.js"></script>
 <script>
     /*===================================================
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   OSM  LAYER               
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             ===================================================*/
     /*https://leafletjs.com/examples/choropleth/#:~:text=statesData%20JS%20variable.-,Basic%20States%20Map,-Let%E2%80%99s%20display%20our*/
-    var map = L.map('map').setView([2.4422295, -76.6072368], 4);
+    var map = L.map('map').setView([2.4422295, -76.6072368], 5);
     var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
     });
@@ -94,10 +101,8 @@
                           MARKER               
     ===================================================*/
 
-    var singleMarker = L.marker([37.09024, -95.712891]);
-    singleMarker.addTo(map);
-    var popup = singleMarker.bindPopup('This is a popup')
-    popup.addTo(map);
+    var singleMarker = L.marker([2.4422295, -76.6072368]);
+
 
     /*===================================================
                          TILE LAYER               
@@ -190,11 +195,11 @@
 
     // find colors here : https://colorbrewer2.org/#type=sequential&scheme=YlGn&n=4 
     function getColor(d) {
-        return d == 2.0 ? '#fecc5c' :// rojo
-             d >= 3.0 ? '#cb181d' :// amarillo
-            d == 1 ? '#fd8d3c' : // verde claro
-            d == 0 ? '#238443' : // verde
-            '#FFEDA0';
+        return  d == 3.0 ? '#cb181d' :// rojo oscuro
+                d == 2.0 ? '#fb6a4a' :// rojo medio
+                d == 1.0 ? '#fcae91' :// rojo claro
+                d == 0.0 ? '#238b45' :// verde
+                '#FFEDA0';
     }
     function style(feature) {
         return {
@@ -262,12 +267,11 @@
         return this._div;
     };
 
-
     // method that we will use to update the control based on feature properties passed
     info.update = function(props) {
         this._div.innerHTML = '<h4>Colombia COVID-19 Risk</h4>' + (props ?
             '<b>' + props.NOMBRE_DPT + '</b><br />' + ' COVID-19 Risk factor: ' + props.risk + 
-            '</b><br />' + 1003*props.id + ' people / mi<sup>2</sup>' :
+            '</b><br />' + props.total_population + ' people ' :
             'Hover over a state');
     };
 
@@ -280,27 +284,107 @@
     legend.onAdd = function(map) {
 
         var div = L.DomUtil.create('div', 'info legend'),
-            grades = [0, 1, 2, 3, 4],
-            //grades1 = [2, 3];
+            grades = ['Low', 'Middle', 'Middle/high', 'high'],
+            //grades1 = [2, 3, 4];
             labels = [];
 
         // loop through our density intervals and generate a label with a colored square for each interval
-        for (var i = 0; i < grades.length-1; i++) {
+        for (var i = 0; i < grades.length; i++) {
             div.innerHTML +=
-                '<i style="background:' + getColor(grades[i] + 1) + '"></i> ' +
-                grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] + ' <br>' : '');
+                '<i style="background:' + getColor(i) + '"></i> ' +
+                grades[i] + (grades[i + 1] ? '' +  ' <br>' : '');
         }
-/*
-        // loop through our density intervals and generate a label with a colored square for each interval
-        for (var i = 0; i < grades1.length-1; i++) {
-            div.innerHTML +=
-                '<i style="background:' + getColor(grades1[i] + 1) + '"></i> ' +
-                grades1[i] + (grades1[i + 1] ? '&ndash;' + grades1[i + 1] + ' <br>' : '');
-        }       
-*/
 
         return div;
     };
 
     legend.addTo(map);
+
+    /*===================================================
+                          SEARCH                
+    ===================================================*/
+    const controlCode = `
+    <h5>Find COVID-19 Risk</h5>
+    <label for="latitude">Latitude:</label>
+    <input type="text" id="latfield" name="latitude" size="10">
+    <br><br>
+    <label for="longitude">Longitude:</label>
+    <input type="text" id="longfield" name="longitude" size="10">
+    <br><br>
+    <label for="datepicker">Date:</label>
+    <input type="text" name="datepicker" id="datefield" size="10">
+    <br><br>
+    <button id="goButton" onclick="zoomMap()">Go</button>
+`;
+
+const finder = L.control.custom({
+    position: 'topright',
+    content: controlCode,
+    style: {
+        margin: '10px',
+        padding: '5px',
+        background: '#eee',
+        borderRadius: '5px',
+        textAlign: 'center',
+    },
+    classes: 'findercontrol',
+});
+
+finder.addTo(map);
+
+function zoomMap() {
+    const latField = document.getElementById('latfield');
+    const longField = document.getElementById('longfield');
+    const lat = parseFloat(latField.value);
+    const long = parseFloat(longField.value);
+    var date_pointer = document.getElementById('datefield').value;
+
+    if (!(isNaN(lat) || isNaN(long))) {
+        try {
+            map.setView(L.latLng(lat, long), 7, { animate: true, duration: 1 });
+            var Marker5 = L.marker([lat, long]);
+
+            Marker5.addTo(map);
+
+            Marker5.onAdd = function(map) {
+            this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
+            this.update();
+            return this._div;
+            };
+
+
+
+            console.log(date_pointer.replace('/', '-'));
+
+            var popup = Marker5.bindPopup(`COVID-19 Risk`)
+
+            info.update(layer.feature.properties);
+
+
+
+            popup.addTo(map);
+
+
+        } catch (e) {
+            console.error('error:', e);
+        }
+
+
+    }
+                // method that we will use to update the control based on feature properties passed
+                info.update = function(props) {
+                this._div.innerHTML = '<h4>Colombia COVID-19 Risk</h4>' + (props ?
+                    '<b>' + props.NOMBRE_DPT + '</b><br />' + ' COVID-19 Risk factor: ' + props.risk + 
+                    '</b><br />' + props.total_population + ' people ' +
+                    '</b><br />' + date_pointer + '</b>' + ' date ':
+                    'Hover over a state');
+                console.log(props);
+                console,log(date);
+            };
+}
+
+
+
+const elem = document.querySelector('input[name="datepicker"]');
+const datepicker = new Datepicker(elem);
 </script>