Skip to content

Style definition

SmartMaps GL offers a variety of predefined styles that can be easily applied to your maps. This documentation provides an overview of the available styles and how to use them in your projects.

At any time, you can create your own style.json, also based on the SmartMaps style.json if desired. The style.json defines the appearance of the map by specifying how the various layers of the vector tiles should be rendered. This includes properties such as:

  • Fill colors and outline colors for polygons
  • Line colors and widths for lines
  • Symbols and labels for points
  • Visibility and zoom levels for each layer

By adjusting the style.json, the map's appearance can be flexibly adapted to your own requirements without changing the underlying vector data. For example, certain layers can be shown or hidden, colors can be changed, or custom symbols can be used. The separation of data and styling enables versatile design possibilities based on the SmartMaps vector tile schema.

Available Styles

Light (Default Style)

The light style is the default style in SmartMapsGL. It features a clean design that is suitable for most mapping applications. This style emphasizes readability and clarity, making it easy for users to navigate and understand the map. To use the light style, simply initialize your map without specifying a style: 

const map = new smartmapsgl.Map({
    container: "map",
    style: smartmapsgl.MapStyle.LIGHT
    // Other map options
});

Dark

The dark style provides a sleek and sophisticated look for your maps. It is ideal for low-light environments or for creating a unique visual aesthetic. The dark background and contrasting colors make map features stand out and create an immersive user experience. To apply the dark style, use the following code: 

const map = new smartmapsgl.Map({
    container: "map",
    style: smartmapsgl.MapStyle.DARK
    // Other map options
});

Grey

The grey style offers a subtle and minimalistic design. It uses shades of grey to represent map features, creating a neutral and unobtrusive visual appearance. This style is suitable for situations where the map should not be the primary focus but still provide essential information. To use the grey style, specify the style file in the map options: 

const map = new smartmapsgl.Map({
    container: "map",
    style: smartmapsgl.MapStyle.GREY
    // Other map options
});

Essential

The essential style features a modern design that is suitable for most mapping applications. This style emphasizes readability and clarity, making it easy for users to navigate and understand the map. To apply the essential style, use the following code: 

const map = new smartmapsgl.Map({
    container: "map",
    style: smartmapsgl.MapStyle.ESSENTIAL
    // Other map options
});

Accessible

The accessible style is optimized for users with visual impairments or color vision deficiencies. It uses high-contrast colors and clear labeling to ensure that map features are easily distinguishable. This style adheres to accessibility guidelines and improves the usability of your maps for a wider audience. To use the accessible style, specify the style file in the map options: 

const map = new smartmapsgl.Map({
    container: "map",
    style: smartmapsgl.MapStyle.ACCESSIBLE
    // Other map options
});

Satellite

The satellite style provides a realistic satellite imagery view of the map. It combines high-resolution satellite images with map labels and features to create a visually stunning and informative representation of France, Germany and Switzerland. This style is ideal for applications that require a realistic depiction of geographic areas. To apply the satellite style, use the following code: 

const map = new smartmapsgl.Map({
    container: "map",
    style: smartmapsgl.MapStyle.SATELLITE
    // Other map options
});

Automatic Style Switching

SmartMaps GL JS automatically adapts to the user's preferred color scheme by switching between light and dark map styles based on the operating system's settings. This feature enhances the user experience by providing a seamless integration with the device's visual theme.

To enable automatic style switching based on the operating system's color scheme, you don't need to make any changes to your code. SmartMaps GL JS handles this functionality seamlessly behind the scenes. Simply initialize your map as usual, and the appropriate style will be applied based on the user's device settings.

const map = new smartmapsgl.Map({
    apiKey: "[YOUR API KEY]",
    container: "map",
    center: { lat: 49.02164948779226, lng: 8.439330018049352 },
    zoom: 12,
    style: smartmapsgl.MapStyle.AUTO
});

By using smartmapsgl.MapStyle.AUTO as the style option, SmartMaps GL JS will automatically determine the appropriate style based on the operating system's color scheme.

Customizing Styles

In addition to the predefined styles, SmartMaps GL allows you to customize and create your own styles. You can modify existing styles or build new ones from scratch using the Maplibre GL style specification. Refer to the Maplibre GL documentation for more information on creating custom styles.