A free Mapbox GL basemap style for everyone
Switch branches/tags
Nothing to show
Clone or download
Latest commit 07c0d7d Sep 24, 2018

README.md

OSM Liberty BSD licensed Build Status

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 and glyphs are served from Maptiler Cloud and the raster tiles and sprites directly from GitHub. You would need to subscribe to Maptiler Cloud to get an access key and replace the placeholder {key} for the vector source and glyphs 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.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

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

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

  1. Take the iconset.json and import it to the Maki 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 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.
  5. Install 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/