Playground: Basic Style

How to style a simple OSM map.

MapLibre GL JS use special style objects that define the appearance of your map. These style object are quite complex JavaScript objects that define data sources, layers, colors, fonts, symbols, etc. (If you later want to really fine tune your map you can find the complete specification here: MapLibre Style Spec)

To make it easier to work with these map styles, we've developed the JavaScript library "versatiles-style" to generate styles very fast and efficient in the frontend or the backend.

Based on our frontend specification, the library should be ready to use under:

• /assets/lib/versatiles-style/versatiles-style.js

Loading our library adds the global variable VersaTilesStyle to the JavaScript environment. To generate a style ready to use simply run:

const style = VersaTilesStyle.colorful(); // <- generates a style

new maplibregl.Map({
    style // <- use the style
    container: "map",
})

We also provide other functions to generate base styles, like colorful, eclipse, graybeard and neutrino.

All these style functions accept optional properties to fine tune the styles, like:

{
   baseUrl: string; // host of your map server, like "https://example.org"
   bounds: [number, number, number, number]; // bounding box of the initial view
   colors: Partial<StyleBuilderColors>; // to change individual colors
   fonts: Partial<StyleBuilderFonts>; // to change the default fonts
   glyphs: string; // to change the url template of the fonts
   hideLabels: boolean; // to hide all labels on the map
   language: Language; // to switch the default language of all labels
   recolor: RecolorOptions; // to change all colors in the map
   sprite: SpriteSpecification; // to load different symbols
   tiles: string[]; // to change the tile source
}

For example, the following code will generate a map style without labels and tint it green, making it look like the 'Matrix', which will make people from the '90s think your map looks cool.

const style = VersaTilesStyle.colorful({
    hideLabels: true,
    recolor: {
        invertBrightness: true,
        tintColor: '#0A0',
        tint: 1,
    },
});

To learn more about all the options provided by "versatiles-style", take a look at the API documentation, e.g.:

• StyleBuilderOptions for all options provided by the style functions.
• RecolorOptions for the property recolor to change overall brightness, contrast, saturation, gamma, etc.
• StyleBuilderColors for the property colors to change individual colors.