Raster Maps with OpenLayers

Using Slpy JS

If you don't have a specific need for Raster Maps, please consider our more modern Vector Tiles API.

*Pro Subscription Required

OpenLayers

OpenLayers is an open-source library that has a large community of developers and a wide range of supported formats and data sources.

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

Use the code below for a quick and easy setup.

NOTICE (Breaking): The latest branch is continuously updated with the newest tested versions. A best effort is made to maintain legacy compatibility with previous versions, but you may consider self hosting.

CSS Styling

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

<!-- Open Layers CSS -->
<link href="https://api.slpy.com/lib/ol/latest/ol.css" rel="stylesheet">
<link href="https://api.slpy.com/lib/slpy/latest/slpy-style.css" rel="stylesheet">

Item	Description
Open Layers	Open Source library for displaying maps.
Slpy-Style	A basic CSS file for map class, notices, markers, and popups

JS Libraries

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

<!-- Open Layers -->
<script src="https://api.slpy.com/lib/ol/latest/ol.js"></script>
<script src="https://api.slpy.com/lib/slpy/latest/slpy.js"></script>

Item	Description
Open Layers	Open Source library for displaying maps.
Slpy-map	Configures settings for OpenLayers and simplifies adding features

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>
  <!-- Open Layers CSS -->
  <link href="https://api.slpy.com/lib/ol/latest/ol.css" rel="stylesheet">
  <link href="https://api.slpy.com/lib/slpy/latest/slpy-style.css" rel="stylesheet">

  <!-- Open Layers -->
  <script src="https://api.slpy.com/lib/ol/latest/ol.js"></script>
  <script src="https://api.slpy.com/lib/slpy/latest/slpy.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 mapType = 'raster';
   		
   		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 view = getView(center);
   		var map = new slpy.openlayersMap({
			mapType: mapType,
			apiKey: apiKey,
			container: targetDivId,
			center: center,
			zoom: startZoom
		});
    </script>
</body>
</html>

Item	Description
apiKey	The key created on your Account page after you login to Slpy.
targetDivId	Id name you used in your map div. You can change the id, but it should always have a class of "map".
mapType	'vector' or 'raster'. See the Vector Map page for setting up Vector.
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.
map	Your map instance for OpenLayers. See their documentation for further customization.
Style sizing	Style your map class with the appropriate width and height.