37a967c025
Currently mapbox-gl v0.30.0 and v0.31.0 won't display the map in Firefox if the canvas is larger than 2048px in width or height (common on screens with resolution of 2K or higher). The problem was introduced by mapbox/mapbox-gl-js#3841, in mapbox/mapbox-gl-js#3915 the issue with Firefox was discovered and in mapbox/mapbox-gl-js#3986 the fix was released. So until v0.32.0 is released (which will incorporate the fix), I suggest reverting back to v0.29.0, which works fine with Firefox on large screens.
92 lines
3.7 KiB
Markdown
92 lines
3.7 KiB
Markdown
# OSM Liberty [](https://github.com/lukasmartinelli/osm-liberty/blob/gh-pages/LICENSE.md) [](https://travis-ci.org/lukasmartinelli/osm-liberty)
|
|
|
|
<img align="right" alt="OSM Liberty" src="logo.png" />
|
|
|
|
A free Mapbox GL basemap from [OpenStreetMap](https://openstreetmap.org) 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).
|
|
|
|
**[osm-liberty.lukasmartinelli.ch](http://osm-liberty.lukasmartinelli.ch/)**
|
|
|
|
## Usage
|
|
|
|
You can instantly use the style in your Mapbox GL maps. The vector tiles are served from the @klokantech public CDN
|
|
and the raster tiles, glyphs and sprites directly from GitHub.
|
|
Take a look at the [demo page source code](index.html) how to display a map.
|
|
To use it you don't need any access keys and you can 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.29.0/mapbox-gl.js'></script>
|
|
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.css' rel='stylesheet' />
|
|
</head>
|
|
<body>
|
|
<div id='map'></div>
|
|
<script>
|
|
var map = new mapboxgl.Map({
|
|
container: 'map',
|
|
style: 'http://osm-liberty.lukasmartinelli.ch/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.
|
|
|
|
[](http://osm-liberty.lukasmartinelli.ch/)
|
|
|
|
## Edit the Style
|
|
|
|
You can [edit the style directly online in Maputnik](http://maputnik.com/editor?style=https://rawgit.com/lukasmartinelli/osm-liberty/gh-pages/style.json).
|
|
|
|
Use the [Maputnik CLI](http://openmaptiles.org/docs/style/maputnik/) to edit and develop the style locally.
|
|
After you've started Maputnik open the editor on `localhost:8000`. This style actually triggered the need for the development of Maputnik.
|
|
|
|
```
|
|
maputnik --watch --file style.json
|
|
```
|
|
|
|
## 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/`
|