How to make an Oktoberfest map
In this tutorial, you’ll learn how to create this themed Oktoberfest map using our visual map editor Map Designer:
Source files
To create this exact map, you’ll need these files:
Preparing the data
The beer_poi.mbtiles data file is a selection of POIs (points of interest) such as restaurant, pub, bar, biergarten, or brewery for the German region of Bayern. We processed the data into MBTiles using MapTiler Engine, and you’ll need them to show these places on your map using the custom beer mug icon.
Upload the data file to your MapTiler account:
- Go to the Tiles section of your cloud account and click on the New Tileset button.
- Choose your
beer_poi.mbtilesfile you’ve downloaded from Source files to upload to your account.
Find the dataset in the list and click on it to inspect it. You can check the details such as min and max zoom, data attributes, and location if you switch on the Show basemap button and zoom out a bit.
Creating a map
Open Map Designer with the Bright map. We’ll use it as a base for your own custom map.
1. Adjust map colors
In the Quick Edits, click on the Map Colors Palette and adjust the Hue to a value of around 47°.
To polish the borders slightly, go to the Layers (Alt+L), then to Administrative block, and select all border layers (Country, Disputed, Other) while holding Shift.
Reset and change the Color to #C28B00. Then Save and publish the map, and close it by clicking on the X.
2. Add custom icons
For Oktoberfest, we prepared a special beer icon along with two icons for cities. We’ve packed them into the icons.zip source file. To upload them to your map, go to the Quick Edits, section Map icons. If you need more detailed info, see Customizing map icons.
3. Add beer POIs
As we replaced the symbols, we are now missing some of the icons on the map. It’s no problem, however, as we will switch off the visibility of the affected layers to let the beer POIs shine.
In the Layers panel, turn off the following layers by clicking on the Eye icon:
- In Transport - Oneway road, Highway shield, Highway shield (US)
- The whole POI Block. Now Zoom to the München area.
Next, click on the Plus button to Add a new layer. Search for the beer_poi data, select a Point geometry, then choose a Parent Block (you can create a new one called Beer, for example), Symbol visualization, and preferred layer name. Then Add the layer.
4. Adjust visualization
Now you should see a lot of text added to your map. This is because the data is added with default styling. Change the following values:
- Font to Open Sans Semi Bold.
- Adjust the size with zoom range styling (three dots) to 14px at zoom 10, 16px at zoom 14 and 18px at zoom 22.
- Change the color to
#97741C. - Add outline with
#FFF9EBcolor, 80% opacity, 2.5px width and 0.2px blur. - Add icon with beer image.
- Adjust the icon size with zoom range styling (three dots) to 0.7× on zoom 9 and 1× on zoom 11.
- Open Layout and set the Text Layout anchor to Top. This will move the breweries’ labels nicely under the icons. Adjust padding as needed.
Adjust the filter. Just replace the filter section with the following code.
"filter": [
"has",
"name"
],
This will ensure that only breweries with names will be displayed.
Switch to the Verticality tab and move the Beer layer under Place labels so that you can see cities, villages, and other administrative names above the new labels we have added.
To add a blurry effect, go to the Background Block and duplicate the background. Adjust the opacity with zoom range styling to 100% on zoom 0, 90% on zoom 4, 60% on zoom 6 and 0% on zoom 9.
Switch to the Verticality tab and move this layer to the very top. If you zoom out of München so that you can see the whole of Germany or Europe, you’ll see that the map goes blurry.
Use your map
When done, you can publish your custom map and share it with the world. The options are the same as when using a ready-made map.
Enjoy the Oktoberfest vibes! 🍻