accessibility-map-grid/index.html at master · jesusbotella/accessibility-map-grid · 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
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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <title>Voice-based Map Accessibility concept</title>
    <meta name="description" content="Voice-based Map Accessibility concept">
    <meta name="author" content="Jesús Botella">

    <meta property="og:title" content="Voice-based Map Accessibility concept">
    <meta property="og:description" content="Example based on Apple's WWDC map accessibility concept introduced for MacOS Catalina">
    <meta property="og:url" content="https://jesusbotella.github.io/accesibility-map-grid/">

    <meta name="twitter:title" content="Voice-based Map Accessibility concept">
    <meta name="twitter:description" content="Example based on Apple's WWDC map accessibility concept introduced for MacOS Catalina">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:creator" content="@sn00b">

    <!-- CSS styles go here -->
    <link rel="stylesheet" href="src/styles/styles.css">
    <link href="https://fonts.googleapis.com/css?family=Rubik:400,500&display=swap" rel="stylesheet">
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
  </head>

  <body>
    <div id="map"></div>

    <aside class="explanation">
      <h1 class="explanation__title">Voice-based Map Accessibility</h1>
      <p class="explanation__subtitle">
        Example based on Apple's WWDC map accessibility concept introduced for MacOS Catalina
      </p>
      <p class="explanation__subtitle">
        Say <code>enable controls</code> to show the grid and say numbers to zoom in to a particular map area
      </p>

      <p class="explanation__subtitle">
        Say <code>zoom out</code> to zoom out to previous zoom level
      </p>

      <a class="explanation__link" href="https://github.com/jesusbotella/accessibility-map-grid" target="_blank">Repository</a>
    </aside>

    <div class="grid">
      <div class="grid__item" data-element-position="1"></div>
      <div class="grid__item" data-element-position="2"></div>
      <div class="grid__item" data-element-position="3"></div>
      <div class="grid__item" data-element-position="4"></div>
      <div class="grid__item" data-element-position="5"></div>
      <div class="grid__item" data-element-position="6"></div>
      <div class="grid__item" data-element-position="7"></div>
      <div class="grid__item" data-element-position="8"></div>
      <div class="grid__item" data-element-position="9"></div>
      <div class="grid__item" data-element-position="10"></div>
      <div class="grid__item" data-element-position="11"></div>
      <div class="grid__item" data-element-position="12"></div>
      <div class="grid__item" data-element-position="13"></div>
      <div class="grid__item" data-element-position="14"></div>
      <div class="grid__item" data-element-position="15"></div>
      <div class="grid__item" data-element-position="16"></div>
    </div>

    <!-- Scripts go here -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.6.1/annyang.min.js"></script>

    <!-- Maps -->
    <script src="https://libs.cartocdn.com/carto-vl/v1.3.0/carto-vl.min.js"></script>
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>

    <script type="module" src="src/js/index.js"></script>
  </body>
</html>