@versatiles/style

This library provides everything you need to build a map style.

You can use it in the browser:

<html>
  <head>
    <script src="https://tiles.versatiles.org/assets/lib/versatiles-style/versatiles-style.js"></script>
  </head>
  <body>
    <!-- ... -->
    <script>
      const style = VersaTilesStyle.colorful();
      // ...
    </script>
  </body>
</html>

or in Node.js:

npm i @versatiles/style

import { colorful } from '@versatiles/style';
// OR: const { colorful } = require('@versatiles/style');
const style = colorful();

You probably want to use one of the following functions:

Generate a style for OpenStreetMap data:

To generate a style from scratch you can use on of the prepared style functions:

Each function accepts optional StyleBuilderOptions as argument to customize the style.

Example:

import { colorful } from 'versatiles-style';
const style = colorful({
  baseUrl: 'https://tiles.example.org',
  recolor: {
    blend: 0.5,
    blendColor: '#FFF', // make all colors lighter
  }
});

Guess a style based on a TileJSON:

To guess a style from a TileJSON you can use guessStyle. This function needs a TileJSONSpecification and an optional GuessStyleOptions object. Example:

import { guessStyle } from 'versatiles-style';
const style = guessStyle(tilejson);

Please help us to improve this library:

This library is used in quite some projects of the VersaTiles ecosystem but it is still in an early stage. We are always looking for feedback, contributions, ideas, bug reports and help with the documentation.

If you have any suggestions, please open an issue or a pull request on GitHub.

If you want to know more about the VersaTiles project, please visit versatiles.org.