Vector Maps with Mapbox Gl JS

Advanced User Setup

For easier setup and pre-built features, consider using MapLibre with Slpy JS

Mapbox vs MapLibre

The Bad

Mapbox GL JS started out as a fantastic mapping software with an open BSD-3 license. Starting after v1.13.x, the license has been restricted to only allow use with Mapbox's services, and also now incurs a charge for each load.

The Good

MapLibre was forked from Mapbox GL JS and has continued development with a great community. It is our preferred mapping program for interactive maps, and is largely compatible with existing code for Mapbox GL JS.

Use MapLibre

Mapbox 1.13.x

For those who aren't able to switch to MapLibre yet, this page will get your current software up and running with the Slpy API.

Link	Description
Github	Source code

Use the code below for a quick and easy setup.

Notice Our "latest" branch is updated with the newest tested versions. A best effort is made to maintain legacy compatibility with previous versions, but you may consider self hosting or using a CDN.

CSS Styling

Copy-paste the stylesheet <link> lines below into your <head>.

<!-- Mgl CSS -->
<link href="https://api.slpy.com/lib/mbgl/v1.13.0/mapbox-gl.css" rel="stylesheet">

Item	Description
Mapbox	Software for displaying vector maps using WebGL.

JS Libraries

Copy-paste the javascript <script> lines below into your <head> or into the <body> before the map loading scripts.

<!-- MglJS -->
<script src="https://api.slpy.com/lib/mbgl/v1.13.0/mapbox-gl.js"></script>

Item	Description
Mapbox	Software for displaying vector maps using WebGL.

Attribution

The Slpy Style already includes the links below.
Our maps are built with the help of thousands of public and private sources and open projects. Allowing it's display satisfies their required attributions.

© <a href="https://www.slpy.com">Slpy</a> 
© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors

Example Config

Everything needed to make a functional map. Check out the Map Settings page for additional features and customization

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
  <title>Hello World!</title>
  <!-- Mgl CSS -->
  <link href="https://api.slpy.com/lib/mbgl/v1.13.0/mapbox-gl.css" rel="stylesheet">
  
  <!-- MglJS -->
  <script src="https://api.slpy.com/lib/mbgl/v1.13.0/mapbox-gl.js"></script>
  </head>
<body>
    <style>
    .map {
        width: 100%;
        height:400px;
    }
   </style>
   <div id="map" class="map"></div>
   <script type="text/javascript">
   		//settings
		var apiKey = 'your_api_key';
   		var targetDivId = 'map';
		var mapLanguage = 'en';
   		var mapStyleUrl = 'https://api.slpy.com/style/slpy-mgl-style.json?key='+apiKey+'&lang='+mapLanguage;
   		
   		var latitude = '0.0'; //latitude of your map center
   		var longitude = '-0.0'; //longitude of your map center
   		var startZoom =  '3';
		
   		//map code
   		var center = [longitude,latitude];
		var defaultGlOptions = {
				container: targetDivId,
				style: mapStyleUrl, // style URL.  See Notes for more options.
				center: center,
				zoom: startZoom,
				antialias: true,
				attributionControl: false
			};
		
		var map = new mapboxgl.Map(defaultGlOptions)
			.addControl(new mapboxgl.AttributionControl({
				compact: false
		}))
    </script>
</body>
</html>

*See below for parameter options and configuration descriptions.

Variable Notes

Item	Description
apiKey	Sign up or Log in, then create a Key from your account page.
targetDivId	Id name you used in your map div. You can change the id, but it should always have a class of "map".
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.
Style sizing	Style your map class with the appropriate width and height.

Next Steps

Customize and add features to your new map

Settings & Features

Common settings and Language Support.
Content Filtering
Satellite, Street Level, and other features.
Compatibility for older browsers.

Map Design

Customize your maps look
Night Mode, Greyscale.
Get the Slpy Style source code.

Search & Geocoding

Add a search bar to your map.
Translate addresses to coordinates
Search for points of interest.

Documentation