osm-liberty-dark/README.md

# OSM Liberty [![BSD licensed](https://img.shields.io/badge/license-BSD-blue.svg)](https://github.com/maputnik/osm-liberty/blob/gh-pages/LICENSE.md) [![Build Status](https://travis-ci.org/maputnik/osm-liberty.svg?branch=gh-pages)](https://travis-ci.org/maputnik/osm-liberty)

<img align="right" alt="OSM Liberty" src="logo.png" />

A free Mapbox GL basemap style for everyone 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).

**[Preview OSM Liberty with Maputnik](https://maputnik.github.io/editor/?style=https://rawgit.com/maputnik/osm-liberty/gh-pages/style.json)**

## Usage

You can use the style in your Mapbox GL maps. 

By default, the vector tiles are served from [Maptiler Cloud](https://www.maptiler.com/cloud/) and the raster tiles, glyphs and sprites directly from GitHub.
You would need to [subscribe](https://www.maptiler.com/cloud/plans) to Maptiler Cloud to get an access key and replace the placeholder {key} [here](https://github.com/maputnik/osm-liberty/blob/gh-pages/style.json#L19) with your own key.


Another option is to create your own vector tiles with [OpenMapTiles](https://github.com/openmaptiles/openmaptiles) and 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>
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
  <div id='map'></div>
  <script>
  var map = new mapboxgl.Map({
      container: 'map',
      style: 'https://maputnik.github.io/osm-liberty/style.json',
      center: [8.538961,47.372476],
      zoom: 5,
      hash: true
  });
  </script>
</body>
</html>
```

## Data Sources

- [OpenMapTiles](http://openmaptiles.org/) as vector data source
- [Natural Earth Tiles](http://naturalearthtiles.org) for relief shading
- [Maki](https://www.mapbox.com/maki-icons/) as icon set

## Map Design

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.

[![OSM Liberty Map demo](demo/zoom.gif)](https://maputnik.github.io/osm-liberty/)

## Edit the Style

You can [edit the style directly online in Maputnik](https://maputnik.github.io/editor?style=https://rawgit.com/maputnik/osm-liberty/gh-pages/style.json).

This style actually triggered the need for the development of [Maputnik](https://github.com/maputnik/editor/).

## 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**

1. Take the `iconset.json` and upload it to the [Maki Editor](https://www.mapbox.com/maki-icons/#editor).
2. Apply your changes and download the fonts and icon set again.
3. Ensure you format the JSON first with `cat iconset.json | jq -MS '.'`
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/`
Move from lukasmartinelli/osm-liberty -> maputnik/osm-liberty 2018-06-24 13:22:59 +01:00			`# OSM Liberty [![BSD licensed](https://img.shields.io/badge/license-BSD-blue.svg)](https://github.com/maputnik/osm-liberty/blob/gh-pages/LICENSE.md) [![Build Status](https://travis-ci.org/maputnik/osm-liberty.svg?branch=gh-pages)](https://travis-ci.org/maputnik/osm-liberty)`
Update README.md 2018-06-03 19:39:05 +05:30
Add logo 2016-08-06 23:04:17 +02:00			`<img align="right" alt="OSM Liberty" src="logo.png" />`

Update README.md 2018-09-11 11:35:03 +02:00			`A free Mapbox GL basemap style for everyone 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).`
Add demo images 2016-08-06 17:35:24 +02:00
Update README.md 2018-09-11 11:35:03 +02:00			`[Preview OSM Liberty with Maputnik](https://maputnik.github.io/editor/?style=https://rawgit.com/maputnik/osm-liberty/gh-pages/style.json)`
Add HTML sample 2016-08-06 22:39:56 +02:00
			`## Usage`

Update README.md 2018-09-11 11:35:03 +02:00			`You can use the style in your Mapbox GL maps.`

			`By default, the vector tiles are served from [Maptiler Cloud](https://www.maptiler.com/cloud/) and the raster tiles, glyphs and sprites directly from GitHub.`
			`You would need to [subscribe](https://www.maptiler.com/cloud/plans) to Maptiler Cloud to get an access key and replace the placeholder {key} [here](https://github.com/maputnik/osm-liberty/blob/gh-pages/style.json#L19) with your own key.`


			`Another option is to create your own vector tiles with [OpenMapTiles](https://github.com/openmaptiles/openmaptiles) and host the tiles and assets yourself for complete liberty.`
Add HTML sample 2016-08-06 22:39:56 +02:00
			```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>`
Update README.md 2018-09-11 11:35:03 +02:00			`<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.js'></script>`
			`<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.css' rel='stylesheet' />`
Add HTML sample 2016-08-06 22:39:56 +02:00			`</head>`
			`<body>`
			`<div id='map'></div>`
			`<script>`
			`var map = new mapboxgl.Map({`
			`container: 'map',`
Move from lukasmartinelli/osm-liberty -> maputnik/osm-liberty 2018-06-24 13:22:59 +01:00			`style: 'https://maputnik.github.io/osm-liberty/style.json',`
Add HTML sample 2016-08-06 22:39:56 +02:00			`center: [8.538961,47.372476],`
			`zoom: 5,`
			`hash: true`
			`});`
			`</script>`
			`</body>`
			`</html>`
			```

Add demo images 2016-08-06 17:35:24 +02:00			`## Data Sources`

3D buildings should be before roads 2017-01-10 18:06:08 +01:00			`- [OpenMapTiles](http://openmaptiles.org/) as vector data source`
Add OSM reference 2016-08-06 23:07:49 +02:00			`- [Natural Earth Tiles](http://naturalearthtiles.org) for relief shading`
Add demo images 2016-08-06 17:35:24 +02:00			`- [Maki](https://www.mapbox.com/maki-icons/) as icon set`
Add style 2016-08-06 17:02:17 +02:00
			`## Map Design`

Add HTML sample 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.`
Add demo images 2016-08-06 17:35:24 +02:00
Move from lukasmartinelli/osm-liberty -> maputnik/osm-liberty 2018-06-24 13:22:59 +01:00			`[![OSM Liberty Map demo](demo/zoom.gif)](https://maputnik.github.io/osm-liberty/)`
Update README.md 2016-08-08 21:13:11 +02:00
Remove interactive 2017-01-10 15:34:43 +01:00			`## Edit the Style`
Add HTML sample 2016-08-06 22:39:56 +02:00
Update edit link 2018-07-09 15:36:13 +02:00			`You can [edit the style directly online in Maputnik](https://maputnik.github.io/editor?style=https://rawgit.com/maputnik/osm-liberty/gh-pages/style.json).`
Add Maputnik link 2017-01-10 18:43:30 +01:00
Update README.md 2018-09-11 11:35:03 +02:00			`This style actually triggered the need for the development of [Maputnik](https://github.com/maputnik/editor/).`
Add HTML sample 2016-08-06 22:39:56 +02:00
Add style 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`

3D buildings should be before roads 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).
Regenerate sprites 2017-01-10 17:25:07 +01:00			`2. Apply your changes and download the fonts and icon set again.`
Add style 2016-08-06 17:02:17 +02:00			3. Ensure you format the JSON first with `cat iconset.json \| jq -MS '.'`
Regenerate sprites 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/`