Maps and Browser Compatibility

After you have set up an Interactive Map, you can now improve its functionality with older browsers.

Compatibility

Modern mapping software is often not compatible with older browsers without modification. Because this represents a significant amount of traffic for large websites, we have placed a focus on making it easy to fallback to different mapping software, and have worked to make all of our librararies compatible with older browsers. While this is something that sets us apart from our competitors, it is not without its challenges. As the world moves on from IE and its like, so too are the mapping software projects themselves. We will do our best to keep this page up to date with those changes, and maintain support for as long as possible. If you notice any breaking changes, or find browser specific fixes, please let us know in the forums.

In our tests of US traffic, using MapLibre with Slpy JS Polyfilled and openlayersFallback and rasterFallback set:

MapLibre GL JS - 94% Supported
OpenLayers Legacy Fallback (Vector) - 5%
OpenLayers Legacy Fallback (Raster) - 1%

Polyfills

Polyfills enables backwards compatibility for features not found in older browsers. Inlcude the below lines in your <head>, and before any other script includes.

Polyfilled for Slpy JS

For Slpy JS users we provide a polyfilled version with automatic failover from Maplibre to OpenLayers.

<script src="https://api.slpy.com/lib/slpy/latest/slpy.polyfilled.js"></script>

Polyfills for custom code

For users not using the Slpy JS library, we provide a file with all necessary polyfills that can enable your custom code to run with our services.

<!-- The polyfills below are only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://api.slpy.com/lib/slpy/latest/slpy.polyfills.js"></script>

OpenLayers Legacy

If you are using OpenLayers, you can further increase your browser compatibility by using our legacy version of Openlayers that has been compiled for older browsers.

For Slpy JS users, this will be automatically loaded if using MapLibre with the slpy.settings.openlayersFallback enabled as outlined in the next section.

<script src="https://api.slpy.com/lib/ol/v7.4/ol.legacy.min.js"></script>

MapLibre Failover

*Slpy JS Only

NOTICE If setting slpy.settings.rasterFallback = true, a Pro Subscription is required to use Raster maps. Raster maps incur higher credits than Vector.

For MapLibre users, WebGL2 is used to display smooth and beautiful maps, but WebGL2 is not supported by older browsers. Internet Explorer, as well as many other browsers when not updated, do not support WebGL. To make this work, we test for successful MapLibre-GL loading, and whether WebGl is functional and will perform acceptably. A positive test will return true for slpy.mapState.maplibreLoaded. If WebGL fails, we load the libraries for OpenLayers Legacy by inserting them in to the DOM Head, and run slpy.mapState.openlayersReady() when done. If mapType is "vector", another test will determine if the browser is capable. If that fails, The map type will change from Vector to Raster for increased compatibility or fail if rasterFallback is not set to true. While most code will be a simple copy/paste between the "MapLibre-GL Compatible code" and "OL Compatible Code", the two are seperated for easy use of library specific code. Modify your map with the code below to get started.


		//settings
		slpy.settings.openlayersFallback = true;
		slpy.settings.rasterFallback = true;
		
		//map code
		var map = new slpy.maplibreMap({
						apiKey: 'your_api_key',  // replace with your Api Key
						container: 'map', // id or element
						center: ['-0.0', '0.0'], // [longitude, latitude] start position
						zoom: 3, // starting zoom level
						mapType: "vector"
					});
		
		//code for markers, options, or other functions.
		if (slpy.mapState.maplibreLoaded) {
			
			//MapLibre-GL Compatible code
			
		} else if (slpy.mapState.openlayersLoading) {

			slpy.mapState.openlayersReady = function(newOpenlayersMap) {
				map = newOpenlayersMap;

				//OL Compatible Code
			}
		}