Map Settings

After creating an Interactive Map, you can now customize its functionality and control its content.

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
});

Item	Description
apiKey	Sign up or Log in, then create a Key from your account page.
targetDivId	Id name you used for your map's DIV container. You can change the id, but it should always have a class of "map".
mapType	OpenLayers only - loads a 'vector' or 'raster' tiles map.
language	The language all regions of the map will be displayed in if available. See below for supported list.
Latitude and Longitude	The coordinates of where you want to center your map on loading. See our Geocoding page for help.
startZoom	Zoom level, ranging from 0-20. 0 is the whole world, and 20 is an individual house.

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.

Software	Method
Slpy JS	Use the mapLanguage variable.

Item	Description
intl	Language is in native language of viewed map area.
ar	Arabic العربية
bn	Bengali বাংলা
de	German Deutsch
en	English English
es	Spanish Español
fr	French Français
el	Greek ελληνικά
hi	Hindi हिन्दी, हिंदी
hu	Hungarian Magyar
id	Indonesian Bahasa Indonesia
it	Italian Italiano
ja	Japanese 日本語 (にほんご)
ko	Korean 한국어
nl	Dutch, Flemish Nederlands, Vlaams
pl	Polish Język Polski, Polszczyzna
pt	Portuguese Português
ru	Russian русский
sv	Swedish Svenska
tr	Turkish Türkçe
vi	Vietnamese Tiếng Việt
zh	Chinese 中文 (Zhōngwén), 汉语, 漢語

Filter Features

To hide unneeded content features and points of interest from our Vector maps, you can use the mapFilter setting when initializing the map or through the global variable. Raster maps not supported.

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

//initialize map code

Item	Description
major	label (neighborhoods and large shopping areas or buildings), airport, college, golf, park
high	aerialway, airfield, attraction, cinema, city, department, ferry, grocery, hospital, museum, park2, station, town, village, zoo
mid	america-football, bank, building, campsite, dam, embassy, fire-station, fuel, furniture, garden, hardware, library, lodging, medical, parking, parking-garage, pharmacy, place-of-worship, police, post, religious-christian, religious-jewish, religious-muslim, school, theatre, town-hall, water
low	bicycle, bus, telephone, toilets, information
detail	atm, drinking_water, shower, monument, viewpoint, subway_entrance
other	This is all uncategorized points of interest that do not fall into one of the levels below.

Scroll Lock

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 scrolling being captured by the map.

Use after you have initialized the map.

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

slpy.setInteractionOnFocus(targetDivId, map);

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

mapState.maplibreLoaded (Boolean)	Changes to true when maplibreMap has successfully loaded in a compatible browser or environment.
mapState.openlayersLoaded (Boolean)	Changes to true when openlayersMap has successfully loaded in a compatible browser or environment.
mapState.openlayersLoading (Boolean)	Changes to true if settings.openlayersFallback is true and MapLibre failed to load resulting in failover to Openlayers.
mapState.openlayersReady (Function)	In failover situation OpenLayers will load asynchronously. You can create a callback function to properly load a map variable and run code.
mapState.mapStyleUrl (String)	The current map style url, updated with options as the map is loaded or functions are called.
mapState.oldIe (Boolean)	Vector maps are not supported on the user browser when set to true.
mapState.aerialImageryOn (Boolean)	Changes to true when Aerial or Satellite Imagery is currently being used.
mapState.streetLevelOn (Boolean)	Changes to true when Mapillary street level view is currently being used.
settings.openlayersFallback (Boolean)	If using slpy.polyfilled.js, you can set to true to failover to OpenLayers when Maplibre Gl is not compatible.
settings.rasterFallback (Boolean)	If using slpy.polyfilled.js, you can set to true to failover to OpenLayers with Raster maps for Pro Plan users.
settings.mapFilter (String)	Global setting for the language preferred for Autocomplete.
settings.mapFilter (Array)	Global setting for the map filtering option detailed below.
settings.apiKey (String)	Global setting for the API Key, set when initializing the map.
openlayersParts (Object)	When using OpenLayers, we expose the below objects for advanced users. "view" "controls" "interactions"
mapLibraries (Object)	Slpy JS creates and exposes a new object from available window objects or imports in modules. When importing in modules, the object only contains necessary parts for Slpy operation. "ol" OpenLayers "olms" ol-mapbox-style "maplibregl" Maplibre-GL JS