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 and glyphs are served from [Maptiler Cloud](https://www.maptiler.com/cloud/) and the raster tiles 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} for the [vector source](https://github.com/maputnik/osm-liberty/blob/gh-pages/style.json#L11) and [glyphs](https://github.com/maputnik/osm-liberty/blob/gh-pages/style.json#L23) 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.49.0/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.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 import it to the [Maki Editor](https://www.mapbox.com/maki-icons/editor/).
2. Apply your changes and download the icons in SVG format and the iconset in JSON format.
3. Optional: Format the JSON with `cat iconset.json | jq -MS '.'` for better legibility.
4. Add the SVG files from the folder [svgs_not_in_iconset](https://github.com/maputnik/osm-liberty/tree/gh-pages/svgs/svgs_not_in_iconset) to the folder `svgs` downloaded from the Maki Editor.
These are the SVGs for road shields, the dot used for city and town layers and the road area pattern which could not be modified using the Maki Editor. To modify these you could use e.g. [Inkscape](https://inkscape.org). 
5. Install [spritezero-cli](https://github.com/mapbox/spritezero-cli): `npm install -g @mapbox/spritezero-cli`
6. Generate the low resolution sprites: `spritezero osm-liberty ./svgs/`
7. Generate the high resolution sprites: `spritezero --retina 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.`

Default for glyphs is now Maptiler Cloud 2018-09-24 11:44:36 +02:00			`By default, the vector tiles and glyphs are served from [Maptiler Cloud](https://www.maptiler.com/cloud/) and the raster tiles 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} for the [vector source](https://github.com/maputnik/osm-liberty/blob/gh-pages/style.json#L11) and [glyphs](https://github.com/maputnik/osm-liberty/blob/gh-pages/style.json#L23) with your own key.`
Update README.md 2018-09-11 11:35:03 +02:00

			`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 modify icons instructions 2018-09-13 18:09:47 +02:00			`<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.js'></script>`
			`<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.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`

Update modify icons instructions 2018-09-13 18:09:47 +02:00			1. Take the `iconset.json` and import it to the [Maki Editor](https://www.mapbox.com/maki-icons/editor/).
			`2. Apply your changes and download the icons in SVG format and the iconset in JSON format.`
			3. Optional: Format the JSON with `cat iconset.json \| jq -MS '.'` for better legibility.
			4. Add the SVG files from the folder [svgs_not_in_iconset](https://github.com/maputnik/osm-liberty/tree/gh-pages/svgs/svgs_not_in_iconset) to the folder `svgs` downloaded from the Maki Editor.
			`These are the SVGs for road shields, the dot used for city and town layers and the road area pattern which could not be modified using the Maki Editor. To modify these you could use e.g. [Inkscape](https://inkscape.org).`
			5. Install [spritezero-cli](https://github.com/mapbox/spritezero-cli): `npm install -g @mapbox/spritezero-cli`
			6. Generate the low resolution sprites: `spritezero osm-liberty ./svgs/`
			7. Generate the high resolution sprites: `spritezero --retina osm-liberty@2x ./svgs/`