Skip to content

digitalfabrik/integreat-maplibre-style

Repository files navigation

OSM Liberty BSD licensed

OSM Liberty

This is a fork from osm-liberty. We use this as a base map style for the whole Integreat project. Whenever you see a map in the context of the Integreat, then this style should be used.

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, raster tiles and sprites directly and glyphs are served from Tür an Tür.

They were created using OpenMapTiles.

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.

You can also run maputnik locally:

wget https://github.com/maputnik/editor/releases/download/v1.7.0/maputnik-linux.zip
unzip maputnik-linux.zip
chmod +x maputnik
./maputnik --file style.json

A pre-commit hook is included to validate and format the JSON styles using mapbox-gl-style-spec. To use, just install the NPM dev dependencies:

npm install

and then validate or format the style with

npm run validate
npm run format

Validation and reformatting will happen automatically on commit if you have the dependencies installed.

Icon Design

A Maki icon set using colors to distinguish between icon categories.

Maki is a living project and adds new icons over time, which means that there could be new icons that OSM Liberty could use for POIs. maki_list.py is a simple script to list both the names in OSM Liberty's iconset that don't map to any valid Maki name, and the Maki names that are not currently used in OSM Liberty's iconset. You can run the script with python3 maki_list.py.

Color Palette

Color Name Hex Value
Blue #5d60be
Light Blue #4898ff
Orange #d97200
Red #ba3827
Brown #725a50
Green #76a723

Modify Icons for POI Categories

  1. Take the iconset.json and import it to the Maki Editor.
  2. Download filled icon from figma or material icon from google.
  3. Resize icon to 40x40 SVG Editor.
  4. Create files in all colors for this svg sh create_svg_colors.sh '<icon_name>' (tools/create_svg_colors.sh)
  5. Upload icons to the particular color groups.
  6. Download the icons in SVG format and the iconset in JSON format.
  7. Sort the json file alphabetically for better legibility [JSON ABC Sorter]https://novicelab.org/jsonabc/.
  8. Update the content of the iconset.json.
  9. Replace all the icons in the svgs_iconset with the SVGs downloaded from the Make Editor.