How to make an Oktoberfest map

Map design Advanced cartography examples

This set of articles represents a recommended selection of advanced cartography examples.

1. How to make custom map design in MapTiler Cloud
2. How to style a retro map
3. How to style a pop art map
4. Map styled like a picture
5. How to make an Oktoberfest map
6. How to style a choropleth map in the Customize
7. How to use MapTiler Ocean

This guide takes you through the process of creating a new map by updating an existing style and adding in your own data. The example we are using is for an Oktoberfest map, but it could be applied to any example you have a dataset for; you just need to add your own bit of creativity!

Preparing the data

1. Download the beer_poi.mbtiles data we prepared for you.

You can find the file at the bottom of this article. This is a selection of OSM POI tags such as restaurant, pub, bar, biergarten, or brewery for the German region of Bayern. We processed the data into MBTiles using MapTiler Engine.

2. Upload the data into your Cloud account.

Go to the Tiles section of your cloud account and click on the New Tileset button. Choose the file you have just downloaded and it will be uploaded to your account. Find the tileset in the list and click on it.

You can then see Tileset details such as the name: beer_poi and min and max zoom. You can also check the data attributes and location if you switch on the Show basemap button and zoom out a bit.

Creating a map

1. Customize the Bright map style.

Go to your Maps section and either scroll to Bright in the Standard maps or find it via the New Map button. You can also directly load the Customize tool.

2. Customize the Bright map style.

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.

3. Add icons.

Click on the three dots next to the Customize button under your map. Select the Symbols option. Here you can upload .zip files containing SVG icons. For Oktoberfest, we prepared a special beer icon along with two icons for cities: icons.zip. Download it from the bottom of this article and upload it here.

You can modify these icons (change size, color, outline) in graphics software such as Inkscape. Save and go back to your map. Click on Customize again.

4. 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.

5. Customize beer vizualization.

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 Semibold.
• 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 #FFF9EB color, 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 adjust the Text Layout anchor to Top.

Now switch to the JSON editor (Alt+E). Add the following code after the “text-anchor” property (don’t forget to add a comma at the end of the text anchor line).

"text-offset": [  
0,  
1  
]

This will move the breweries’ labels nicely under the icons. 

Now 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.

Save & Publish the map and enjoy the Oktoberfest vibes! 

P.S. You can, of course, adjust the map with different colors or icons, use a different initial map style, or just tell us where the best beer can be found in your city.

Downloadable resources

• icons.zip
• beer_poi.mbtiles

Next steps

Continue to How to style a choropleth map in the Customize to learn how to build a choropleth map where you connect geographically related data to countries, administrative or postal units, e.g. election maps, census data, and other statistical data.