electionmap/index.html at master · catrawalkar/electionmap · 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
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
<!DOCTYPE html>
<html>

<head>
  <title>Election Map</title>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <!-- Mapbox Assembly -->
  <script async defer src='https://api.mapbox.com/mapbox-assembly/v0.23.2/assembly.js'></script>
  <link href='https://api.mapbox.com/mapbox-assembly/v0.23.2/assembly.min.css' rel='stylesheet'>
  <!-- Mapbox GL-->
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css' rel='stylesheet' />
  <!-- Mapbox GL Geocoder -->
  <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v3.1.6/mapbox-gl-geocoder.min.js'></script>
  <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v3.1.6/mapbox-gl-geocoder.css' type='text/css' />
  <!-- Mapbox GL Extensions -->
  <script src='https://cdn.jsdelivr.net/gh/publicmap/mapbox-gl-tools@master/dist/addMapControls.js'></script>
  <link href='https://cdn.jsdelivr.net/gh/publicmap/mapbox-gl-tools@master/dist/addMapControls.css' rel='stylesheet'>
  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <style>

  body, input, textarea {
    line-height: 20px;
  }

  .mapboxgl-ctrl-geocoder .geocoder-icon-search {
    left: 5px;
  }

  .py6 {
    margin-left: 6px;
  }

  .viewport-twothirds {
    height: 60vh !important;
    overflow: auto;
  }

  @media screen and (min-width: 800px) {
    .viewport-full-ml {
      height: 100vh!important;
    }
  }

  </style>
</head>


<body>
  <!-- Class names are from assembly.js for styling -->
  <div class='viewport-full relative clip'>
    <div class='viewport-twothirds viewport-full-ml relative'>
      <div id='map' class='absolute top left right bottom'></div>
    </div>

    <div class='absolute top-ml left z1 w-full w360-ml py12-ml px12-ml'>
      <div class='viewport-third h-auto-ml hmax-full bg-white round-ml shadow-darken5 scroll-auto'>
        <div class='py12 px12 scroll-auto'>
          <h2 class='txt-l txt-bold mx6'>Election Map of India</h2>
          <!-- <div class='select-container hide'>
            <select id='select-map' class='select'>
              <option value='constituencies'>Electoral Constituencies</option>
              <option value='election'>Election date 2019</option>
            </select>
            <div class='select-arrow'></div>
          </div> -->
          <div id='infoPanel' class='py6'>
            <p>Click location to view constituency details</p></div>
          <p class='mx6 txt-xs'><a class='link' href="https://github.com/publicmap/electionmap/">
            <svg style='display:inline-block; vertical-align: middle;' class='icon'><use xlink:href='#icon-github'/></svg>
            <span>Source code</span></a> | <a class='link' href="https://github.com/publicmap/electionmap/issues">Submit feedback</a></p>
        </div>


      </div>
    </div>

    <!-- App script -->
    <script src='/js/dist/index.js'></script>

    <!-- Analytics tracking -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-67847650-3"></script>
    <script>
      window.dataLayer = window.dataLayer || [];

      function gtag() {
        dataLayer.push(arguments);
      }
      gtag('js', new Date());

      gtag('config', 'UA-67847650-3');
    </script>

  </body>

  </html>