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