a164138e64 | 6 years ago | |
---|---|---|
demo | 8 years ago | |
sprites | 6 years ago | |
svgs | 6 years ago | |
.gitignore | 8 years ago | |
.travis.yml | 7 years ago | |
LICENSE.md | 8 years ago | |
README.md | 6 years ago | |
_config.yml | 6 years ago | |
iconset.json | 6 years ago | |
index.html | 6 years ago | |
logo.png | 8 years ago | |
style.json | 6 years ago | |
thumbnail.png | 7 years ago |
README.md
OSM Liberty
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.
Preview OSM Liberty with Maputnik
Usage
You can use the style in your Mapbox GL maps.
By default, the vector tiles are served from Maptiler Cloud and the raster tiles, glyphs and sprites directly from GitHub. You would need to subscribe to Maptiler Cloud to get an access key and replace the placeholder {key} here with your own key.
Another option is to create your own vector tiles with OpenMapTiles and host the tiles and assets yourself for complete liberty.
<!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 as vector data source
- Natural Earth Tiles for relief shading
- Maki 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.
Edit the Style
You can edit the style directly online in Maputnik.
This style actually triggered the need for the development of Maputnik.
Icon Design
A 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
- Take the
iconset.json
and upload it to the Maki Editor. - Apply your changes and download the fonts and icon set again.
- Ensure you format the JSON first with
cat iconset.json | jq -MS '.'
- Install spritezero
npm install spritezero-cli
- Generate the low resolution sprites
spritezero sprites/osm-liberty ./svgs/
- Generate the high resolution sprites
spritezero sprites/osm-liberty@2x ./svgs/