Vector Maps with MapLibre GL JS
Using Slpy JS
MapLibre
MapLibre is an open source project that was forked from Mapbox GL JS. It is our preferred mapping program for interactive maps due to its modern design and ease of use.
Link | Description |
---|---|
Homepage | The Projects home for GL JS |
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.
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>
.
Item | Description |
---|---|
MapLibre | Software for displaying vector maps using WebGL. |
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.
Item | Description |
---|---|
MapLibre | Software for displaying vector maps using WebGL. |
Slpy-map | Configures settings for MapLibre and simplifies adding features |
Full Example
Install Slpy and MapLibre GL JS
Install Slpy and MapLibre through NPM or see their Maplibre Github and Slpy JS Github for more options.
Add CSS Files
Include or import the Maplibre and Slpy CSS files from your node_modules folder.
Example Input JS
Add the following code to your main js input file for your bundler.
Item | Description |
---|---|
apiKey | Sign up or Log in, then create a Key from your account page. |
container | 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. |
center | The coordinates of where you want to center your map on loading. See our Geocoding page for help. |
zoom | Zoom level, ranging from 0-20. 0 is the whole world, and 20 is an individual house. |
map | Your map instance for MapLibre. 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.