forked from openmaptiles/www.openmaptiles.org
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyles.html
163 lines (148 loc) · 6.27 KB
/
styles.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
---
layout: page
title: Open Map Styles
titlehtml: Open styles, map gallery, cartography
description: Free and open-source styles for your maps. Use public styles with precision cartography.
keywords: Open styles, map templates, cartography, Mapbox GL, map gallery
---
<style>
.map-style {min-height: 450px;}
.style-title h2 {
display: inline-block;
}
.style-thumb {
max-width: 300px;
}
.style-btn {
margin-left: 10px;
margin-top: 28px;
float: right;
display: inline-block;
padding: 10px;
line-height: 1.2;
height: auto;
}
.style-github-btn {
background: #cacaca;
}
.style-github-btn:hover {
background: #aeaeae;
}
</style>
<div class="container">
<div class="row">
<div class="col12 padx-0">
<p>OpenMapTiles comes with a variety of different styles optimized for the <a href="/schema">OpenMapTiles vector tile schema</a>. The styles and schema are free and open-source and you can adapt the design and code for your project or commercial product however you like, if you keep the copyright attributtion.
You can either use the styles directly as basemap or as starting point for your own map style.
</p>
</div>
<div class="col12 padx-0">
<h1>GL Styles</h1>
<p>Our map styles are written in the <a href="/docs/style/mapbox-gl-style-spec">Mapbox GL style specification</a> and you can <a href="/docs/style/maputnik">edit them using Maputnik</a>.
</p>
<p>
The same style can be used in client based maps with <a href="/docs/website/mapbox-gl-js/">Mapbox GL JS</a> or <a href="/docs/website/openlayers/">OpenLayers</a>, on native <a href="/mobile/">Android/iOS mobile apps</a> as well as in raster maps for print and older clients like Leaflet thanks to <a href="/docs/host/tileserver-gl">Tileserver GL</a>.
</p>
</div>
</div>
<div class="row">
<div class="col3 pady-2 padx-0">
<h4><a href="#maptiler-basic">MapTiler Basic</a></h4>
<h4><a href="#osm-bright">OSM Bright</a></h4>
<h4><a href="#positron">Positron</a></h4>
<h4><a href="#dark-matter">Dark Matter</a></h4>
<h4><a href="#maptiler-3d">MapTiler 3D</a></h4>
<h4><a href="#maptiler-terrain">MapTiler Terrain</a></h4>
<h4><a href="#fiord-color">Fiord Color</a></h4>
<h4><a href="#toner">Toner</a></h4>
<h4><a href="#osm-liberty">OSM Liberty</a></h4>
</div>
<div class="col9 pady-2">
{% for style in site.data.styles %}
<div class="style-title clearfix">
<h2 id="{{ style.id }}">
<span>{{ style.title }}</span>
</h2>
{% if style.url-cloud %}
<a class="btn style-btn" href="{{ style.url-cloud }}">View in Cloud</a>
{% endif %}
<a class="btn style-btn style-github-btn" target="_blank"
href="{{ style.url-github }}">Code on GitHub</a>
</div>
<p>
{{ style.description }}
</p>
<img class="width-100" src="/img/styles/{{ style.img }}" alt="{{ style.title }} map style">
{% endfor %}
</div>
</div>
<div class="row">
<div class="col12 padx-0">
<h1>CartoCSS Styles</h1>
<p>OpenMapTiles vector tiles can be styled also with CartoCSS and rendered with Mapnik. You can edit these styles in Mapbox Studio Classic desktop application and use <a href="https://github.com/klokantech/tileserver-mapnik">TileServer-Mapnik</a> to generate raster tiles from vector tiles and the TM2 style.
</p>
</div>
</div>
<div class="row">
<div class="col3 pady-2 padx-0">
<h4><a href="#pencil">Pencil</a></h4>
<h4><a href="#dark">Dark</a></h4>
<h4><a href="#light">Light</a></h4>
<h4><a href="#pirates">Pirates</a></h4>
<h4><a href="#woodcut">Woodcut</a></h4>
<h4><a href="#wheatpaste">Wheatpaste</a></h4>
<h4><a href="#osm-bright-tm2">OSM Bright TM2</a></h4>
</div>
<div class="col9 pady-2">
<div class="style-title clearfix">
<h2 id="pencil">
<span>Pencil</span>
</h2>
<a class="btn style-btn style-github-btn" href="https://github.com/openmaptiles/mapbox-studio-pencil.tm2">View on GitHub</a>
</div>
<img class="style-thumb" src="/img/styles/css-pencil.png" alt="pencil map style">
<div class="style-title clearfix">
<h2 id="dark">
<span>Dark</span>
</h2>
<a class="btn style-btn style-github-btn" href="https://github.com/openmaptiles/mapbox-studio-dark.tm2">View on GitHub</a>
</div>
<img class="style-thumb" src="/img/styles/css-dark.png" alt="dark map style">
<div class="style-title clearfix">
<h2 id="light">
<span>Light</span>
</h2>
<a class="btn style-btn style-github-btn" href="https://github.com/openmaptiles/mapbox-studio-light.tm2">View on GitHub</a>
</div>
<img class="style-thumb" src="/img/styles/css-light.png" alt="light map style">
<div class="style-title clearfix">
<h2 id="pirates">
<span>Pirates</span>
</h2>
<a class="btn style-btn style-github-btn" href="https://github.com/openmaptiles/mapbox-studio-pirates.tm2">View on GitHub</a>
</div>
<img class="style-thumb" src="/img/styles/css-pirates.png" alt="pirates map style">
<div class="style-title clearfix">
<h2 id="woodcut">
<span>Woodcut</span>
</h2>
<a class="btn style-btn style-github-btn" href="https://github.com/openmaptiles/mapbox-studio-woodcut.tm2">View on GitHub</a>
</div>
<img class="style-thumb" src="/img/styles/css-woodcut.png" alt="woodcut map style">
<div class="style-title clearfix">
<h2 id="wheatpaste">
<span>Wheatpaste</span>
</h2>
<a class="btn style-btn style-github-btn" href="https://github.com/openmaptiles/mapbox-studio-wheatpaste.tm2">View on GitHub</a>
</div>
<img class="style-thumb" src="/img/styles/css-wheatpaste.png" alt="Wheatpaste map style">
<div class="style-title clearfix">
<h2 id="osm-bright-tm2">
<span>OSM Bright TM2</span>
</h2>
<a class="btn style-btn style-github-btn" href="https://github.com/openmaptiles/mapbox-studio-osm-bright.tm2">View on GitHub</a>
</div>
<img class="style-thumb" src="/img/styles/css-bright.png" alt="bright map style">
</div>
</div>
</div>