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

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
• All Software

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

//settings
//initialize map code

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

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

//initialize map code

3d Buildings

If you are using vector maps, you can show 3d buildings that pop off the map.

• Slpy JS
• All Software

//settings
//initialize map code
const map = new slpy.maplibreMap({

	//Slpy settings
	mapStyle: '3d',

	//Required Settings
	apiKey: 'your_api_key',
	container: 'map',
	center: ['-0.0', '0.0'],
	zoom: 3
});

//settings
var mapStyleUrl = 'https://api.slpy.com/style/slpy-mgl-style.json?key='+apiKey+'&style=3d';

//initialize map code

invert,90

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

grayscale,100

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

hue-rotate,90

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