Skip to main content

Create a custom map style

Radar Maps Studio is a tool that allows you to create fully customizable maps for your website or app. With Maps Studio, you can define the look and feel of your map, choosing custom styles, colors, fonts, and more, all without the need for extensive coding.

Whether you’re building a map for a specific brand aesthetic or a detailed visualization, Maps Studio gives you the power to tailor maps to your needs.

Getting Started#

To start creating a custom map:

  1. Log in to the Radar dashboard and navigate to the Maps Styles section in the sidebar.
  2. Click the Create style button to bring up the new style modal.
  3. Choose a base style, then click Create to get started.


From here, you can use the Maps Studio editor to customize the look and feel of your map.

Changing colors and visibility#

In the map editor, select a layer (eg. background, roads, water) to toggle the visibility (show or hide the layer) or to change the color.

Upload a custom marker#

To upload a custom marker, click the + button where it says "Add a marker" at the bottom of the layer panel. This will bring up a modal that allows you to upload your own .svg or .png file to be used as a custom marker on the map.



See the marker section of the Maps docs for more info on using custom markers.

Advanced mode#

If you need more advanced customizations beyond basic color or label visibility, you can enable Advanced mode in the maps editor.

Advanced mode gives you more flexibility to customize the map to your liking:

  • Exposes all map layers for customization
  • Ability to re-order layers
  • More style attributes (opacity, border color, text color, fonts etc...)


You can also edit the underlying JSON of the style rule that adheres to the MapLibre Style Spec. This gives you ultimate control over the presentation of each layer on the map.

Upload a custom font#

To further align your maps with your brand’s identity, Radar Maps Studio supports custom font uploads. This feature allows you to display labels, street names, or other text elements on the map using your own fonts.

Custom fonts can by uploaded by going to the Settings tab, and clicking the Upload fonts button. This will be a modal that will allow you to upload a .ttf for .otf font file.

Once uploaded, your custom font will appear in the dropdown when selecting the Text font for map features.



Note: custom fonts requires the use of the advanced mode editor.

Save and publish your map#

Once you're satisfied with the look and feel of your new map, you'll need to save your changes with the button at the top of the edit panel.

If this is a new map, you'll need to update your client-side code with the provided style ID from the confirmation modal. If the map is already live, any changes will be visible once save is clicked and confirmed.



// create a new map with custom style IDconst map = Radar.ui.map({  container: 'map',  style: '<CUSTOM_STYLE_ID>',});