Documentation

Vector Maps with OpenLayers

Using Slpy JS

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

Getting Started

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

CSS Styling

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

<!-- OL 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
OpenLayers Open Source library for displaying vector 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.

<!-- OL JS -->
<script src="https://api.slpy.com/lib/ol/latest/ol.js"></script>
<script src="https://api.slpy.com/lib/slpy/latest/slpy.js"></script>
<script src="https://api.slpy.com/lib/olms/latest/olms.js"></script>
Item Description
Open Layers Open Source library for displaying vector maps.
Slpy-map Configures settings for MapLibre and simplifies adding features
Open Layers Mapbox Style OpenLayers developed plugin for using Mapbox/Maplibre GL styles.

Full Example

<!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>
  <!-- OL 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">

  <!-- OL JS -->
  <script src="https://api.slpy.com/lib/ol/latest/ol.js"></script>
  <script src="https://api.slpy.com/lib/slpy/latest/slpy.js"></script>
  <script src="https://api.slpy.com/lib/olms/latest/olms.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">
		//map code
   		const map = new slpy.openlayersMap({
			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
		});
    </script>
</body>
</html>

Install Slpy, Open Layers, and OL-Mapbox-Style

Install through NPM or see the OpenLayers Github, Slpy JS Github, or OL-Mapbox-Style Github for more options.

npm install slpy ol ol-mapbox-style

Add CSS Files

Include or import the OpenLayers and Slpy CSS files from your node_modules folder.

import 'slpy/dist/css/slpy-style.css'
import 'ol/ol.css'

Example Input JS

Add the following code to your main js input file for your bundler.

Note: Specifying the index is necessary until MapLibre and OL-Mapbox-Style better support treeshaking.

import { slpy } from 'slpy/dist/index.openlayers.js';

const map = new slpy.openlayersMap({
			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
		});
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".
mapType 'vector' or 'raster'. See the Raster Map page for setting up Raster.
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.

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.

Markers & Popups

  • Add markers to your points
  • Include popups on your page for more info.
  • Highlight points on your map.
  • Helper functions

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.