-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
156 lines (138 loc) · 10.2 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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Tile Drawer</title>
<script src="modestmaps.js" type="text/javascript" language="javascript1.5"></script>
<script src="json2.js" type="text/javascript" language="javascript1.5"></script>
<script src="index.js" type="text/javascript" language="javascript1.5"></script>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="content">
<div id="header">
<h1><img src="logo.png" alt="Tile Drawer" width="448" height="82"></h1>
</div>
<p>
Tile Drawer makes designing and hosting custom maps simple and straightforward. The project lets anyone run their own <a href="http://openstreetmap.org">OpenStreetMap</a> server in the cloud with one-step configuration and zero administration. <i style="white-space: nowrap;">Tile Drawer</i> is a product of <a href="http://stamen.com">Stamen Design’s</a> <a href="http://mike.teczno.com">Michal Migurski</a>.
</p>
<p>
You can use the rendered map tiles in a number of ways: with <a href="https://github.com/stamen/modestmaps-js">Modest Maps</a>, <a href="http://leaflet.cloudmade.com">Leaflet</a>, <a href="http://openlayers.org/">OpenLayers</a>, or layered into a Google Map as a <a href="http://code.google.com/apis/maps/documentation/overlays.html#CustomMapTiles">custom map tile overlay</a>.
</p>
<p>
<em>Update, January 2012: Tile Drawer is back after a period offline when the original Amazon AMI disappeared. I’ve re-written Tile Drawer to use a startup script approach that radically speeds up start time for city-sized areas, eliminates the dependency on EC2, and makes the internals of Tile Drawer easier to understand. Find everything on <a href="https://github.com/migurski/Tile-Drawer">Github</a>.</em>
</p>
<h2>Why & How</h2>
<p>
<a href="http://www.openstreetmap.org">OpenStreetMap</a> is a wiki-style map of the world that anyone can edit. You can get the raw data for roads around the world, set up a server, design a new map style, and have your own personal online interactive maps. In the past, this has been difficult owing to the large volume of data required and the hassles of system administration. <span style="white-space: nowrap;">Tile Drawer</span> is designed to make this process easy with <a href="http://aws.amazon.com/ec2/">Amazon EC2</a> that gets you <strong>up and running with just two pieces of information:</strong> a custom stylesheet that you choose, and the geographical location of a part of the world you'd like rendered.
</p>
<p style="text-align: center;">
<img src="drawer.png" alt="Tile Drawer" width="144" height="127">
</p>
<h2>Get Started</h2>
<p>
Follow the <strong>three steps below</strong> to select a coverage location and start your Tile Drawer.
</p>
<h3>1. Select A Location</h3>
<p>
Pan and zoom the map to the area you’d like to render.
</p>
<div class="map-box">
<div id="map"></div>
<div class="controls">
<a href="javascript:mmap.zoomIn()">+ Zoom In</a>
<a href="javascript:mmap.zoomOut()">– Zoom Out</a>
<a href="javascript:mmap.setCenterZoom(new mm.Location(0, 0), 1)">See All</a>
</div>
</div>
<h3>2. Choose Your Style</h3>
<form name="style" action="#" method="get" onsubmit="return false;">
<p>
Enter the complete URL of a Cascadenik stylesheet, a Tile Drawer description, or just click one of the styles on this page.
</p>
<p>
<input type="text" style="width: 440px;" value="https://github.com/migurski/OSM-Solar/raw/tiledrawer/tiledrawer.cfg" onchange="onChanged()" name="url">
</p>
</form>
<h3>3. Start Your Instance</h3>
<p>
This is the user data you’ll provide to your Amazon EC2 instance when you’re ready to launch it:
</p>
<p id="userdata"></p>
<p>
The data above must be <strong>copied exactly</strong> to work—all three lines, starting with the <code>#!/bin/sh</code>.
</p>
<p>
Select an <a href="https://wiki.ubuntu.com/OneiricOcelot">Ubuntu 11.10</a> AMI. Eric Hammond at <a href="http://alestic.com/">Alestic</a> has an excellent collection of Ubuntu images that I recommend; a 64-bit EBS boot running on a Large or High-CPU instance type is generally a great choice for map rendering.
</p>
<p>
If you’re in EC2 region us-east-1, try <a href="https://console.aws.amazon.com/ec2/home?region=us-east-1#launchAmi=ami-6fa27506">ami-6fa27506</a>.
</p>
<h3>Finally…</h3>
<p>
Depending on your data source and location, it can take anywhere from a few minutes for a single city to many hours for your new instance to unpack itself. You can check up on the process by visiting <code style="white-space: nowrap;">http://{address}/</code>, and when it is complete individual tiles will be available at <code style="white-space: nowrap;">http://{address}/tiles/{Z}/{X}/{Y}.png</code>, along with an interactive slippy map at <code style="white-space: nowrap;">http://{address}/tiles/preview.html</code>.
</p>
<p>
That’s it, you’re done. If you’re happy with how the map looks, then you don’t need to do anything more. As you view more of the map, the tiles will render slowly at first, and then more quickly as they are cached.
</p>
<p style="text-align: center;">
<img src="chest.png" alt="Tile Drawer" width="135" height="149">
</p>
<p>
Contact: <a href="mailto:[email protected]">[email protected]</a>
</p>
<p>
Logo & illustration by <a href="http://use-it.be/en/page/54/visit-use-it/">Nicolas Marichal, USE-IT</a>.
</p>
</div>
<div id="gallery">
<h2>Styles</h2>
<p>
I have a few ready-made map styles to choose from below—click on one to select it. I’ll be expanding this list with new ones soon, and if you have one to contribute <a href="mailto:[email protected]">let me know</a>.
</p>
<p>
<a href="#" title="Choose Solar" onclick="return chooseStyle('https://github.com/migurski/OSM-Solar/raw/tiledrawer/tiledrawer.cfg');"><img src="osm-solar.png" width="300" height="300" alt=""></a>
</p>
<h3>Solar</h3>
<p class="description">
Developed to create maximally-compressed tiles to fit onto a portable GIS / disaster response system from <a href="http://www.tethr.org/">Tethr</a> with colors sampled from Ethan Schoonover’s <a href="http://ethanschoonover.com/solarized">Solarized</a>. <a href="http://mike.teczno.com/notes/osm-solar.html">Read more about Solar</a>.
<button onclick="return chooseStyle('https://github.com/migurski/OSM-Solar/raw/tiledrawer/tiledrawer.cfg');">Choose Solar</button>
</p>
<p>
<a href="#" title="Choose Bright" onclick="return chooseStyle('https://raw.github.com/mapnik/Cascadenik/tiledrawer/openstreetmap/style.mml');"><img src="osm-style.png" width="300" height="300" alt=""></a>
</p>
<h3>Bright</h3>
<p class="description">
This is the style that originally shipped with <a href="http://code.google.com/p/mapnik-utils/wiki/Cascadenik">Cascadenik</a> in 2008. It’s largely primary colors, and has definitions for a variety of scales. Residential roads are used for texture at small scales. The road widths defined here later informed <a href="http://stamen.com/clients/cloudmade">Stamen’s design work for Cloudmade</a>. <a href="http://mike.teczno.com/notes/cascadenik-openstreetmap.html">Read more about Bright</a>.
<button onclick="return chooseStyle('https://raw.github.com/mapnik/Cascadenik/tiledrawer/openstreetmap/style.mml');">Choose Bright</button>
</p>
<p>
<a href="#" title="Choose Wintermute" onclick="return chooseStyle('https://raw.github.com/migurski/HighRoad/tiledrawer/tiledrawer.cfg');"><img src="wintermute.png" width="300" height="300" alt=""></a>
</p>
<h3>Wintermute</h3>
<p class="description">
Dark ground with light-colored water, entirely gray with motorways highlighted in bright saffron. No text. Designed for <a href="https://github.com/migurski/HighRoad/">OSM High Road</a>.
<button onclick="return chooseStyle('https://raw.github.com/migurski/HighRoad/tiledrawer/tiledrawer.cfg');">Choose Wintermute</button>
</p>
<p>
<a href="#" title="Choose Scratch" onclick="return chooseStyle('http://tiledrawer.com/mapscratch.mml');"><img src="mapscratch.png" width="300" height="300" alt=""></a>
</p>
<h3>Scratch</h3>
<p class="description">
Demonstration style produced for the <a href="http://mapsfromscratch.com/">2010 Where 2.0 Maps From Scratch workshop</a>, where Stamen colleague Shawn Allen and I showed how to generate road cartography from raw data and first principles. <i>Scratch</i> is designed to work at just a few scales.
<button onclick="return chooseStyle('http://tiledrawer.com/mapscratch.mml');">Choose Scratch</button>
</p>
<!--
<p>
<a href="#" title="Choose Toner" onclick="return chooseStyle('https://github.com/Citytracking/Toner');"><img src="toner.png" width="300" height="300" alt=""></a>
</p>
<h3>Toner</h3>
<p class="description">
Designed for <a href="http://dotspotting.org">Stamen’s Dotspotting</a>, Toner is a modernist style inspired by the look of paper photocopies and printed documents.
<button onclick="return chooseStyle('https://github.com/Citytracking/Toner');">Choose Toner</button>
</p>
-->
</div>
</body>
</html>