How to Add Custom Landmarks to Your Map

Map design Icons & Patterns

This collection of articles forms a suggested workflow to understanding the fundamentals of map design icons & patterns.

  1. Working with Icons
  2. Working with Patterns
  3. Using Sprites
  4. How to Add Custom Landmarks to Your Map
  5. Add custom watermark to your map

In the context of a map, a landmark is a prominent point of interest (POI), an easily identifiable feature or structure. It is used as a reference point to help with navigation and orientation mainly in cities.

This tutorial shows how to create custom landmarks using Customize.

First, either upload a GeoJSON file containing your custom landmarks or create a new one using the vector editor. You can also use an already existing Symbol layer, or you can add a new one.

Adding the Layer

Add your GeoJSON or desired style layer by following this tutorial. Make sure to add the layer as Point geometry and select Symbol visualization in the final step. After the layer is added, there may not be a visible change on the map, but don’t worry, we’ll change that later!

Uploading Custom Landmark Images

To have custom landmarks, you need to upload the images representing each landmark.

  1. You can upload new images by opening the menu in the top-right corner and pressing Upload icons.

    upload_1.png

  2. The upload window will show up. Select the Raster icons option and press Continue.

    upload_2.png

  3. Click on Upload files and select the PNG files from your computer.

    upload_3.png

  4. Finally, once you see all your images, press Upload.

    upload-final.png

Styling the Layer with Landmark Images

Once you add the layer and upload the images, you can start styling the layer to use the images you want.

You can use Data Range Styling to make this easier. But before you do that, you first should check the attribute to which the Data Range Styling will be tied to.

  1. Switch to the Data panel and click on one of the green dots. In this example, we’ll use the text attribute, which is custom to the used GeoJSON.

    data.png

  2. Switch back to Style and click on the Icon section.

    style.png

  3. Hover over the Image and click on the three little dots. Then click on the Data Range styling and specify the attribute. This is the attribute that the styling will be tied to. You can read more about attributes.

    add-drs.gif

  4. Gradually add stops and assign images to text attributes:

    drs-stop.gif

After some additional styling, the final result may look like this:

final.png

Next steps

Continue to Add custom watermark to your map to learn how to include a custom watermark on a MapTiler map with the Customize tool. 

Using Sprites

Working with Icons