Display Ski Slopes on the Map

This example demonstrates how to create custom map and display it on the web page using MapTiler cloud and Open Street Map data. You will learn the following:

• How to generate your own vector tiles and host them in MapTiler cloud.
• How to create your own map style and use your vector tiles along with predefined MapTiler tiles.
• How to display your custom map on the web page.

View complete source code on GitHub

Slopes Data

We will use ski slopes (small sample in Austria) for this example downloaded from Open Street Map (OSM) database. The OSM data is extracted and converted to geopackage. There are many ways how to download OSM data and convert them into geopackage - you can use QGIS, OpenMapTiles project, GDAL ogr2ogr etc. However we have prepared the data for you.

Create vector tiles

We will create vector tiles using MapTiler Desktop - the application which allows you to load your image or geodata and get a tiled map. You can download MapTiler desktop from MapTiler web site. Launch MapTiler Desktop and open the geo package.

Click “Export” to initiate export wizard and select “mbtiles” format.

Configure zoom levels and attributes. Attributes specified here will be used when working on the map style.

Keep output format gzip and launch rendering.

When done, MapTiler Desktop will show you rendered data.

Lastly, upload the mbtiles file you’ve created to your cloud account.

Create custom map

In the next step, we will create custom map and we will add slopes as a new layer.

You should first check if you have your vector tiles under Tiles section in your cloud account.

Create new map

In your cloud account, under Maps click New Map button. On the next screen, choose Open Editor.

Choose map which you would like to use as your template. We will choose outdoor map

Now you can start editing your map style.

Add slope data source to the map

In the next step we will add your slopes to the map as a new source so that we can use vector tiles from this source in new layers.

From the list of available sources, choose slopes.

Add slope layers

In the next step we will add slopes to the map. We will add 3 layers - blue, red, and black slopes.

In the top left corner, choose Add Layer button.

Select the source (slopes) and source layer (we have only one - slopes)

You can now start configuring the layer. Rename the layer to slopes-easy, add the filter piste_difficulty == easy to include only easy slopes in this layer and set color and opacity.

Create copies of the layer - intermediate and advanced slopes, set filters to piste_difficulty == intermediate and piste_difficulty == advanced and set colors.

Alter map style

You can change other layers as well, for example make landcover_grass and landcover_wood layers and change the color from green to white to set winter theme.

Publish the map

When you are done, you have to publish the map so that you can use it in your application. You might want to rename the map first - you can do it in the Edit Metadata menu. Then click Publish button.

You should now see the url of your map which you can use in the application.

Add custom map to web page

1. Load your custom map style

    var map = new maplibregl.Map({
        container: 'map', // container id
        style: 'https://api.maptiler.com/maps/[your custom map id]/style.json?key=[your key]', // style URL
        center: [11, 46.92], // starting position [lng, lat]
        zoom: 9 // starting zoom
    });
   

2. Pan and zoom to your slopes

    map.fitBounds([
        [10.91279724, 46.91076825],
        [11.02306368, 46.98484291]
    ]);