Vector Maps

Using Slpy JS with MapLibre

Getting Started

Everything needed to make a functional map.

Basic JS Example

<!DOCTYPE html>
<html>
<head>
  <title>Hello World!</title>
  <!-- MapLibre and Slpy CSS -->
  <link href="https://api.slpy.com/lib/mlgl/latest/maplibre-gl.css" rel="stylesheet">
  <link href="https://api.slpy.com/lib/slpy/latest/slpy-style.css" rel="stylesheet">

  <!-- MapLibre and Slpy JS -->
  <script src="https://api.slpy.com/lib/mlgl/latest/maplibre-gl.js"></script>
  <script src="https://api.slpy.com/lib/slpy/latest/slpy.js"></script>
</head>
<body>
   <style>
		#map-container {
			width: 100%;
			height:400px;
		}
   </style>
   
   <div id="map-container"></div>

   <script type="text/javascript">
		//map code
		const map = new slpy.maplibreMap({
			apiKey: 'your_api_key',  // replace with your Api Key
			container: 'map-container', // id or element
			center: ['-0.0', '0.0'], // [longitude, latitude] start position
			zoom: 3, // starting zoom level
		});
   </script>
</body>
</html>

Install Dependencies

Install Slpy and MapLibre through NPM or see their Maplibre Github and Slpy JS Github for more options.

npm install slpy maplibre-gl

Example

App.js
Live code on StackBlitzimport React, { useEffect } from "react";
import slpy from 'slpy'; //may require: import {slpy} from 'slpy' 
import 'maplibre-gl/dist/maplibre-gl.css';
import 'slpy/dist/css/slpy-style.css';

const MapComponent = () => {
  useEffect(() => {
	const map = new slpy.maplibreMap({
	  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
	});
  }, []);

  return <div id="map" style={{ width: "100%", height: "400px" }} />;
};

export default function App() {
  return (
	<div>
	<h1>Slpy+Maplibre in React</h1>
	<MapComponent />
	</div>
  );
}

main.ts
Live code on StackBlitzimport 'zone.js';
import { Component, AfterViewInit } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import {slpy} from 'slpy';
import 'maplibre-gl/dist/maplibre-gl.css';
import 'slpy/dist/css/slpy-style.css';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
	<h1>Slpy+Maplibre in Angular</h1>
	<div id="map" style="width: 100%; height: 400px;"></div>
  `
})
export class AppComponent implements AfterViewInit {
  ngAfterViewInit() {
	const map = new slpy.maplibreMap({
	  apiKey: 'your_api_key', // replace with your Api Key
	  container: 'map', // id or elementpurge_cache
	  center: ['-0.0', '0.0'], // [longitude, latitude] start position
	  zoom: 3 // starting zoom level
	});
  }
}

bootstrapApplication(AppComponent);

App.vue
Live code on StackBlitz<script>
import { onMounted } from 'vue';
import {slpy} from 'slpy';

export default {
  name: 'App',
  setup() {
	onMounted(() => {
	  const map = new slpy.maplibreMap({
		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>

<template>
<div>
  <h1>Slpy+Maplibre in Vue.js</h1>
  <div id="map" style="width: 100%; height: 400px;"></div>
</div>
</template>

<style scoped>
@import 'maplibre-gl/dist/maplibre-gl.css';
@import 'slpy/dist/css/slpy-style.css';
</style>

App.svelte
Live code on StackBlitz<script>
	import { onMount } from 'svelte';
	import { slpy } from 'slpy';
	import 'maplibre-gl/dist/maplibre-gl.css';
	import 'slpy/dist/css/slpy-style.css';

	onMount(() => {
		const map = new slpy.maplibreMap({
			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>

<main>
  <h1>Slpy+Maplibre in Svelte</h1>
  <div id="map" style="width: 100%; height: 400px;"></div>
</main>

<style>
  @import 'maplibre-gl/dist/maplibre-gl.css';
  @import 'slpy/dist/css/slpy-style.css';
</style>

main.ts
Live code on StackBlitzimport { slpy } from 'slpy';
import 'maplibre-gl/dist/maplibre-gl.css';
import 'slpy/dist/css/slpy-style.css';
import './style.css';

document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  <h1>Slpy+Maplibre in Vite+TypeScript</h1>
  <div id="map" style="width: 100%; height: 400px;"></div>
`;

const map = new slpy.maplibreMap({
  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
});

Install Slpy and MapLibre GL JS

Install Slpy and MapLibre through NPM or see their Maplibre Github and Slpy JS Github for more options.

npm install slpy maplibre-gl

Add CSS Files

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

import 'slpy/dist/css/slpy-style.css'
import 'maplibre-gl/dist/maplibre-gl.css'

Example Input JS

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

import { slpy } from 'slpy';

const map = new slpy.maplibreMap({
			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.
container	Id string or container element of your map's Div
center	Center coordinates of your map on loading.
zoom	Zoom level from 0-20, where 0 is planet, and 20 is house level.
map	"slpy.maplibreMap" returns the map instance object for MapLibre.
Styling	Style your map class with the appropriate width and height.

MapLibre GL JS

Our preferred mapping program for interactive maps due to its modern design and ease of use.

Link	Description
Homepage	Project home
Reference	Information, examples, and plugins
Github	Source code

Notice Our "latest" branch is updated with 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.

Troubleshooting

Problem	Description
Blank Map	Your Api Key may not be configured correctly. Open Developer Tools, interact with the map, and look in the Network tab for ".pbf" files not loading with status 200. Click the file and check "Response Headers" for "Reject-Reason:". Example: "Reject-Reason:Bad Referrer: cdpn.io" not matching "codepen.io" in key's whitelist.

Error Codes

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.

Documentation