Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 352 lines (313 sloc) 13.077 kb
10a1096 @yhahn First sketch.
yhahn authored
1 ---
0288875 @yhahn Second pass sketch.
yhahn authored
2 layout: default
3 section: tilemill
f13d8f6 @yhahn Add install page, download click tracker.
yhahn authored
4 category: homepage
10a1096 @yhahn First sketch.
yhahn authored
5 title: TileMill
6 description: Design beautiful maps
7 permalink: /
0288875 @yhahn Second pass sketch.
yhahn authored
8 platforms:
9 - id: mac
10 name: Mac OS X
11 help: Extract this archive and drag<br />TileMill to your Applications folder.
582c44d Update pages for 0.9.0.
Will White authored
12 file: TileMill-0.9.0.zip
13 size: 62.3 MB
14 url: http://github.com/downloads/mapbox/tilemill/TileMill-0.9.0.zip
f13d8f6 @yhahn Add install page, download click tracker.
yhahn authored
15 - id: linux
16 name: Ubuntu Linux
17 help: Run <code>sudo ./install-tilemill.sh</code><br/>to install packages.
fb137dc Terminal-free ubuntu installation.
Will White authored
18 help: Extract this archive and double-click<br/>on <code>install-tilemill.sh</code>.
19 file: install-tilemill.tar.gz
f13d8f6 @yhahn Add install page, download click tracker.
yhahn authored
20 size: 30 MB
fb137dc Terminal-free ubuntu installation.
Will White authored
21 url: https://github.com/downloads/mapbox/tilemill/install-tilemill.tar.gz
0288875 @yhahn Second pass sketch.
yhahn authored
22 - id: windows
23 name: Windows
c204dea Windows install instructions.
Will White authored
24 help: Double-click this installer to set up<br/> TileMill on your computer.
582c44d Update pages for 0.9.0.
Will White authored
25 file: TileMill-0.9.0-Setup.exe
26 size: 90.7 MB
27 url: http://github.com/downloads/mapbox/tilemill/TileMill-0.9.0-Setup.exe
10a1096 @yhahn First sketch.
yhahn authored
28 ---
d25a6ff @yhahn Further site buildout.
yhahn authored
29 <style>
30 .wrapper { background:#e0f0f4; }
d542299 @yhahn Replace placeholder images.
yhahn authored
31 .content hr { background-color:#c0d8e0; }
d25a6ff @yhahn Further site buildout.
yhahn authored
32 .content .box {
33 position:relative;
34 background-color:#fff;
35 padding:20px;
36 margin:0px 0px 20px;
37 border-radius:5px;
38 -moz-border-radius:5px;
39 -webkit-border-radius:5px;
40 }
41 .content .box.short { min-height:160px; }
42 .content .box.tall { min-height:300px; }
0288875 @yhahn Second pass sketch.
yhahn authored
43
d25a6ff @yhahn Further site buildout.
yhahn authored
44 .box .more {
45 position:absolute;
46 right:10px;
47 bottom:10px;
48 }
49
6dbf41d @yhahn IE debugging
yhahn authored
50 #bleed,
69af9a1 @yhahn Prep pages for screenshot switching.
yhahn authored
51 #bleed .screenshot,
6dbf41d @yhahn IE debugging
yhahn authored
52 #bleed .limiter {
d25a6ff @yhahn Further site buildout.
yhahn authored
53 height:560px;
69af9a1 @yhahn Prep pages for screenshot switching.
yhahn authored
54 position:relative;
d25a6ff @yhahn Further site buildout.
yhahn authored
55 overflow:hidden;
6dbf41d @yhahn IE debugging
yhahn authored
56 }
57
58 #bleed {
69af9a1 @yhahn Prep pages for screenshot switching.
yhahn authored
59 background:#040812;
d25a6ff @yhahn Further site buildout.
yhahn authored
60 margin:0px 0px 40px;
61 }
62
69af9a1 @yhahn Prep pages for screenshot switching.
yhahn authored
63 #bleed .screenshot {
64 background:url({{site.baseurl}}/assets/pages/screenshot.jpg) 50% 100% no-repeat;
65 position:absolute;
66 top:0px;
67 left:0px;
68 right:0px;
69 bottom:0px;
70 opacity:0;
71 transition:all 500ms;
72 -moz-transition:all 500ms;
73 -webkit-transition:all 500ms;
74 }
75
76 #bleed.mac .screenshot.mac,
77 #bleed.linux .screenshot.linux,
78 #bleed.windows .screenshot.windows {
79 z-index:100;
80 opacity:1;
81 }
82
83 #bleed .screenshot.mac { background-image:url({{site.baseurl}}/assets/pages/screenshot-mac.jpg); }
84 #bleed .screenshot.linux { background-image:url({{site.baseurl}}/assets/pages/screenshot-linux.jpg); }
85 #bleed .screenshot.windows { background-image:url({{site.baseurl}}/assets/pages/screenshot-windows.jpg); }
86
d25a6ff @yhahn Further site buildout.
yhahn authored
87 #bleed .dlbox {
88 width:400px;
89 padding:20px;
90 background:#222;
91 background:rgba(32,32,32,0.95);
92 color:#fff;
93 margin:0px;
94 position:absolute;
95 right:0px;
69af9a1 @yhahn Prep pages for screenshot switching.
yhahn authored
96 bottom:0px;
d25a6ff @yhahn Further site buildout.
yhahn authored
97 box-shadow:#000 0px 0px 10px;
98 border-radius:5px 5px 0px 0px;
99 -moz-border-radius:5px 5px 0px 0px;
100 -webkit-border-radius:5px 5px 0px 0px;
d7fef05 @yhahn Finish replacing shots.
yhahn authored
101 transition:bottom 500ms;
102 -moz-transition:bottom 500ms;
103 -webkit-transition:bottom 500ms;
d25a6ff @yhahn Further site buildout.
yhahn authored
104 }
105
106 #bleed .actions {
107 position:relative;
108 background:#6c4;
109 margin:20px -30px;
110 padding:10px 20px;
111 border-radius:0px 0px 5px 5px;
112 }
113
114 #bleed .actions .triangle {
115 position:absolute;
116 top:-10px;
117 display:block;
118 width:0px;
119 height:0px;
120 border-top:10px solid transparent;
121 }
122
123 #bleed .actions .nw { left:0px; border-right:10px solid #4a2; }
124 #bleed .actions .ne { right:0px; border-left:10px solid #4a2; }
125
126 #bleed .actions small.label {
127 color:#fff;
128 padding:5px 0px;
129 }
130
131 .oslist,
132 .oslist a { margin:0px 5px; }
d542299 @yhahn Replace placeholder images.
yhahn authored
133
134 .img100x120 {
135 display:block;
136 width:100px;
137 height:120px;
138 margin:0px 0px 20px;
6579c5e @yhahn Use jpg for tilemill sprite.
yhahn authored
139 background:url({{site.baseurl}}/assets/pages/tilemill.jpg) 100px 120px no-repeat;
d542299 @yhahn Replace placeholder images.
yhahn authored
140 }
141
142 .img160x100 {
143 display:block;
144 width:160px;
145 height:100px;
146 margin:0px 0px 20px;
6579c5e @yhahn Use jpg for tilemill sprite.
yhahn authored
147 background:url({{site.baseurl}}/assets/pages/tilemill.jpg) 160px 100px no-repeat;
d542299 @yhahn Replace placeholder images.
yhahn authored
148 }
149
150 .img400x160 {
151 display:block;
152 width:400px;
153 height:160px;
154 margin:0px 0px 20px;
6579c5e @yhahn Use jpg for tilemill sprite.
yhahn authored
155 background:url({{site.baseurl}}/assets/pages/tilemill.jpg) 400px 160px no-repeat;
d542299 @yhahn Replace placeholder images.
yhahn authored
156 }
157
158 .img0 { background-position:0px 0px; }
159 .img1 { background-position:-170px 0px; }
160 .img2 { background-position:-340px 0px; }
161 .img3 { background-position:-510px 0px; }
162 .img4 { background-position:0px -110px; }
163 .img5 { background-position:-170px -110px; }
164 .img6 { background-position:-340px -110px; }
165 .img7 { background-position:-510px -110px; }
166 .img8 { background-position:0px -220px; }
167 .img9 { background-position:0px -390px; }
168 .imga { background-position:-460px -220px; }
169 .imgb { background-position:-570px -220px; }
170
171 .img100x120.right { float:right; margin-left:20px; }
172
f2b395c Adjust mail tilemill page for Windows.
Will White authored
173 .actions .icon.newsletter {
174 background: url({{site.baseurl}}/assets/pages/followup.png) 0px 8px no-repeat;
175 }
176
d25a6ff @yhahn Further site buildout.
yhahn authored
177 </style>
178
69af9a1 @yhahn Prep pages for screenshot switching.
yhahn authored
179 <div id='bleed' class='mac'>
0288875 @yhahn Second pass sketch.
yhahn authored
180 {% for item in page.platforms %}
69af9a1 @yhahn Prep pages for screenshot switching.
yhahn authored
181 <div class='screenshot {{item.id}}'><div class='limiter'><div class='dlbox'>
f2b395c Adjust mail tilemill page for Windows.
Will White authored
182 <h1>Download TileMill</h1>
183 <h2>for {{item.name}}
184 <small class='inline oslist'>
185 Wrong OS?
186 {% for other in page.platforms %}{% unless other.id == item.id %}
187 <a href='#{{other.id}}'>{{other.id|capitalize}}</a>
188 {% endunless%}{% endfor %}
189 </small>
190 </h2>
191 <div class='actions'>
192 <span class='triangle ne'></span>
193 <span class='triangle nw'></span>
194 <small class='label'>{{item.help}}</small>
195 <a class='em' href='{{item.url}}' title='{{item.name}}'>
196 <span class='icon download'></span> {{item.file}} <small>{{item.size}}</small>
197 </a>
198 </div>
0288875 @yhahn Second pass sketch.
yhahn authored
199 <small class='centered'>
f13d8f6 @yhahn Add install page, download click tracker.
yhahn authored
200 <a href='{{site.baseurl}}/docs/install/'>Installing</a> |
0288875 @yhahn Second pass sketch.
yhahn authored
201 <a href='{{site.baseurl}}/docs/upgrade/'>Upgrade notes</a> |
f13d8f6 @yhahn Add install page, download click tracker.
yhahn authored
202 <a href='{{site.baseurl}}/docs/changelog/'>Changelog</a> |
0288875 @yhahn Second pass sketch.
yhahn authored
203 <a href='{{site.baseurl}}/docs/manual/'>Manual</a> |
204 <a href='http://support.mapbox.com/discussions/tilemill'>Support</a>
205 </small>
69af9a1 @yhahn Prep pages for screenshot switching.
yhahn authored
206 </div></div></div>
0288875 @yhahn Second pass sketch.
yhahn authored
207 {% endfor %}
69af9a1 @yhahn Prep pages for screenshot switching.
yhahn authored
208 </div>
0288875 @yhahn Second pass sketch.
yhahn authored
209
210 <div class='limiter clip'><div class='content prose'>
211
212 <div class='clearfix'>
213 <p><big class='col-4'>
214 TileMill is an application for making beautiful maps. Whether you're a journalist, web designer, researcher, or seasoned cartographer, TileMill is the design studio you need to create compelling, interactive maps.
215 </big></p>
216
d542299 @yhahn Replace placeholder images.
yhahn authored
217 <div class='col-2'><div class='box short'>
86afaf3 @yhahn Flip images.
yhahn authored
218 <span class='img100x120 right imgb'></span>
0288875 @yhahn Second pass sketch.
yhahn authored
219 <h3>Powered by Open Source</h3>
220 <p>TileMill is built on a suite of modern open source libraries including <a href='http://mapnik.org'>Mapnik</a>, <a href='http://nodejs.org'>node.js</a>, <a href='http://documentcloud.github.com/backbone'>backbone.js</a>, <a href='http://expressjs.com'>express</a> and <a href='http://codemirror.net'>CodeMirror</a>. Jump on <a href='http://github.com'>GitHub</a> where you can dig into the source code.</p>
221 <small class='more'><a href='http://github.com/mapbox/tilemill'>Fork me on GitHub &rarr;</a></small>
222 </div></div>
223
d542299 @yhahn Replace placeholder images.
yhahn authored
224 <div class='col-2'><div class='box short'>
86afaf3 @yhahn Flip images.
yhahn authored
225 <span class='img100x120 right imga'></span>
0288875 @yhahn Second pass sketch.
yhahn authored
226 <h3>Mobile ready</h3>
227 <p>Every map you make in TileMill is mobile ready. By leveraging the portable, fast <a href='{{site.url}}/mbtiles-spec/'>MBTiles</a> format, each TileMill map looks and works great on the web and offline.</p>
228 <small class='more'><a href='{{site.url}}/ipad/'>MapBox for iPad &rarr;</a></small>
229 </div></div>
230 </div>
231
232 <hr/>
233
234 <div class='clearfix'>
235 <p class='col-4'><big>
d25a6ff @yhahn Further site buildout.
yhahn authored
236 Working with GIS data isn't easy. That's why TileMill automates as much as possible for you &mdash; sharing data between projects, downloading and unzipping shapefiles, autodetecting projections, indexing SQLite databases &mdash; so that you can focus on making beautiful maps.
0288875 @yhahn Second pass sketch.
yhahn authored
237 </big></p>
238 <div class='col-1'><div class='box tall'>
d542299 @yhahn Replace placeholder images.
yhahn authored
239 <span class='img160x100 img0'></span>
0288875 @yhahn Second pass sketch.
yhahn authored
240 <h3>Datasources</h3>
241 <small>TileMill can read from a wide range of popular file formats and databases: ESRI Shapefile, KML, GeoJSON, GeoTIFF, PostGIS, and SQLite.</small>
d7fef05 @yhahn Finish replacing shots.
yhahn authored
242 <small class='more'><a href='{{site.baseurl}}/docs/manual/adding-layers/'>Adding layers &rarr;</a></small>
0288875 @yhahn Second pass sketch.
yhahn authored
243 </div></div>
244 <div class='col-1'><div class='box tall'>
d542299 @yhahn Replace placeholder images.
yhahn authored
245 <span class='img160x100 img1'></span>
0288875 @yhahn Second pass sketch.
yhahn authored
246 <h3>Raster support</h3>
247 <small>Show satellite terrain data or make use of your DIY weather balloon aerial photography with TileMill's raster image support.</small>
d7fef05 @yhahn Finish replacing shots.
yhahn authored
248 <small class='more'><a href='{{site.baseurl}}/docs/tutorials/terrain-data/'>Mapping terrain data &rarr;</a></small>
0288875 @yhahn Second pass sketch.
yhahn authored
249 </div></div>
250 <div class='col-1'><div class='box tall'>
d542299 @yhahn Replace placeholder images.
yhahn authored
251 <span class='img160x100 img2'></span>
0288875 @yhahn Second pass sketch.
yhahn authored
252 <h3>Feature inspection</h3>
253 <small>With a built-in data inspector, you can see details about every lake, country, or road from your datasource.</small>
d7fef05 @yhahn Finish replacing shots.
yhahn authored
254 <small class='more'><a href='{{site.baseurl}}/docs/manual/interface-tour/'>Interface tour &rarr;</a></small>
0288875 @yhahn Second pass sketch.
yhahn authored
255 </div></div>
256 <div class='col-1'><div class='box tall'>
d542299 @yhahn Replace placeholder images.
yhahn authored
257 <span class='img160x100 img3'></span>
d7fef05 @yhahn Finish replacing shots.
yhahn authored
258 <h3>MapBox Geodata</h3>
259 <small>The built-in MapBox Geodata browser gives you access to dozens of public and open datasources of political, physical and cultural features.</small>
260 <small class='more'><a href='{{site.baseurl}}/docs/manual/mapbox-geodata/'>MapBox Geodata &rarr;</a></small>
0288875 @yhahn Second pass sketch.
yhahn authored
261 </div></div>
262 </div>
263
264 <hr/>
265
266 <div class='clearfix'>
267 <p class='col-4'><big>
268 At TileMill's core is the Mapnik rendering engine. Mapnik is a powerful, full-featured library including support for RGBA color, True Type fonts, rasters, patterns, and even SVG transforms. Leverage all of these features using the simple, elegant syntax of the Carto styling language.
269 </big></p>
270 <div class='col-1'><div class='box tall'>
d542299 @yhahn Replace placeholder images.
yhahn authored
271 <span class='img160x100 img4'></span>
0288875 @yhahn Second pass sketch.
yhahn authored
272 <h3>Patterns &amp; textures</h3>
d25a6ff @yhahn Further site buildout.
yhahn authored
273 <small>Stamp trees across parks, add paper creases to maps. With full alpha-channel support and the ability to add multiple layers and fills TileMill can create richly textured maps.</small>
0288875 @yhahn Second pass sketch.
yhahn authored
274 </div></div>
275 <div class='col-1'><div class='box tall'>
d542299 @yhahn Replace placeholder images.
yhahn authored
276 <span class='img160x100 img5'></span>
0288875 @yhahn Second pass sketch.
yhahn authored
277 <h3>Fonts</h3>
d25a6ff @yhahn Further site buildout.
yhahn authored
278 <small>Use all your TrueType, OpenType and PostScript fonts for custom map typography.</small>
0288875 @yhahn Second pass sketch.
yhahn authored
279 </div></div>
280 <div class='col-1'><div class='box tall'>
d542299 @yhahn Replace placeholder images.
yhahn authored
281 <span class='img160x100 img6'></span>
0288875 @yhahn Second pass sketch.
yhahn authored
282 <h3>SVG markers</h3>
d25a6ff @yhahn Further site buildout.
yhahn authored
283 <small>Use vector SVGs to make your markers smooth at any scale. Advanced SVG transforms give you the ability resize and transform your images right in TileMill.</small>
0288875 @yhahn Second pass sketch.
yhahn authored
284 </div></div>
285 <div class='col-1'><div class='box tall'>
d542299 @yhahn Replace placeholder images.
yhahn authored
286 <span class='img160x100 img7'></span>
0288875 @yhahn Second pass sketch.
yhahn authored
287 <h3>Carto</h3>
6dbf41d @yhahn IE debugging
yhahn authored
288 <small>Inspired by CSS, Carto gives you full control over your map design. Mixins, variables, and functions are at your fingertips in the code editor.</small>
0288875 @yhahn Second pass sketch.
yhahn authored
289 </div></div>
290 </div>
291
292 <hr/>
293
294 <div class='clearfix'>
295
296 <p class='col-4'><big>
297 Enrich your maps with hover tooltips and clickable pop ups. Reveal details in your data by embedding numbers, graphs, and images into your map. TileMill leverages UTF-8 grid technology allowing you to leverage interactivity for hundreds of thousands of data points while maintaining high performance.
298 </big></p>
299
300 <div class='col-2'><div class='box tall'>
d542299 @yhahn Replace placeholder images.
yhahn authored
301 <span class='img400x160 img8'></span>
0288875 @yhahn Second pass sketch.
yhahn authored
302 <h3>UTF-8 grid technology</h3>
303 <small>TileMill leverages the UTF-8 grid standard for describing interactive data for tile images. UTF-8 grid is fast, flexible, and scalable making it perfect for mapping whole countries down to to individual city blocks.</small>
304 <small class='more'><a href='{{site.url}}/mbtiles-spec/utfgrid/'>Learn about UTF-8 grids &rarr;</a></small>
305 </div></div>
306
307 <div class='col-2'><div class='box tall'>
d542299 @yhahn Replace placeholder images.
yhahn authored
308 <span class='img400x160 img9'></span>
0288875 @yhahn Second pass sketch.
yhahn authored
309 <h3>Embed graphs &amp; images</h3>
310 <small>Leverage custom interaction formatters and templates to insert graphs, images, links, and other content into your maps. Interactive content can cover the full spectrum of HTML and CSS.</small>
d542299 @yhahn Replace placeholder images.
yhahn authored
311 <small class='more'><a href='{{site.baseurl}}/docs/tutorials/google-charts/'>How to embed charts in TileMill &rarr;</a></small>
0288875 @yhahn Second pass sketch.
yhahn authored
312 </div></div>
313
314 </div>
315
316 <hr/>
317
318 <div class='clearfix'>
319 <div class='col-2'>
320 <h3>I have never made a map...</h3>
d25a6ff @yhahn Further site buildout.
yhahn authored
321 <p>If you have ever written one line of CSS, you'll be right at home with TileMill's map styling language Carto. TileMill comes with well-documented examples that illustrate the basics of layer management, feature styling, and interaction. A <a href='{{site.baseurl}}/docs/manual/'>step-by-step manual</a> can teach you everything you need to know about geodata, projections, and symbolizers.</p>
0288875 @yhahn Second pass sketch.
yhahn authored
322 </div>
e0af162 @dhcole Remove Is there a Windows version section
dhcole authored
323 <div class='col-2'>
d542299 @yhahn Replace placeholder images.
yhahn authored
324 <h3>Have more questions?</h3>
325 <p>Feel free to <a href='{{site.url}}/contact/index.html'>contact us</a> with any questions regarding TileMill or map design in general.</p>
0288875 @yhahn Second pass sketch.
yhahn authored
326 </div>
327 </div>
328
329 </div></div>
330
331 <script type='text/javascript'>
332 document.getElementById('bleed').className = (function() {
6dbf41d @yhahn IE debugging
yhahn authored
333 if (navigator.appVersion.indexOf('Win') != -1) return 'windows';
0288875 @yhahn Second pass sketch.
yhahn authored
334 if (navigator.appVersion.indexOf('Mac') != -1) return 'mac';
335 if (navigator.appVersion.indexOf('X11') != -1 || navigator.appVersion.indexOf('Linux') != -1) return 'linux';
336 return 'mac'; // default to Mac.
337 })();
338 $(function() {
339 $('.oslist a').click(function() {
340 document.getElementById('bleed').className = $(this).attr('href').split('#').pop();
341 return false;
342 });
f13d8f6 @yhahn Add install page, download click tracker.
yhahn authored
343 $('.dlbox .actions a').click(function(ev) {
344 _gaq.push([
345 '_trackEvent',
346 'TileMill Download',
347 $(ev.currentTarget).attr('title')
348 ]);
349 });
0288875 @yhahn Second pass sketch.
yhahn authored
350 });
351 </script>
Something went wrong with that request. Please try again.