map-xy/index.html at master · cmslewis/map-xy · 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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <!-- Basic Information -->
  <title>Map XY · by Chris Lewis</title>
  <meta name="viewport"    content="width=device-width, initial-scale=1">
  <meta name="author"      content="Chris Lewis">
  <meta name="description" content="A little app for exploring relative sizes between cities, countries, and places in general. Finally, you can see exactly how big SF is relative to Manhattan, or how big your hometown is relative to India (spoiler: India is bigger). Created by Chris Lewis because he was always wondering.">

  <!-- Facebook Sharing -->
  <meta property="fb:app_id"      content="898410613515960"/>
  <meta property="fb:admins"      content="cmslewis"/>
  <meta property="og:image"       content="http://cmslewis.github.io/map-xy/static/img/map-xy.jpg"/>
  <meta property="og:title"       content="Map XY" />
  <meta property="og:site_name"   content="Chris Lewis" />
  <meta property="og:url"         content="http://cmslewis.github.io/map-xy/" />
  <meta property="og:type"        content="website" />
  <meta property="og:description" content="A little app for exploring relative sizes between cities, countries, and places in general. Finally, you can see exactly how big SF is relative to Manhattan, or how big your hometown is relative to India (spoiler: India is bigger). Created by Chris Lewis because he was always wondering." />

  <!-- Stylesheets -->
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato:300,400,700" >
  <link rel="stylesheet" type="text/css" href="static/css/base.css">
  <link rel="stylesheet" type="text/css" href="static/css/style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

  <!-- Favicon -->
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>


  <!-- Facebook SDK -->
  <!-- ============ -->

  <script>
    window.fbAsyncInit = function() {
      FB.init({
        appId      : '898410613515960',
        xfbml      : true,
        version    : 'v2.1'
      });
    };

    (function(d, s, id){
       var js, fjs = d.getElementsByTagName(s)[0];
       if (d.getElementById(id)) {return;}
       js = d.createElement(s); js.id = id;
       js.src = "//connect.facebook.net/en_US/sdk.js";
       fjs.parentNode.insertBefore(js, fjs);
     }(document, 'script', 'facebook-jssdk'));
  </script>


  <!-- Page Content -->
  <!-- ============ -->

  <div class="header primary">
    <div class="logo" title="Explore each map independently. The zoom level will stay consistent between the two.">Map XY</div>
    <div class="title">How big is <span class="js-title-trigger-x">Location X</span> compared to <span class="js-title-trigger-y">Location Y</span> on a map?</div>
  </div>
  <div class="panels">
    <div class="panel left">
      <div class="header secondary">
        <div class="search">
          <label>Location X:</label>
          <div class="input">
            <input type="text" tabindex="1" class="js-autocomplete-x" placeholder="Enter a location (e.g. San Francisco)...">
            <div class="recenter-button js-recenter-trigger-x">
              <span class="fa fa-location-arrow"></span>
            </div>
          </div>
        </div>
      </div>
      <div class="map js-map-x"></div>
    </div>
    <div class="panel right">
      <div class="header secondary">
        <div class="search">
          <label>Location Y:</label>
          <div class="input">
            <input type="text" tabindex="2" class="js-autocomplete-y" placeholder="Enter another location (e.g. Manhattan)...">
            <div class="recenter-button js-recenter-trigger-y">
              <span class="fa fa-location-arrow"></span>
            </div>
          </div>
        </div>
      </div>
      <div class="map js-map-y"></div>
    </div>
  </div>
  <div class="footer">
    <div class="footer-buttons">
      <div class="footer-button js-switch-maps-trigger">
        <div class="footer-button-content">
          <span class="footer-button-icon fa fa-arrows-h"></span>
          <span class="footer-button-label">Switch Maps</span>
        </div>
      </div>
      <div class="footer-button js-stacked-mode-trigger">
        <div class="footer-button-content show-by-default">
          <span class="footer-button-icon fa fa-copy"></span>
          <span class="footer-button-label">Stack Maps</span>
        </div>
        <div class="footer-button-content show-when-impressed">
          <span class="footer-button-icon fa fa-columns"></span>
          <span class="footer-button-label">Unstack Maps</span>
        </div>
      </div>
    </div>
    <span class="bottom-text">
      <div
        class="fb-like"
        data-layout="button_count"
        data-action="like"
        data-show-faces="false"
        data-share="false">
      </div>
      <span class="instructions">The scale will stay consistent between the maps as you explore!</span>
      <span class="dot-separator">·</span>
      <a class="author-link" href="https://cmslewis.github.io/">by cmslewis</a>
    </span>
  </div>


  <!-- Google Analytics -->
  <!-- ================ -->

  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-55892645-1', 'auto');
    ga('send', 'pageview');
  </script>


  <!-- Javascript -->
  <!-- ========== -->

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyB8ych-xQPqDBlKWhIcbhp5fze4PWFfZwc">
  </script>
  <script type="text/javascript" src="static/js/main.js"></script>

</body>
</html>