{% extends "layout.html" %}

{% block title %}
    PittAir
{% endblock %}

{% block body %}
<!-- Fill viewport -->
<div class="container-fluid map">

    <!-- https://developers.google.com/maps/documentation/javascript/tutorial -->
    <div id="map-canvas"></div>

    <!-- https://getbootstrap.com/docs/4.4/components/card/ -->
    <div class="card bg-light">
        <div class="card-body">
            <!-- <h5 class="card-title">Labels</h5> -->
            <!-- <hr class='divider'/> -->
            <p class="card-text">PittAir: <img src="../static/blue_marker.png" alt="blue" class="marker"></p>
            <p class="card-text">Allegheny County: <img src="../static/red_marker.png" alt="red" class="marker"></p>
            <p class="card-text">PurpleAir: <img src="../static/purple_marker.png" alt="purple" class="marker"></p>
            <p class="card-text">SmellPGH: <img src="../static/yellow_marker.png" alt="yellow" class="marker"></p>
        </div>
    </div>
</div>
{% endblock %}