<!DOCTYPE html>
<html>

<head>
    <title>Norfolk Flood Map</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- Load Leaflet from their CDN -->
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>

    <link rel="stylesheet" href="main.css" />

    <!-- Load Esri Leaflet -->
    <script src="esri-leaflet/examples/lib/esri-leaflet/esri-leaflet.js"></script>

    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/leaflet-slider/dist/leaflet.SliderControl.min.js"></script>
    <script src="bower_components/lodash/dist/lodash.compat.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
    <script src="js/main.js"></script>
    <script src="js/ga.js"></script>
</head>

<body>
    <div id="map"></div>
    <a href="https://github.com/c4hrva/norfolk-flood-maps/">
        <img style="z-index: 1000; position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" alt="Fork me on GitHub">
    </a>

    <div id="controls">
        <div>
            <h2>Depth</h2>
            <label id="size">10 feet</label>
            <input id="depth_slider" type="range" min="1" max="20" step="1" value="20">
        </div>
            <h2>Time</h2>
            <label id="time">now</label>
            <input id="time_slider" type="range" min="0" max="240" step="1" value="240">
            <p>Based on tidal data, values are adjusted by <span class="tidal_measure"><span id="tidal_value"></span> feet</span>.</p>
        </div>
    </div>
</body>
</html>
