Improve Mapbox Studio Classic quickstart tutorial

pull/344/head
Lukas Martinelli 2015-12-17 14:23:29 +01:00
rodzic 3fc7741e73
commit 496dcce179
5 zmienionych plików z 25 dodań i 11 usunięć

Wyświetl plik

@ -4,7 +4,7 @@ title: Create a new Style with Mapbox Studio Classic
published: true
---
# Create a new Style with Mapbox Studio Classic
# Create a new Style with Mapbox Studio Classic
You can use [the same resources from Mapbox](https://www.mapbox.com/help/getting-started-studio/)
for learning how to design maps with Mapbox Studio Classic. This tutorial will show you how to customize
@ -26,7 +26,7 @@ In `Styles and Resources` create a new style and choose `OSM Bright 2`. Then sav
Now you are based of the vector tiles from Mapbox Streets. To use our free and Open Source vector tiles
you need to `Change Source` in `Layers`.
Enter the [TileJSON](https://github.com/mapbox/tilejson-spec) url of our vectortiles server `vectortiles.osm2vectortiles.org/world.json`.
Enter the [TileJSON](https://github.com/mapbox/tilejson-spec) URL of our vectortiles server `https://osm2vectortiles.tileserver.com/v1.json`.
You can later replace this with your own vector tiles server if you want to serve everything by yourself.
Because our vector tiles are to a large part Mapbox Streets compatible you won't see any drastic changes.
@ -34,6 +34,17 @@ In fact you could even continue styling your project with Mapbox Streets and mak
![Switch to osm2vectortiles in Mapbox Studio Classic](/media/mapbox_classic_switch_osm2vectortiles.gif)
## Design your Map
Create a awesome map with a great design. We recommend the
[Mapbox Studio Classic Quickstart tutorial](https://www.mapbox.com/help/style-quickstart/)
to get a overview of all the options you can use to create good looking maps.
To get some inspiration you can
look at the [example maps](/maps) that work together with osm2vectortiles.
[![Map Gallery of maps made with osm2vectortiles](/media/sample_map_gallery.gif)](/maps)
## Deploy your Map
Because you are no longer bound to Mapbox for hosting you can now host the maps yourself and save money.
Learn [how to deploy a raster tile server with Docker](/docs/serve-raster-tiles-docker/)
or get started by [displaying your first raster based map locally](/docs/start/).

Wyświetl plik

@ -4,13 +4,16 @@ title: Display Map with Mapbox GL
published: true
---
## Display Map
# Display Map with Mapbox GL
To display a custom MapboxGL based map you need to create a HTML file and
reference the public vector tile server of osm2vectortiles. You are free to download and
To display a custom Mapbox GL based map you need to create a HTML file and
reference [the public vector tile CDN](/docs/use-public-cdn/).
You are free to download and
host the vector tiles yourself but we provide a fast and distributed CDN service for serving
the PBFs for you.
## Clone example Repository
The easiest way to get started is using the `mapbox-gl-js-exmaple` repository.
Clone the repository and change into the directory.
@ -30,14 +33,14 @@ You can create your own styles with Mapbox Studio.
If you want to serve the Mapbox GL Style JSON without Mapbox you need to configure three URLs.
1. Change the `sources` URL to the free osm2vectortile serve or use your own server
1. Change the `sources` URL to the free CDN server or use your own server
2. Change the `sprite` URL to the location of your sprites
3. Change the `glyphs` URL to the location of your fonts
```javascript
"sources": {
"mapbox": {
"url": "http://vectortiles.osm2vectortiles.org/world.json",
"url": "http://osm2vectortiles.tileserver.com/v1.json",
"type": "vector"
}
},

Wyświetl plik

@ -61,13 +61,13 @@ published: true
<div id="raster-map" class="map-preview"></div>
<div id="map-container">
<button id="raster-osm-bright" class="map-button">OSM Bright</button
><button id="comic-map" class="map-button">Comic Map</button
><button id="retro" class="map-button">Retro</button
><button id="comic-map" class="map-button">Comic Map</button
><button id="light-map" class="map-button">Light Map</button
><button id="dark-map" class="map-button">Dark Map</button
><button id="streets-basic" class="map-button">Streets Basic</button
><button id="woodcut" class="map-button">Woodcut</butto><button id="pirates" class="map-button">Pirates</button
><button id="wheatpaste" class="map-button">Wheatpaste</button
><button id="retro" class="map-button">Retro</button>
><button id="wheatpaste" class="map-button">Wheatpaste</button>
</div>
</br>
<div id="raster-style-reference"></div>

Plik binarny nie jest wyświetlany.

Przed

Szerokość:  |  Wysokość:  |  Rozmiar: 1.7 MiB

Po

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

Plik binarny nie jest wyświetlany.

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 2.3 MiB