2018-06-24 13:22:59 +01:00
# OSM Liberty [](https://github.com/maputnik/osm-liberty/blob/gh-pages/LICENSE.md) [](https://travis-ci.org/maputnik/osm-liberty)
2018-06-03 19:39:05 +05:30
2016-08-06 23:04:17 +02:00
< img align = "right" alt = "OSM Liberty" src = "logo.png" / >
2017-01-10 15:34:43 +01:00
A free Mapbox GL basemap from [OpenStreetMap ](https://openstreetmap.org ) with complete liberty to use and self host. OSM Liberty is a fork of OSM Bright based on free data sources with a mission for a clear good looking design for the everyday user. It is based on the vector tile schema of [OpenMapTiles ](https://github.com/openmaptiles/openmaptiles ).
2016-08-06 17:35:24 +02:00
2018-06-24 13:22:59 +01:00
**[https://maputnik.github.io/osm-liberty ](https://maputnik.github.io/osm-liberty )**
2016-08-06 22:39:56 +02:00
## Usage
You can instantly use the style in your Mapbox GL maps. The vector tiles are served from the @klokantech public CDN
and the raster tiles, glyphs and sprites directly from GitHub.
Take a look at the [demo page source code ](index.html ) how to display a map.
To use it you don't need any access keys and you can host the tiles and assets yourself for complete liberty.
```html
<!DOCTYPE html>
< html >
< head >
< meta charset = utf-8 / >
< title > OSM Liberty< / title >
< meta name = 'viewport' content = 'initial-scale=1,maximum-scale=1,user-scalable=no' / >
< style >
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
< / style >
2018-02-25 10:25:53 +00:00
< script src = 'https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js' > < / script >
< link href = 'https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel = 'stylesheet' / >
2016-08-06 22:39:56 +02:00
< / head >
< body >
< div id = 'map' > < / div >
< script >
var map = new mapboxgl.Map({
container: 'map',
2018-06-24 13:22:59 +01:00
style: 'https://maputnik.github.io/osm-liberty/style.json',
2016-08-06 22:39:56 +02:00
center: [8.538961,47.372476],
zoom: 5,
hash: true
});
< / script >
< / body >
< / html >
```
2016-08-06 17:35:24 +02:00
## Data Sources
2017-01-10 18:06:08 +01:00
- [OpenMapTiles ](http://openmaptiles.org/ ) as vector data source
2016-08-06 23:07:49 +02:00
- [Natural Earth Tiles ](http://naturalearthtiles.org ) for relief shading
2016-08-06 17:35:24 +02:00
- [Maki ](https://www.mapbox.com/maki-icons/ ) as icon set
2016-08-06 17:02:17 +02:00
## Map Design
2016-08-06 22:39:56 +02:00
The map design originates from OSM Bright but strives to reach a unobtrusive and clean design for everyday use.
Colored relief shading from Natural Earth make the low zoom levels look good.
2016-08-06 17:35:24 +02:00
2018-06-24 13:22:59 +01:00
[](https://maputnik.github.io/osm-liberty/)
2016-08-08 21:13:11 +02:00
2017-01-10 15:34:43 +01:00
## Edit the Style
2016-08-06 22:39:56 +02:00
2018-06-24 13:22:59 +01:00
You can [edit the style directly online in Maputnik ](http://maputnik.com/editor?style=https://rawgit.com/maputnik/osm-liberty/gh-pages/style.json ).
2017-01-10 18:43:30 +01:00
Use the [Maputnik CLI ](http://openmaptiles.org/docs/style/maputnik/ ) to edit and develop the style locally.
2017-01-10 15:34:43 +01:00
After you've started Maputnik open the editor on `localhost:8000` . This style actually triggered the need for the development of Maputnik.
```
maputnik --watch --file style.json
```
2016-08-06 22:39:56 +02:00
2016-08-06 17:02:17 +02:00
## Icon Design
A [Maki ](https://github.com/mapbox/maki ) icon set using colors to distinguish between icon categories.
**Color Palette**
Color Name | Hex Value
-------------|----------
Blue | `#5d60be`
Light Blue | `#4898ff`
Orange | `#d97200`
Red | `#ba3827`
Brown | `#725a50`
Green | `#76a723`
**Modify Icons**
2017-01-10 18:06:08 +01:00
1. Take the `iconset.json` and upload it to the [Maki Editor ](https://www.mapbox.com/maki-icons/#editor ).
2017-01-10 17:25:07 +01:00
2. Apply your changes and download the fonts and icon set again.
2016-08-06 17:02:17 +02:00
3. Ensure you format the JSON first with `cat iconset.json | jq -MS '.'`
2017-01-10 17:25:07 +01:00
4. Install [spritezero ](https://github.com/mapbox/spritezero ) `npm install spritezero-cli`
5. Generate the low resolution sprites `spritezero sprites/osm-liberty ./svgs/`
6. Generate the high resolution sprites `spritezero sprites/osm-liberty@2x ./svgs/`
