MUSA611-CPLN692-spring2019 · bucklerd · Mar 22, 2019 · Mar 23, 2019 · Mar 24, 2019 · Mar 25, 2019
diff --git a/README.md b/README.md
diff --git a/css/reset.css b/css/reset.css
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,64 @@
+body {
+    padding: 0;
+    overflow: hidden;
+    font-family: colfax, helvetica, arial, sans-serif;
+}
+
+p.main {
+  font-size: 24px;
+}
+
+.header{
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 75px;
+  background-color: #000080;
+  color: #ffffff;
+  width: 100%;
+  padding-left: 25px;
+}
+
+.sidebar {
+  position: absolute;
+  left: 0;
+  width: 360px;
+  top: 75px;
+  bottom: 0;
+  padding-left: 25px;
+  padding-right: 25px;
+  padding-top: 10px;
+  overflow: auto;
+  background-color: #eeeeee;
+
+}
+
+.map {
+    position: absolute;
+    right: 0px;
+    left: 400px;
+    height: 100%;
+    top: 75px;
+}
+
+.btnLine{
+  position: absolute;
+  bottom: 20px;
+}
+
+.btn{
+  padding: 5px;
+  width: 75px;
+  /* background-color: #000080;
+  color: #ffffff */
+
+  }
+
+#nxt{
+  margin-left: 35px;
+}
+
+#bck {
+  margin-left: 50px;
+  margin-right: 35px;
+}
diff --git a/images/midterm-demo-streets1.png b/images/midterm-demo-streets1.png
diff --git a/images/midterm-demo-streets2.png b/images/midterm-demo-streets2.png
diff --git a/images/midterm-demo-streets3.png b/images/midterm-demo-streets3.png
diff --git a/images/midterm-demo-streets4.png b/images/midterm-demo-streets4.png
diff --git a/images/midterm-demo-streets5.png b/images/midterm-demo-streets5.png
diff --git a/index.html b/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <!-- CSS Imports -->
+    <link rel="stylesheet" href="css/reset.css" />
+    <!-- <link rel="stylesheet" href="css/leaflet.css" /> -->
+    <link rel="stylesheet" href="css/style.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.css" integrity="sha256-YR4HrDE479EpYZgeTkQfgVJq08+277UXxMLbi/YP69o=" crossorigin="anonymous" />
+  </head>
+
+  <body>
+    <!-- Sidebar -->
+    <div class="header"> <h1>US Hospital Distribution</h1></div>
+    <div class="sidebar">
+      <div>
+        <h2 id = "Title">Title</h1>
+        <p id = "slideText"> Slide Text </p>
+      </div>
+
+      <div id = "filters">
+        <h4>Filters</h4>
+        State (two letter)  <input type=text id="stateFilter"/> <br>
+        <br>
+        Hospital Type: <select id="typeFilter" value="">
+          <option value="">--All-- </option>
+          <option selected value="GENERAL ACUTE CARE">General Acute Care </option>
+          <option value="CHILDREN">Childrens Hospitals </option>
+          <option value="CHRONIC DISEASE">Chronic Disease Hospitals </option>
+          <option value="CRITICAL ACCESS">Critical Access </option>
+          <option value="LONG TERM CARE">Long Term Care  </option>
+          <option value="MILITARY">Military Hospitals </option>
+          <option value="PSYCHIATRIC">Psychiatric Hospitals </option>
+          <option value="REHABILITATION">Rehab Hospitals </option>
+          <option value="SPECIAL">Special Hospitals </option>
+        </select>
+        <br>
+        <br>
+        <button class="btn" id="update"> Update Map </button>
+
+      </div>
+
+
+      <span class = "btnLine">
+        <button class = "btn" id = "bck"><strong>Previous</strong></button>
+        <button class = "btn" id = "nxt"><strong>Next</strong></button>
+      </span>
+
+    </div>
+    <!-- Map -->
+    <div id="map" class="map"></div>
+    <!-- Javascript Imports -->
+    <script src="js/leaflet.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore.js" integrity="sha256-O4179En8zabOlPYBNvGp8cF0uh0vnSZpW4Q6Ul1h+8c=" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
+    <script src="js/slides.json"></script>
+    <script src="js/midtermFunctions.js"></script>
+    <script src="js/main.js"></script>
+
+    <!-- <script src="js/main.js"></script> -->
+  </body>
+  </html>
diff --git a/js/images/layers-2x.png b/js/images/layers-2x.png
diff --git a/js/images/layers.png b/js/images/layers.png
diff --git a/js/images/marker-icon-2x.png b/js/images/marker-icon-2x.png
diff --git a/js/images/marker-icon.png b/js/images/marker-icon.png
diff --git a/js/images/marker-shadow.png b/js/images/marker-shadow.png
diff --git a/js/leaflet.js b/js/leaflet.js
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,39 @@
+//Map setup
+
+var map = L.map('map', {
+  center: [39.8283, -98.5795],
+  zoom: 4
+});
+var Stamen_TonerLite = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
+  attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+  subdomains: 'abcd',
+  minZoom: 0,
+  maxZoom: 20,
+  ext: 'png'
+}).addTo(map);
+
+//Varaoble declarations
+var dataURL = "https://opendata.arcgis.com/datasets/a2817bf9632a43f5ad1c6b0c153b0fab_0.geojson";
+var parsedData;
+var slideNum = 0;
+var featureGroup;
+var hospType;
+
+//Data aquisition
+aquireData(dataURL)
+
+buildSlide(slides[slideNum]);
+
+$("#nxt").click(() => {
+  slideNum = slideNum + 1;
+  buildSlide(slides[slideNum]);
+});
+
+$('#bck').click(() => {
+  slideNum = slideNum - 1;
+  buildSlide(slides[slideNum]);
+});
+
+$('#update').click(() => {
+  updateMap();
+})
diff --git a/js/midtermFunctions.js b/js/midtermFunctions.js
@@ -0,0 +1,94 @@
+//User derived functions for Midterm Project
+
+var aquireData = function(datUrl) {
+  var downloadData = $.ajax(datUrl).done((dat) => {
+    console.log(dat);
+    parsedData = dat;
+  })
+};
+
+var cngTitle = (obTitle) => {
+  $('#Title').text(obTitle);
+};
+
+var cngText = (obText) => {
+  $('#slideText').text(obText);
+};
+
+var makeStateFilter = () => {
+  var stInput = $('#stateFilter').val();
+  if(stInput != "") {
+    return 'feature.properties.STATE == "' + stInput.toUpperCase() + '"';
+  } else { return 'feature.properties.STATE !=""'; }
+};
+
+var makeTypeFilter = () => {
+  var typeInput = $('#typeFilter').val();
+  if(typeInput != "") {
+    return 'feature.properties.TYPE == "' + typeInput.toUpperCase() + '"';
+  } else { return 'feature.properties.TYPE != ""'; }
+
+};
+
+var myFilter = function(feature) {
+  //console.log(feature.properties.TYPE);
+  //return feature.properties.TYPE == hospType;
+  //return eval(!(makeStateFilter()));
+  return eval( makeStateFilter() + " & " + makeTypeFilter() );
+};
+
+
+function createCircleMarker( feature, latlng ){
+  // Change the values of these options to change the symbol's appearance
+  let options = {
+    radius: 4,
+    fillColor: "#000080",
+    color: "#000080",
+    weight: 0,
+    opacity: 0.4,
+    fillOpacity: 0.4
+  }
+  return L.circleMarker( latlng, options );
+}
+
+
+var updateMap = (slideObject) => {
+  if (typeof featureGroup != "undefined") {map.removeLayer(featureGroup);};
+
+  featureGroup = L.geoJson(parsedData, {
+      pointToLayer: createCircleMarker,
+      filter: myFilter
+    }).bindPopup(function(layer) {
+      return layer.feature.properties.NAME;
+    }).addTo(map);
+    if(slideNum >= 4) {
+      map.fitBounds(featureGroup.getBounds(), animate=true);
+    } else {map.setView(slideObject.center, slideObject.zoom, animate = true);}
+
+    featureGroup.on('hover', function(e) {
+      this.openPopup();
+    } )
+    featureGroup.on('mouseout', function(e) {
+      this.closePopup();
+    })
+
+};
+
+var buildSlide = (slideObject) => {
+  $('#typeFilter').val(slideObject.typeFilter);
+  $('#stateFilter').val(slideObject.stateFilter);
+  //hospType = slideObject.hospType;
+  cngTitle(slideObject.title);
+  cngText(slideObject.text);
+  updateMap(slideObject);
+  // if(slideNum >= 4) {
+  //   map.fitBounds(featureGroup.getBounds());
+  // } else {map.setView(slideObject.center, slideObject.zoom);}
+
+
+  if(slideNum > 0) {$("#bck").show();} else {$("#bck").hide();}
+  if(slideNum < 5) {$("#nxt").show();} else {$("#nxt").hide();}
+  if(slideNum <= 4) {$('#filters').css("visibility", "hidden");} else {$('#filters').css("visibility", "visible");}
+
+
+};
diff --git a/js/slides.json b/js/slides.json
@@ -0,0 +1,44 @@
+var slides = [
+  {title: "Hospitals and Accessibility",
+    text: "Access to advanced medical care represents a fundamental need for millions of Americans and visitors. Understanding how those resources are distributed across the country could potentially improve health and reduce morbidity and mortality. Let's take a look together. Click NEXT to continue.",
+    hospType: "",
+    stateFilter: "",
+    typeFilter: "",
+    center: [39.8283, -98.5795],
+    zoom: 4},
+  {title: "All Hospital Types",
+    text: "Hospitals represent the third level of medical treatment for most healthcare 'users', after primary care doctor visits and specialist referrals. Generally, hospitals should align with population centers to provide adequite access to care for all.",
+    hospType: "",
+    stateFilter: "",
+    typeFilter: "",
+    center: [39.8283, -98.5795],
+    zoom: 4},
+  {title: "General Acute Care Hospitals",
+    text: "General acute care hospitals represent the type of hospital most people are familiar with. They provide care for acute and chronic conditions.",
+    hospType: "GENERAL ACUTE CARE",
+    stateFilter: "",
+    typeFilter: "GENERAL ACUTE CARE",
+    center: [39.8283, -98.5795],
+    zoom: 4},
+  {title: "Children's Hospitals",
+    text: "Specialty hospials can take many forms. Acute care for children represents one important subgroup of hospitals, though their distibution is scare in some areas." ,
+    hospType: "CHILDREN",
+    stateFilter: "",
+    typeFilter: "CHILDREN",
+    center: [39.8283, -98.5795],
+    zoom: 4},
+  {title: "Pennsylvania",
+    text: "Let's take a closer look at our home state of Pennsylvania.",
+    hospType: "",
+    stateFilter: "PA",
+    typeFilter: "",
+    center: [41.203323, -77.194527],
+    zoom: 7},
+  {title: "Now Let's Explore",
+    text: "Select a state or hopsital type that is interesting to you! The map will update and re-center when you click the 'Update Map' button.",
+    hospType: "GENERAL ACUTE CARE",
+    stateFilter: "",
+    typeFilter: "GENERAL ACUTE CARE",
+    center: [39.8283, -98.5795],
+    zoom: 4}
+]