Make getting started way easier

pull/319/head
lukasmartinelli 2016-05-23 15:24:39 +02:00
rodzic 1ab9ac9ad1
commit 519d5397e7
3 zmienionych plików z 17 dodań i 42 usunięć

Wyświetl plik

@ -31,4 +31,11 @@ Once you are satisfied with your personal map you can download the
## Deploy your Map
Once you've downloaded the Mapbox GL Style JSON you need to modify it
to work together with OSM2VectorTiles. The [getting started tutorial](/docs/getting-started){:target="_blank"} explains how this can be done.
to work together with OSM2VectorTiles.
Ensure you are serving vector tiles as explained in the [getting started tutorial](/docs/getting-started/).
The MapboxGL style JSON you just downloaded defines how each feature of the map should be styled and where the assets like vector tiles, fonts and icons are stored.
You need to point the vector tile source to the new location of your own vector tile server.
<script src="https://gist.github.com/manuelroth/d67f1ae67dddbb659ff17a7bb854096d.js"></script>

Wyświetl plik

@ -15,59 +15,27 @@ that supports serving vector tiles.
```bash
npm install -g tileserver-vector
npm install -g tileserver-gl-light
```
Apart from the vector tiles you also need to serve the fonts and icons needed in your styles.
We prepared a repository containing Mapbox GL example styles and the necessary font and icon files.
```bash
git clone https://github.com/osm2vectortiles/mapbox-gl-styles.git
cd mapbox-gl-styles
```
The most essential part is choosing the vector tiles you want to serve.
Head over to the [Downloads]() section and choose your country or city extract or even the entire planet.
Head over to the [Downloads](/downloads/) section and choose your country or city extract or even the entire planet as the vector tiles you want to serve.
The vector tiles are stored in the MBTiles SQLite database you downloaded now.
Download the MBTiles file into the same directory and name it `osm2vectortiles.mbtiles`.
```bash
curl -o osm2vectortiles.mbtiles https://osm2vectortiles-downloads.os.zhdk.cloud.switch.ch/v1.0/extracts/zurich.mbtiles
curl -o zurich.mbtiles https://osm2vectortiles-downloads.os.zhdk.cloud.switch.ch/v2.0/extracts/zurich_switzerland.mbtiles
```
Now start the tileserver in the same directory.
Start the tileserver in the same directory.
```bash
tileserver-vector
tileserver-gl-light
```
If you visit `localhost:3000` you will be greeted with the following page.
![Image of tileserver gl]()
## Display a map in your browser
Now that the vector tiles are available, we can move on to display a map in your browser.
The following HTML file defines a full-screen map using a custom Mapbox GL style.
If you visit `localhost:8080` you will see an overview of predefined styles you can already use. You can now choose a map and copy the example full-screen HTML code from below. Put the HTML code into a `index.html` and open it with your browser.
<script src="https://gist.github.com/manuelroth/06380f112ff31a9b8f65b4971f1ee910.js"></script>
Congratulations, you are now serving your own vector tiles and your own map!
You can now [create your own custom Mapbox GL style with Mapbox Studio](/docs/create-map-with-mapbox-studio/).
The `bright-v9.json` file defines how each feature of the map should be styled and where the assets like vector tiles, fonts and icons are stored.
Following you can see a simplified version of the style.
The vector tiles server we created before is now referenced as the source.
<script src="https://gist.github.com/manuelroth/d67f1ae67dddbb659ff17a7bb854096d.js"></script>
You can open the HTML file with your browser to checkout the webmap.
## Use our Public CDN for serving vector tiles
If you don't want to serve the vector tiles yourself, you can use our public CDN. Klokan Technologies provides a free and fast CDN serving vector tiles of the entire planet for development purposes and testing.
The free CDN service is not recommended for production use in mobile or web applications and commercial use is prohibited without permission. The service is made for demonstration of the open-source technology developed in this project and for designers, but should not be used on servers or in any final products.
### Using the Service
To use the public CDN instead of your local running server you need to replace the vector tile source in the style json with the url of the public CDN.
<script src="https://gist.github.com/manuelroth/427dbf552f69ebb997929148587deda4.js"></script>
<img src="/media/tileserver-gl-light.png" align="center" style="max-width:600px" alt="Index page of tileserver-gl-light" />

Plik binarny nie jest wyświetlany.

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 239 KiB