forked from lukasmartinelli/naturalearthtiles
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
143 lines (141 loc) · 9.71 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
---
id: home
layout: default
title: Natural Earth Vector and Raster Tiles
published: true
---
<div class="row bg-gray-light banner">
<div class="col12">
<div class="container container-branding center padt-5 padb-6">
<p class="big readable">
<a href="http://www.naturalearthdata.com/">Natural Earth</a> is one of the best public domain data sets and now you can instantly use it for your mapping projects by using the prerendered vector or raster tiles.
</p>
<p class="big readable">
Check out the <a href="https://github.com/lukasmartinelli/naturalearthtiles">GitHub repository</a> for usage guides and more information.
</p>
</div>
</div>
</div>
<div class="row">
<div class="container">
<h1 class="center padb-3">Vector Tiles</h1>
<p>The Natural Earth Vector Tiles support the <a href="https://github.com/mapbox/vector-tile-spec">Mapbox Vector Tile Spec</a> and consist of carefully curated layers from the cultural and physical vector data from Natural Earth.
Style the tiles with <a href="http://osm2vectortiles.org/docs/create-map-with-mapbox-studio">Mapbox Studio</a> and display them with <a href="http://osm2vectortiles.org/docs/getting-started">Mapbox GL JS</a>.
</p>
<div class="col12" style="padding-left:0px;padding-right:0px;">
<iframe src="/maps/natural_earth.vector.html" frameborder="0" class="col12 map-container" style="height:450px; margin-left:-15px;margin-right:-15px; padding:0px;"></iframe>
</div>
<div id="planet-list">
<div class="col12 download-item">
<div class="col4 download-title" onclick="location.href='https://github.com/lukasmartinelli/naturalearthtiles/releases/download/v1.0/natural_earth.vector.mbtiles'">
Natural Earth
</div>
<div class="col2" onclick="location.href='https://github.com/lukasmartinelli/naturalearthtiles/releases/download/v1.0/natural_earth.vector.mbtiles'">
20 MB
</div>
<div class="col6 clipboard">
<input id="natural_earth_vector" class="clipboard-input" value="https://github.com/lukasmartinelli/naturalearthtiles/releases/download/v1.0/natural_earth.vector.mbtiles">
<button class="clipboard-button hint--bottom hint--rounded" data-clipboard-target="#natural_earth_vector" onclick="setHint(this, 'Copied!')" onmouseout="setHint(this, 'Copy to clipboard')">
<img src="/img/clipboard-black.svg" class="clipboard-img" alt="Copy to clipboard">
</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="container">
<h1 class="center padb-3 padt-3">Raster Tiles</h1>
<p>The different Raster tile sets are traditional <a href="https://developers.google.com/speed/webp/">WebP</a> raster tiles made from the <a href="http://www.naturalearthdata.com/downloads/10m-raster-data/">Natural Earth Raster TIF files</a>. You can mix and match them with the vector tiles or use them in other web clients.
</p>
<div class="col12" style="padding-left:0px;padding-right:0px;">
<iframe src="/maps/natural_earth.raster.html" frameborder="0" class="col12 map-container" style="height:450px; margin-left:-15px;margin-right:-15px; padding:0px;"></iframe>
</div>
<div>
<div class="col12 download-item">
<div class="col4 download-title" onclick="location.href='https://github.com/lukasmartinelli/naturalearthtiles/releases/download/v1.0/natural_earth_2.raster.mbtiles'">
Natural Earth II
</div>
<div class="col2" onclick="location.href='https://github.com/lukasmartinelli/naturalearthtiles/releases/download/v1.0/natural_earth_2.raster.mbtiles'">
12 MB
</div>
<div class="col6 clipboard">
<input id="natural_earth_2_raster" class="clipboard-input" value="https://github.com/lukasmartinelli/naturalearthtiles/releases/download/v1.0/natural_earth_2.raster.mbtiles">
<button class="clipboard-button hint--bottom hint--rounded" data-clipboard-target="#natural_earth_2_raster" onclick="setHint(this, 'Copied!')" onmouseout="setHint(this, 'Copy to clipboard')">
<img src="/img/clipboard-black.svg" class="clipboard-img" alt="Copy to clipboard">
</button>
</div>
</div>
<div class="col12 download-item">
<div class="col4 download-title" onclick="location.href='https://github.com/lukasmartinelli/naturalearthtiles/releases/download/v1.0/natural_earth_2_shaded_relief.raster.mbtiles'">
Natural Earth II with Shaded Relief
</div>
<div class="col2" onclick="location.href='https://github.com/lukasmartinelli/naturalearthtiles/releases/download/v1.0/natural_earth_2_shaded_relief.raster.mbtiles'">
19 MB
</div>
<div class="col6 clipboard">
<input id="natural_earth_2_shaded_relief_raster" class="clipboard-input" value="https://github.com/lukasmartinelli/naturalearthtiles/releases/download/v1.0/natural_earth_2_shaded_relief.raster.mbtiles">
<button class="clipboard-button hint--bottom hint--rounded" data-hint="Copy to clipboard" data-clipboard-target="#natural_earth_2_shaded_relief_raster" onclick="setHint(this, 'Copied!')" onmouseout="setHint(this, 'Copy to clipboard')">
<img src="/img/clipboard-black.svg" class="clipboard-img" alt="Copy to clipboard">
</button>
</div>
</div>
<div class="col12 download-item">
<div class="col4 download-title" onclick="location.href='https://github.com/lukasmartinelli/naturalearthtiles/releases/download/v1.0/natural_earth_cross_blended_hypso.raster.mbtiles'">
Cross-blended Hypsometric Tints
</div>
<div class="col2" onclick="location.href='https://github.com/lukasmartinelli/naturalearthtiles/releases/download/v1.0/natural_earth_cross_blended_hypso.raster.mbtiles'">
8 MB
</div>
<div class="col6 clipboard">
<input id="natural_earth_cross_blended_hypso_raster" class="clipboard-input" value="https://github.com/lukasmartinelli/naturalearthtiles/releases/download/v1.0/natural_earth_cross_blended_hypso.raster.mbtiles">
<button class="clipboard-button hint--bottom hint--rounded" data-hint="Copy to clipboard" data-clipboard-target="#natural_earth_cross_blended_hypso_raster" onclick="setHint(this, 'Copied!')" onmouseout="setHint(this, 'Copy to clipboard')">
<img src="/img/clipboard-black.svg" class="clipboard-img" alt="Copy to clipboard">
</button>
</div>
</div>
<div class="col12 download-item">
<div class="col4 download-title" onclick="location.href='https://github.com/lukasmartinelli/naturalearthtiles/releases/download/v1.0/natural_earth_cross_blended_hypso_shaded_relief.raster.mbtiles'">
Cross-blended Hypsometric Tints with Shaded Relief
</div>
<div class="col2" onclick="location.href='https://github.com/lukasmartinelli/naturalearthtiles/releases/download/v1.0/natural_earth_cross_blended_hypso_shaded_relief.raster.mbtiles'">
20MB
</div>
<div class="col6 clipboard">
<input id="natural_earth_cross_blended_hypso_relief_raster" class="clipboard-input" value="https://github.com/lukasmartinelli/naturalearthtiles/releases/download/v1.0/natural_earth_cross_blended_hypso_shaded_relief.raster.mbtiles">
<button class="clipboard-button hint--bottom hint--rounded" data-hint="Copy to clipboard" data-clipboard-target="#natural_earth_cross_blended_hypso_relief_raster" onclick="setHint(this, 'Copied!')" onmouseout="setHint(this, 'Copy to clipboard')">
<img src="/img/clipboard-black.svg" class="clipboard-img" alt="Copy to clipboard">
</button>
</div>
</div>
<div class="col12 download-item">
<div class="col4 download-title" onclick="location.href='https://github.com/lukasmartinelli/naturalearthtiles/releases/download/v1.0/natural_earth_gray_earth_hypso_shaded_relief.raster.mbtiles'">
Gray Earth with Shaded Relief and Hypsography
</div>
<div class="col2" onclick="location.href='https://github.com/lukasmartinelli/naturalearthtiles/releases/download/v1.0/natural_earth_gray_earth_hypso_shaded_relief.raster.mbtiles'">
16 MB
</div>
<div class="col6 clipboard">
<input id="natural_earth_gray_earth_hypso_shaded_relief_raster" class="clipboard-input" value="https://github.com/lukasmartinelli/naturalearthtiles/releases/download/v1.0/natural_earth_gray_earth_hypso_shaded_relief.raster.mbtiles">
<button class="clipboard-button hint--bottom hint--rounded" data-hint="Copy to clipboard" data-clipboard-target="#natural_earth_gray_earth_hypso_shaded_relief_raster" onclick="setHint(this, 'Copied!')" onmouseout="setHint(this, 'Copy to clipboard')">
<img src="/img/clipboard-black.svg" class="clipboard-img" alt="Copy to clipboard">
</button>
</div>
</div>
<div class="col12 download-item">
<div class="col4 download-title" onclick="location.href='https://github.com/lukasmartinelli/naturalearthtiles/releases/download/v1.0/natural_earth_shaded_relief.raster.mbtiles'">
Shaded Relief Basic
</div>
<div class="col2" onclick="location.href='https://github.com/lukasmartinelli/naturalearthtiles/releases/download/v1.0/natural_earth_shaded_relief.raster.mbtiles'">
19 MB
</div>
<div class="col6 clipboard">
<input id="natural_earth_shaded_relief_basic_raster" class="clipboard-input" value="https://github.com/lukasmartinelli/naturalearthtiles/releases/download/v1.0/natural_earth_shaded_relief.raster.mbtiles">
<button class="clipboard-button hint--bottom hint--rounded" data-hint="Copy to clipboard" data-clipboard-target="#natural_earth_shaded_relief_basic_raster" onclick="setHint(this, 'Copied!')" onmouseout="setHint(this, 'Copy to clipboard')">
<img src="/img/clipboard-black.svg" class="clipboard-img" alt="Copy to clipboard">
</button>
</div>
</div>
</div>
</div>
</div>