tri-my-ride-map/index.html at main · trideltatransit/tri-my-ride-map · GitHub

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
<html>
    <head>
        <title>Tri MyRide Service Area Map</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Outfit:wght@100..900&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="map.css">
        <script src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>
        <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v3.18.1/mapbox-gl.css">
        <script src="https://api.mapbox.com/mapbox-gl-js/v3.18.1/mapbox-gl.js"></script>
        <script id="search-js" defer src="https://api.mapbox.com/search-js/v1.5.0/web.js"></script>
        <script src="map.js"></script>
    </head>
    <body>
      <div class="tri-my-ride-map">
        <h2>Service Area Address Lookup</h2>
        <p>Enter an address below to see if it is inside of the Tri MyRide service area.</p>
        <form id="address-form" class="address-form" novalidate>
          <label id="address-label">Street address</label>
          <div class="address-input-row">
            <div id="address-autocomplete" class="address-autocomplete"></div>
            <button type="submit" class="address-input-row-button">Check address</button>
          </div>
        </form>
        <div
          id="address-alert"
          class="address-alert"
          role="status"
          aria-live="polite"
          aria-atomic="true"
        ></div>
        <div id="tri-my-ride-service-map" class="tri-my-ride-map-container" aria-hidden="true"></div>
      </div>
    </body>
</html>