first commit

core/templates/pages/maps.html

@@ -0,0 +1,39 @@
+{% extends 'layouts/base.html' %}
+
+{% block title %} Maps {% endblock title %}
+
+{% block content %}  
+<div class="container-fluid pt-6 bg-secondary">
+  <h2>Maps</h2>
+  <p>Country level maps. More coming soon!</p>
+  <div class="row">
+    <div class="col-xl-12 mb-5 mb-xl-0">  <!-- Global interactive Plotly Mabpox -->
+      <div class="card shadow fade-in-bottom">
+        <div class="card-body plotly worldmap">
+          <script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.54.6/plotly.min.js"></script>
+
+          <div class="chart">
+            {% autoescape off %}
+            {{ usa_map }}
+            {% endautoescape %}
+          </div>
+        </div>
+        <div style="position: absolute; padding:1.25rem 1.5rem;">
+            <h6 class="text-uppercase text-muted ls-1 mb-1">USA Counties | Per Capita</h6>
+            <h2 class="text-dark mb-0">Per 100k Residents</h2>
+        </div>
+      </div>
+    </div>
+  </div>
+  {% include "includes/footer.html" %}
+</div>
+
+{% endblock content %}
+
+<!-- Specific JS goes HERE --> 
+{% block javascripts %}
+<script>
+$('.nav-item a').removeClass('active');
+$('.maps-item a').addClass('active');
+</script>
+{% endblock javascripts %}