Basic Settings

Here is an overview of the variables we use in our documentation that customize settings in the Slpy JS library.

//settings
let apiKey = 'your_api_key';
let targetDivId = 'map';
let mapType = 'vector';
let mapLanguage = 'en';
let latitude = '0.0'; 
let longitude = '-0.0'; 
let startZoom =  '3';

//initialize map code
const map = new slpy.maplibreMap({
	apiKey: apiKey,
	container: targetDivId,
	center: [longitude, latitude],
	zoom: startZoom,
	mapType: mapType,
	language: mapLanguage
});

Global Variables

Slpy exposes global variables for customizing settings and montioring the status of functions in the Slpy JS library.

//user configurable

slpy.settings.openlayersFallback: false
slpy.settings.rasterFallback: false
slpy.settings.language: "en"
slpy.settings.mapFilter: []
slpy.settings.apiKey: ""

//non user configurable

slpy.mapState.maplibreLoaded: false 
slpy.mapState.openlayersLoaded: false
slpy.mapState.openlayersLoading: false
slpy.mapState.openlayersReady: undefined
slpy.mapState.mapStyleUrl: "https://api.slpy.com/style/slpy-mgl-style.json"
slpy.mapState.oldIE: false
slpy.mapState.aerialImageryOn: false
slpy.mapState.streetLevelOn: false

slpy.openlayersParts.view: {}
slpy.openlayersParts.controls: {}
slpy.openlayersParts.interactions: {}

slpy.mapLibraries.ol: undefined
slpy.mapLibraries.olms: undefined
slpy.mapLibraries.maplibregl: undefined

Supported Languages

This is a two character code that sets the language used on labels and roads for the map accross the planet. The default language is 'en' for English. In maps, you can use 'intl' for international labeling that uses the native language of the region being viewed.

Filter Features

To hide unneeded content features and points of interest from our Vector maps. Raster maps not supported.

Slpy JS

For those configuring maps with Slpy JS, you can use the mapFilter setting when initializing the map or through the global variable.

//settings
slpy.settings.mapFilter = ['major', 'other'];

//initialize map code

Custom Setup

For custom software setups, our points of interest features are stored in the "amenity-points" source layer, and are identified by the type "feature" with values like "airport" or "subway_entrance". Look at the mapFilter descriptions above for a full list, or view our Github Slpy Styles Page for more information. You are free to modify the design as you wish within the bounds of our design license.

Scroll Lock

With Slpy JS you can use a helpful feature that prevents interacting with the map unless the user has clicked on it. It allows you to have a full width map on a page, but not have to worry about tight desktop or mobile pages where scrolling might be captured by the map.

Slpy JS only. Use after you have initialized the map.

//settings
//initialize map code
//after map code

slpy.setInteractionOnFocus(targetDivId, map);

MapLibre (3D, etc.)

If you are using MapLibre for your maps, use theses settings to modify it's functionality, design, and layout.

Slpy JS

For those configuring MapLibre with Slpy JS, you can use include these settings when using maplibreMap.

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

	//Slpy settings
	mapStyle: '3d',
	mapTransform: 'saturate,120', 

	//Maplibre GL JS settings
	navControl: 'top-left', 
	hash: true

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

Custom Setup

For those configuring MapLibre with a custom setup, pass the options using the defaultGLOptions object when initializing the Map. Use the mapStyleURL to configure the style.

//settings
var mapStyleUrl = 'https://api.slpy.com/style/slpy-mgl-style.json?key='+apiKey+'&lang='+mapLanguage+'&style=2d'+'&transform=default';

var  defaultGlOptions = {
		container: targetDivId,
		style: mapStyleUrl, // style URL.  See Notes for more options.
		center: center,
		zoom: startZoom,
		antialias: true,
		attributionControl: false
	};

//initialize map code

Next Steps

Customize and add features to your new map