-
Notifications
You must be signed in to change notification settings - Fork 72
/
Copy pathindex.html
188 lines (140 loc) · 6.49 KB
/
index.html
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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!DOCTYPE html>
<html>
<head>
<title>smallworld.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="assets/style.css">
<link rel="stylesheet" type="text/css" href="assets/prism.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>
</head>
<body>
<header class="masthead">
<div class="bucket masthead__bucket">
<div class="masthead__logo js-logo"></div>
<div class="masthead__copy">
<h1>smallworld.js</h1>
<h2>It's a (small utility for generating a) small world.</h2>
<a href="http://github.com/mikefowler/smallworld.js" class="masthead__btn btn btn-small">View on Github</a>
</div>
</div>
</header>
<main class="content bucket">
<p><em>smallworld.js</em> is a utility for generating map overviews using GeoJSON and HTML Canvas. It was created out of a need to render simple map previews, quickly and efficiently, without strict Terms of Use and without heavy client libraries.</p>
<p>The utility has no dependencies, weighs ~5kb (sans GeoJSON), and also comes with a simple wrapper to use with jQuery or Zepto. The source is available on Github or via Bower:</p>
<pre><code class="language-bash">bower install smallworld.js</code></pre>
<!-- DEFAULT -->
<h3>Default</h3>
<p>Just pass in your GeoJSON source and you're done. By default, maps are centered at <code>[0, 0]</code>. The map will inherit its size from the DOM element you initialize it with. If you're using the same GeoJSON for all of your maps, you can also set the data source as a default.</p>
<div class="example">
<div class="example__map">
<div class="map js-basic"></div>
</div>
<div class="example__code">
<pre><code class="language-javascript">$('.map').smallworld({
geojson: data
});
// OR…
Smallworld.defaults.geojson = data;
$('.map').smallworld();
</code></pre>
</div>
</div>
<!-- CENTER & ZOOM -->
<h3>Center & Zoom</h3>
<p>Maps can be centered on any geographic coordinate, as well as zoomed. The default zoom level is set to 0.</p>
<div class="example">
<div class="example__map">
<div class="map js-centered"></div>
</div>
<div class="example__code">
<pre><code class="language-javascript">$('.map').smallworld({
zoom: 1,
center: [37.757719928168605, -122.43760000000003]
});</code></pre>
</div>
</div>
<!-- COLORS -->
<h3>Colors</h3>
<p>Maps are drawn on the fly, so changing the color of anything is easy.</p>
<div class="example">
<div class="example__map">
<div class="map js-colors"></div>
</div>
<div class="example__code">
<pre><code class="language-javascript">$('.map').smallworld({
center: [45, 0],
waterColor: '#021019',
landColor: '#08304b'
});</code></pre>
</div>
</div>
<!-- MARKERS -->
<h3>Markers</h3>
<p>You can easily drop markers on the center of the map, or anywhere else by passing in additional coordinates. Markers can also have a custom size and color.</p>
<div class="example">
<div class="example__map">
<div class="map js-marker-center"></div>
</div>
<div class="example__code">
<pre><code class="language-javascript">$('.map').smallworld({
marker: true,
markerColor: '#fa29df'
});</code></pre>
</div>
</div>
<div class="example">
<div class="example__map">
<div class="map js-marker-custom"></div>
</div>
<div class="example__code">
<pre><code class="language-javascript">$('.map').smallworld({
center: [45, 180],
marker: [37.757719928168605, -122.43760000000003],
markerSize: 8
});</code></pre>
</div>
</div>
<div class="example">
<div class="example__map">
<div class="map js-marker-multi"></div>
</div>
<div class="example__code">
<pre><code class="language-javascript">$('.map').smallworld({
center: [45, -50],
markers: [
[37.757719928168605, -122.43760000000003],
[51.528868434293145, -0.10159864999991441],
[40.705960705452846, -73.9780035]
],
markerSize: 8
});</code></pre>
</div>
</div>
<!-- STANDALONE -->
<h3>Using without jQuery/Zepto</h3>
<p>To use smallworld.js without jQuery or Zepto, initialize it with a DOM element and options.</p>
<pre><code class="language-javascript">var el = document.querySelector('.map');
var map = new Smallworld(el, options);</code></pre>
<!-- GEOJSON -->
<h3>GeoJSON & Technical Notes</h3>
<p>smallworld.js provides <a href="https://github.com/mikefowler/smallworld.js/blob/master/dist/world.json">one drop-in GeoJSON source</a>, the one used in the maps above. The GeoJSON data can be inlined or loaded asynchronously, so long as the data is passed in during initialization or set globally. The provided GeoJSON will be projected using the Mercator projection.</p>
<p>This GeoJSON is generated from <a href="http://naturalearthdata.com">Natural Earth's</a> “Small-scale data, 1:110m” data set. The shape files provided by Natural Earth are then processed by <a href="http://www.gdal.org/ogr2ogr.html">ogr2ogr</a> to convert to GeoJSON and simplify paths. You can see this conversion yourself by peeking at this <a href="https://github.com/mikefowler/smallworld.js/blob/master/gulpfile.js#L35">build task</a>. To generate your own GeoJSON with a different level of optimization, play around with the value passed in the “simplify” flag in the build task.</p>
<p>In an effort to keep file size low, the GeoJSON source provided here has been optimized for viewing at zoom levels 0 and 1. While it's theoretically possible to crank the zoom level up infinitely, at a certain point, beyond zoom level 3 or 4, this utility won't be of much use as the maps will become too abstract.</p>
</main>
<footer class="footer">A thing made by <a href="http://mikefowler.me">Mike Fowler</a></footer>
<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-10512170-10', 'mikefowler.me');
ga('send', 'pageview');
</script>
<!-- <script src="//code.jquery.com/jquery-2.0.3.js"></script> -->
<script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.1.3/zepto.min.js"></script>
<script src="dist/smallworld.js"></script>
<script src="dist/smallworld.jquery.js"></script>
<script src="assets/prism.js"></script>
<script src="assets/app.js"></script>
</body>
</html>