Add a basemap from MapTiler Server to MapTiler Engine

MapTiler Engine has a default set of basemaps you can choose from to modify the look of your map preview. However, you’re not limited to these default basemaps as it is possible to add the custom ones. In this article, we showed you how to use a map from MapTiler Cloud and now we’ll show you how to use a custom basemap served directly by MapTiler Server running on your local machine.

Preparations

Installing a MapTiler Server

First of all, you’ll need a working MapTiler Server on your computer. After downloading the installer from MapTiler Server download page, follow these installation instructions. Once the installation is successfully finished, you should be able to get to the server’s admin interface in your browser.

Getting a map style

Another thing that needs to be done to make serving tiles functional is providing a style so the data can be displayed correctly. For this purpose, you can use the startup package prepared by our team that already includes some default styles (Basic, Bright, Satellite-hybrid, Streets, Topo) and sample datasets with the location of Zurich, Switzerland (maptiler-osm.mbtiles and maptiler-satellite.mbtiles). You can just drag \& drop this package to the Tiles page of the server’s admin interface and the subfolders structure will be prepared automatically in its working dir.

Now you should be able to see the default datasets and styles in the server interface. We suggest keeping the maptiler-osm id for the new OpenStreetMap dataset, since it is used in the style.json file to access the data. Therefore you can remove or change the id of the sample dataset. Another way would be changing the id directly in the style.json file.

Preparing a tileset

The next step will be getting a dataset we want to serve as the custom basemap. You can go to the download section of MapTiler Data and choose the one that suits your location and style requirements. For this tutorial, we’ll go with OpenStreetMap vector tiles for the Czech Republic dataset. If you have trouble getting your data, check the article on this topic. Once you have your dataset downloaded, you can upload it to your running server by dragging \& dropping it to the Tiles section of the server’s interface. If you want to avoid watermarks in your map, you can upgrade to licensed MapTiler Server according to the current pricing plan.

The last step on getting your server ready is setting its id to the previously mentioned value maptiler-osm.

Now the server is all set and you can finally move to the MapTiler Engine section.

Using the custom map in MapTiler Engine

Run the MapTiler Engine application and after opening any supported file you’ll be taken to the preview page with your file’s footprint and underlying basemap.

add_basemap_1.png

Clicking the change basemap button will show the dialog where you’ll be able to choose from the set of default basemaps as well as add the custom one by pasting its TileJSON URL in the input field.

add_basemap_2.png

Now, this is when we return to the running server and get the URL of our custom map. In this example, we’ll set the Outdoor basemap style, as it’s not included in the Engine default basemaps set.

In the server’s interface, navigate to the maps section and select Outdoor map. Here scroll to the Raster tiles section, get the URL for 512x512 tiles

The only supported format of the tiles served from the custom basemap service is raster images with 512x512px size

… and paste it in the input field of the basemap dialog in MapTiler Engine. After submitting the address, the custom map should be listed after the existing basemaps.

add_basemap_2.png

add_basemap_3.png

And that’s it! This way you can easily set and use the downloaded dataset as a custom basemap even without an internet connection.

Add a basemap from MapTiler Cloud to MapTiler Engine
How to add data to MapTiler Server
Learn how map styles work in MapTiler Server
Data download from MapTiler website
How to create a map with your own style/design in MapTiler Edit Style
Maps, Tiles, Data: What are they and how do they differ?

On this page