kopia lustrzana https://github.com/osm2vectortiles/osm2vectortiles
Make getting started way easier
rodzic
1ab9ac9ad1
commit
519d5397e7
|
@ -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>
|
||||
|
|
|
@ -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 |
Ładowanie…
Reference in New Issue