Our Style

About

We spent years creating our own unique map style, and designed it to fit in seemlessly with most business needs, while being instantly navigable to the average user. We have translated it into native MapLibre, OpenLayers, and CartoCSS style formats. Although it has branched quite far from its orignal beginnings, we wish to thank and acknowledge the work of the OpenStreetMap Carto project and its many contributors.

The Code

While we hope that our default style will work for most people, you are free to modify the design as you wish within the bounds of our Style's License. We'd love to see what you can do with it, so please share in the Community Styles Forum!

Style Transforms

If you are using Vector maps with MapLibre or Mapbox GL JS software, either with or without Slpy JS, then you can easily transform the look of your map with our transform parameter. Similar to CSS filters, it supports "contrast", "brightness", "hue-rotate", "invert", "sepia", "saturate", and "grayscale". On top of that, you can combine multiple transforms and percentages to get a unique look.

Format

The format is a lowercase comma separated string, with a filter name followed by a percentage integer that is a multiple of 5 and between 0 to 200. If a transform is not followed by a percentage, the percentage is assumed to be 100.

Slpy JS

You can either set the transform when initializing the page inside the maplibreMap or openlayersMap options, or you can use the setTransform() function after the map has loaded to change the style transform dynamically through a button or at a set time for night mode.

Option 1: Set on map load

//settings
//initialize map code
var map = new slpy.maplibreMap({
	mapTransform: 'sepia,40'
	apiKey: apiKey,
	container: targetDivId,
	center: center,
	zoom: startZoom,
	mapType: mapType
});

Option 2: Change after map load

//settings
//initialize map code

slpy.setTransform('sepia,40', map);

Custom Setup

For those configuring MapLibre with a custom setup, add the transform parameter to the mapStyleURL.

//settings
var mapStyleUrl = 'https://api.slpy.com/style/slpy-mgl-style.json?key='+apiKey+'&transform=sepia,40';

//initialize map code

CSS Filters

Thanks to the power of most modern browsers, Raster maps and other software users can still dynamically change their styles through CSS. The "filter" function in CSS enables an easy way to implement a night time design, change contrast and brightness, add greyscale for printing, or change the colors with hue-rotate. Visit the Mozilla page for a full list of filter functions, or check out some of our examples on this page.

Night Mode

Use the "invert" transform filter function to add Night mode. Play around with the percentage to achieve your desired look. Combine with brightness, saturate, or greyscale to further tweak the appearance.

Style Transform for Vector

invert,90

CSS for Raster

<style>
    .map {
        width: 100%;
        height: 400px;
		filter: invert(90%);
    }
</style>

Grayscale

The "grayscale" transform filter function can be used for print media. Use "saturate(0%)" for a similar effect.

Style Transform for Vector

grayscale,100

CSS for Raster

<style>
    .map {
        width: 100%;
        height: 400px;
		filter: grayscale(100%);
    }
</style>

Change Colors

Use the "invert" transform filter function to alter the map colors. Also try saturate at over 100% for more vibrant color, or combine with brightness and contrast to tweak the colors further.

Style Transform for Vector

hue-rotate,90

CSS for Raster

<style>
    .map {
        width: 100%;
        height: 400px;
		filter: hue-rotate(90deg);
    }
</style>

Next Steps

Customize and add features to your new map