index.html 3.54 KB
Newer Older
Kunal Sarkhel's avatar
Kunal Sarkhel committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103
{% extends 'base.html' %}

{% block extra_head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
      integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
      crossorigin=""/>
<link rel="stylesheet" href="{{ url_for('static', filename='titatoggle-dist-min.css') }}">
<style>
    #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    html, body {
        height: 100%;
        width: 100%;
    }
    #page-content {
        height: 100%;
    }
    #map-container {
        padding: 0;
        margin: 0;
    }
</style>
{% endblock %}

{% block extra_js %}
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
        integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
        crossorigin=""></script>
<script type="text/javascript">
    // GMU Decimal Latitude and Decimal Longitude
    const gmuLatitude = 38.8322871;
    const gmuLongitude = -77.3080912;
    const defaultZoom = 16;

    var map = L.map('map', {
        minZoom: 0,
        maxZoom: 20,
        zoomSnap: 0,
        zoomDelta: 0.25
    });

    var cartodbAttribution = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>';

    var tileUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
    // 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png'
    var positron = L.tileLayer(tileUrl, {
        attribution: cartodbAttribution
    }).addTo(map);

    map.setView([gmuLatitude, gmuLongitude], defaultZoom);
</script>
{% endblock %}

{% block content %}
<div class="container-fluid" id="page-content">
    <div class="row" style="height: 100%;">
        <nav class="col-sm-3 col-md-2 d-none d-sm-block navbar-inverse navbar-dark bg-dark sidebar">
            <h1 class="navbar-brand navbar-dark bg-dark">MapMason</h1>

            <p>
            <h3 class="text-primary">Search</h3>
            <form class="form-inline mt-2 mt-md-0">
                <small class="form-text text-light">Search via Name or Keyword</small>
                <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Name or Keyword">
            </form>
            </p>

            <p>
            <h3 class="text-primary">Filter Locations</h3>
            <div class="nav flex-column text-light">
                <div class="form-check checkbox-slider--b-flat">
                <label>
                    <input type="checkbox"><span>Parking</span>
                </label>
                </div>
                <div class="form-check checkbox-slider--b-flat">
                <label>
                    <input type="checkbox"><span>Residence Halls</span>
                </label>
                </div>
                <div class="form-check checkbox-slider--b-flat">
                <label>
                    <input type="checkbox"><span>Dining Halls</span>
                </label>
                </div>
            </div>
            </p>

            <p class="text-light">Having problems? <a href="mailto:srct@gmu.edu">Submit feedback</a></p>

            <p class="text-muted">A service of <a href="http://srct.gmu.edu">Mason SRCT</a>. Licensed under the <a href="http://opensource.org/licenses/Apache-2.0">Apache License, Version 2.0</a>.</p>
        </nav>

        <main role="main" class="col-sm-9 ml-sm-auto col-md-10" id="map-container">
            <div id="map"></div>
        </main>
    </div>
</div>
{% endblock %}