Vector Maps with OpenLayers
Advanced User Setup
For easier setup and pre-built features, consider using OpenLayers with 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 |
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>
.
<!-- Open Layers CSS -->
<link href="https://api.slpy.com/lib/ol/latest/ol.css" rel="stylesheet">
Item | Description |
---|---|
Open Layers | Open Source library for displaying vector maps. |
Font-Awesome | Vector icon library for showing Points of Interest icons |
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>
<!-- Open Layers Mapbox Style -->
<script src="https://api.slpy.com/lib/olms/latest/olms.js"></script>
Item | Description |
---|---|
Open Layers | Open Source library for displaying vector maps. |
Open Layers Mapbox Style | OpenLayers developed plugin for using Mapbox/Maplibre GL styles. |
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>
<!-- Open Layers CSS -->
<link href="https://api.slpy.com/lib/ol/latest/ol.css" rel="stylesheet">
<!-- Open Layers -->
<script src="https://api.slpy.com/lib/ol/latest/ol.js"></script>
<!-- Open Layers Mapbox Style -->
<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"></div>
<script type="text/javascript">
//settings
var apiKey = 'your_api_key';
var targetDivId = 'map';
mapLanguage = 'en';
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 = new ol.View({
center: ol.proj.fromLonLat(center),
zoom: startZoom,
maxZoom: 20
});
var map = new ol.Map({
layers: [new ol.layer.VectorTile({
declutter: true,
source: new ol.source.VectorTile({
maxZoom: 15,
tileSize: 512,
renderMode: 'hybrid',
attributions: '© <a href="https://www.slpy.com">Slpy</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
format: new ol.format.MVT(),
url: 'https://api.slpy.com/v1/vector/'+mapLanguage+'/{z}/{x}/{y}.pbf?key=' + apiKey
}),
style: styleFunction(ol.style, view, targetDivId)
})],
target: targetDivId,
view: view
});
olms.apply(map, "https://www.slpy.com/style/slpy-mgl-style.json?key=" + apiKey);
</script>
</body>
</html>
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.
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.