Documentation

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


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.