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 A fork of OSM Bright based on free data sources with a mission for a clear good looking design for the
everyday user. 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 ## Data Sources
- [OSM2VectorTiles](http://osm2vectortiles.org/) as vector data source - [OSM2VectorTiles](http://osm2vectortiles.org/) as vector data source
@ -11,14 +49,18 @@ everyday user.
## Map Design ## Map Design
The map design originates from OSM Bright but strives to reach the clean design and elegance of Google Maps. 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 makes the low zoom levels look good. Colored relief shading from Natural Earth make the low zoom levels look good.
![Europe](demo/europe.png) ![Europe](demo/europe.png)
![Switzerland](demo/europe.png) ![Switzerland](demo/europe.png)
![Zurich](demo/zurich.png) ![Zurich](demo/zurich.png)
![Zurich Bürkliplatz](demo/zurich_buerkliplatz.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 ## Icon Design
A [Maki](https://github.com/mapbox/maki) icon set using colors to distinguish between icon categories. 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](). 1. Take the style JSON file and upload it to the [Maki Editor]().
2. Apply your changes and download the icon set again. 2. Apply your changes and download the icon set again.
3. Ensure you format the JSON first with `cat iconset.json | jq -MS '.'` 3. Ensure you format the JSON first with `cat iconset.json | jq -MS '.'`
## License