Vector Maps with Leaflet

Advanced User Setup

For easier setup and pre-built features, start with our Mapping Walkthrough

Leaflet

Leaflet is a lightweight library that is easy to use and has a small footprint. It has a large number of plugins and third-party libraries.

Link	Description
Homepage	The Projects home
Reference	Information, examples, and plugins
Github	Source code

Leaflet + Maplibre

Leaflet does not support vector tiles or our JSON style out of the box, but can be extended with Maplibre-GL-Leaflet.

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>.

<!-- Leaflet CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" rel="stylesheet">

Item	Description
Leaflet	Library for displaying dynamic maps.

JS Libraries

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
<script src="https://api.slpy.com/lib/mlgl/latest/maplibre-gl.js"></script>
<script src="https://api.slpy.com/lib/mlgl-leaflet/leaflet-maplibre-gl.js"></script>

Item	Description
Leaflet	Library for displaying dynamic maps.
Maplibre-GL-JS	Rendering engine needed for the map style and vector tiles.
Leaflet-Maplibre-GL	Allows rendering from GL style to Leaflet.

Attribution

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>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" rel="stylesheet">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
  <script src="https://api.slpy.com/lib/mlgl/latest/maplibre-gl.js"></script>
  <script src="https://api.slpy.com/lib/mlgl-leaflet/leaflet-maplibre-gl.js"></script>
  </head>
<body>
    <style>
    .map {
        width: 100%;
        height:400px;
    }
   </style>
   <div id="map" class="map rounded-lg border-white"></div>
   <script type="text/javascript">
   		//settings
		var apiKey = 'your_api_key';
   		var targetDivId = 'map';
		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 map = L.map(targetDivId).setView(center, startZoom);
		var gl = L.maplibreGL({
			attribution: '&copy; <a href="https://www.slpy.com">Slpy</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
			style: mapStyleUrl
		}).addTo(map);
    </script>
</body>
</html>

*See below for parameter options and configuration descriptions.

Options & Settings

mapStyleUrl Parameters

Parameter	Description
key	Sign up or Log in, then create a Key from your account page.
lang	Supported 2 character language code.
style	'2d' or '3d' for buildings. Default is 2d buildings for better performance on slower hardware.
transform	Appy style transforms like "saturate", "brightness", "invert", and more as shown on the Map Design page.
filter	Comma (,) separated list of levels for points of interest you want to filter from view. (see below)

Filter Parameter Options

Filter	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 any other level.

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