Netsyms/osm-liberty-dark
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add HTML sample

Browse Source
This commit is contained in:
lukasmartinelli 2016-08-06 22:39:56 +02:00
parent fcb0feb3ed
commit dbedf4a6cb
1 changed files with 45 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
README.md
View File

@ -1,8 +1,46 @@
# OSM Liberty
# OSM Liberty [![BSD licensed](https://img.shields.io/badge/license-BSD-blue.svg)](https://github.com/lukasmartinelli/osm-liberty/blob/gh-pages/LICENSE.md)
A fork of OSM Bright based on free data sources with a mission for a clear good looking design for the
everyday user.
**[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.21.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.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/osm-liberty.json',
center: [8.538961,47.372476],
zoom: 5,
hash: true
});
</script>
</body>
</html>
```
## Data Sources
- [OSM2VectorTiles](http://osm2vectortiles.org/) as vector data source
@ -11,14 +49,18 @@ everyday user.
## Map Design
The map design originates from OSM Bright but strives to reach the clean design and elegance of Google Maps.
Colored relief shading from Natural Earth makes the low zoom levels look good.
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.
![Europe](demo/europe.png)
![Switzerland](demo/europe.png)
![Zurich](demo/zurich.png)
![Zurich Bürkliplatz](demo/zurich_buerkliplatz.png)
**Modify Style**
You can directly modify the style with the help of the [mapbox-gl-style-editor](https://github.com/erikandre/mapbox-gl-style-editor).
## Icon Design
A [Maki](https://github.com/mapbox/maki) icon set using colors to distinguish between icon categories.
@ -39,5 +81,3 @@ Green | `#76a723`
1. Take the style JSON file and upload it to the [Maki Editor]().
2. Apply your changes and download the icon set again.
3. Ensure you format the JSON first with `cat iconset.json | jq -MS '.'`
## License