How to customize the style of your 3D maps

Our 3D map templates already have many different styles to choose from and you can even customize their layers to decide which parts you would like to display. This help doc will walk you through the different options of customizing built-in styles as well as adding your own raster or vector tiles.

In this article

    1
    Using raster tiles
    One way to customize your base map is to link to open-source raster tiles, or raster tiles that you own. Raster tiles are a set of images that get stitched together in order to draw a map. They are usually ordered in a pyramid scheme (so that you see a different level of detail at different zoom levels).
    You can find a list of some public raster tile servers here. 
    A URL to raster tiles should look something like this: https://data.kiln.it/shipmap/tiles/{z}/{x}/{y}.png
    Make sure your raster tile URL starts with https.
    To add your raster tiles, select Raster from the Base map settings and paste in your URL.

    You will be able to change the tile scheme, tile size, tile zoom as well as the tile attribution.
    • If your tiles appear striped and repeat themselves like in our example below, you might want to change your Tile scheme. This setting has two options – Web Mercator and OSGeo – which refer to the direction the tiles are laid out in.
    • The tile size refers to the width (in pixels) of each tile. The smaller this is, the higher resolution your map will appear in. Note this also means your map might load more slowly.
    • The min. and max. tile zoom refer to the different zoom levels that are configured within your tiles, with 0 being the top-level zoom and 24 the most detailed zoom level. If you would like to lock it to a certain zoom level, you can configure this here.
    • The tile attribution will be added to the bottom right corner of your map. Hover over the i in the example embedded above to see it.
    2

    Using vector tiles

    Another way to customize your base map is by using vector tiles. While raster tiles use images that can't be customized after setting up the tiles, vector tiles are stylable through underlying geometry and feature layers. They are also much smaller and loaded dynamically, making them faster to load and more performant.
    There are a few vector tile styles already built in to Flourish, but you can also customize them further or link up your own styles created elsewhere. 

    To select or customize an existing vector map style, select Vector from the Base map settings and choose one of the options from the Map style dropdown.

    To customize the selected style, select "Customize layers". This will give you the option to enable to disable certain layers, as well as control the font that is displayed on the map.

    If you would like to customize your vector map styles even more, there are a few more options.

    • Custom: Monochrome

      The Custom: Monochrome option will allow you to style your map based on one selected colour. To use this style, go to the "Map style" setting within the "Base map" settings and select "Custom: Monochrome" from the dropdown. Once selected, you can choose a base color using the color picker or by supplying a HEX code.

    • Custom: Palette

      The palette option allows you to create your own style by selecting colors for different layers such as the ocean, the ground or nature. You can enter hex codes or drag the color picker to get to your preferred color, and these colors are themable on Business Pro and Enterprise accounts.

    • Custom: JSON

      With the JSON option, you can fully customize the styles of your map or import vector styles you created on another platform.

      As we use tiles that match the OpenMapTiles schema, it's recommended to use Maputnik or MapTiler to create styles. Simply use the editor to create a style of your liking and export the JSON file. Then copy the contents of the JSON file into the text box. Keep in mind you will need a Maptiler , Mapbox or Thunderforest Access Token to export the JSON file.