Merge pull request #16 from caocscar/master

Fixed icon display issue
choisteph · Sep 23, 2019 · e594cea · e594cea
2 parents 3ce2403 + 556e56a
commit e594cea
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 48 deletions.
diff --git a/static/js/dashboard.js b/static/js/dashboard.js
@@ -1,5 +1,5 @@
 // creates all charts
-async function makeDashboard(fileName, placename, placetype, src) {
+async function makeDashboard(fileName, placename, placetype) {
     previous = "";
     neutral = "fa-sort";
     ascending = "fa-sort-asc";
@@ -10,7 +10,7 @@ async function makeDashboard(fileName, placename, placetype, src) {
     DATA = await d3.csv(fileName, type);
     CF = crossfilter(DATA);
     srcDim = CF.dimension(d => d.src)
-    changeDataSource(src)
+    changeSrc()
     if (placetype == 'county') {
         countyDim = CF.dimension(d => d.county);
         countyDim.filter(d => d === placename)
@@ -101,12 +101,23 @@ function resetAll() {
     updateAll();
 };
 
-function changeDataSource(src) {
+function changeSrc() {
+    const svgIcon = src === 'EMS' ? 'ambulance_icon_blues.svg' : 'morguetable_5.svg'
+    const txtIcon = src === 'EMS' ? 'ambulance' : 'morgue table'
+    tableIcon = L.icon({
+      iconUrl: '/static/markers/' + svgIcon,
+      iconSize: [25,25], // size of the icon
+      iconAnchor: [15,15], // point of the icon which will correspond to marker's location
+    });
     d3.select('#datasource').text(`${src} - SIMULATED`)
+    d3.select('#dataicon')
+        .attr('src',`/static/markers/${svgIcon}`)
+        .attr('alt',`${txtIcon} represents ${src} data`)
     srcDim.filter(d => d === src)  
 }
 
-function updateDataSource(src) {
-    changeDataSource(src)
+function updateSrc(source) {
+    src = source
+    changeSrc()
     updateAll()
 }
diff --git a/static/js/htmlTable.js b/static/js/htmlTable.js
@@ -4,7 +4,7 @@ function makeHtmlTable() {
     table = d3.select("#sosTable")
     thead = table.append('thead').append('tr')
       .selectAll('th')
-      .data(d => headers)
+      .data(headers)
       .join('th')
         .text((d,i) => i = 1 ? formatHTMLthings(d): d)
         .attr('class', (d,i) => headers[i] + " sortable")
@@ -20,11 +20,11 @@ function makeHtmlTable() {
 // updates HTML table
 function updateHtmlTable(data) {
     row = tbody.selectAll('tr')
-        .data(data)
-        .join('tr')
+      .data(data)
+      .join('tr')
     row.selectAll('td')
-        .data((d) => d3.values(d).slice(0,-3))
-        .join('td')
+      .data(d => d3.values(d).slice(0,-3))
+      .join('td')
         .text((d,i) => i == 0 ? formatHTMLthings(d) : d)
 };
 function formatHTMLthings(d){

diff --git a/static/js/map.js b/static/js/map.js
@@ -2,7 +2,6 @@
 function createMap() {// Mapbox section
     L.mapbox.accessToken = 'pk.eyJ1Ijoic3RjaG9pIiwiYSI6ImNqd2pkNWN0NzAyNnE0YW8xeTl5a3VqMXQifQ.Rq3qT82-ysDHcMsHGTBiQg';
     layers = {
-        // 'main': L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'),
         'Light': L.mapbox.styleLayer('mapbox://styles/mapbox/light-v10'),
         'Dark': L.mapbox.styleLayer('mapbox://styles/mapbox/dark-v10'),
         'Main': L.mapbox.styleLayer('mapbox://styles/stchoi/cjwky60dk0toy1cm8fnhngzrv')
@@ -25,7 +24,7 @@ function createMap() {// Mapbox section
             color: '#72add4',
             fillOpacity: 0.30
         };
-  }
+    }
 
     L.control.layers(layers).addTo(map); // add basemap control
     featureLayer = L.mapbox.featureLayer().addTo(map);
@@ -54,6 +53,7 @@ function drawMarkers() {
           .bindPopup(`<p>${formatDate(pt.date)}<br>${pt.county}<br>${pt.Age} ${pt.Race} ${pt.Gender}</p>`))
       };
 };
+
 function updateMap(bounds) {
     latDim.filter([bounds.getSouth(), bounds.getNorth()])
     lngDim.filter([bounds.getWest(), bounds.getEast()])

diff --git a/templates/dashboard.html b/templates/dashboard.html
@@ -71,8 +71,8 @@
       <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
         <li class="nav-item">
           <div>
-            <button class="srcbutton" onclick="updateDataSource('EMS')"> EMS </button>
-            <button class="srcbutton" onclick="updateDataSource('ME')"> ME </button>
+            <button class="srcbutton" onclick="updateSrc('EMS')"> EMS </button>
+            <button class="srcbutton" onclick="updateSrc('ME')"> ME </button>
           </div>
         </li>
       </ul>
@@ -119,11 +119,7 @@
             <div class= "col-sm-4 text-left">
               <h2 id="place">{{ data.titlename }}</h2>
               <h4 id="datasource"></h4>
-              {% if data.src == 'EMS' %}
-                <img src = "/static/markers/ambulance_icon_blues.svg" alt = "ambulance represents EMS data">
-              {% elif data.src == 'ME' %}
-                <img src = "/static/markers/morguetable_5.svg" alt = "morgue table represents ME data">
-              {% endif %}
+              <img id='dataicon'>
               <!-- {% if data.src == "ED" %}
                 <img src = "/static/markers/hospital_icon_blues.svg" alt = "hospital represents ED data">
               {% endif %} -->
@@ -260,42 +256,15 @@ <h4>{{ thing }}</h4>
       </div>
     </div>
   </footer>
-  <!-- setting leaflet-mapbox icons through Flask -->
-  {% if data.src == "EMS" %}
-    <script>
-    var tableIcon = L.icon({
-        iconUrl: '/static/markers/ambulance_icon_blues.svg',
-        iconSize:     [25,25], // size of the icon
-        iconAnchor:   [15,15], // point of the icon which will correspond to marker's location
-      });
-    </script>
-  <!-- {% if data.src == "ED" %}
-    <script>
-    var tableIcon = L.icon({
-        iconUrl: '/static/markers/hospital_icon_blues.svg',
-        iconSize:     [25,25], // size of the icon
-        iconAnchor:   [15,15], // point of the icon which will correspond to marker's location
-      });
-    </script>
-  {% endif %} -->
-  {% elif data.src == "ME" %}
-    <script>
-    var tableIcon = L.icon({
-        iconUrl: '/static/markers/morguetable_5.svg',
-        iconSize:     [25,25], // size of the icon
-        iconAnchor:   [15,15], // point of the icon which will correspond to marker's location
-      });
-    </script>
-  {% endif %}
 
   <script>
   // Mapbox - Flask variables
     centerMapbox = {{ data.center }};
     county_geojson = "{{ url_for('static',filename=data.f_geojson) }}";
     zoomMapbox = {{ data.zoom }};
-
+    src = "{{ data.src }}";
     // populate data graphics
-    makeDashboard("/static/data/map_fake.csv", "{{ data.placename }}", "{{ data.placetype }}", "{{ data.src }}");
+    makeDashboard("/static/data/map_fake.csv", "{{ data.placename }}", "{{ data.placetype }}");
 </script>
 </body>
 </html>