40 lines
1.2 KiB
HTML
40 lines
1.2 KiB
HTML
{% 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 %}
|