Mapilion - Vector and Raster Map Tiles

Door Robin | Bijgewerkt 2 years ago | Mapping

8.9 / 10





Health Check


Volgers: 4
Productwebsite Gebruiksvoorwaarden
API maker:
Rapid account: Robin
Log in om API te beoordelen
Beoordeling: 5 - Stemmen: 1


Vector Tiles

Vector tiles can be consumed with most vector tile map libraries that support the Mapbox Vector Tile standard.

We provide a few pre-configured styles for you that allow you to start fast, here is an example using the Maplibre-GL-JS library:

import { Map } from ''

const rapidAPIKey = "[YOUR_RAPID_API_KEY]"

const map = new Map({
  container: "map",
  style: `${rapidAPIKey}`,
  center: [1, 45],
  zoom: 3

Write your own style

For more advanced usecases we recommend to write your own style. If you write your own style.json you can insert vector tiles like this:

"sources": {
      "openmaptiles": {
         "type": "vector",
         "url": "[YOUR_RAPID_API_KEY]" ,
"glyphs": ""{fontstack}/{range}?rapidapi-key=[YOUR_RAPID_API_KEY]",

Since Mapilion is following the OpenMapTiles standard you can use the above snippet in any OpenMapTile compatible style. You can find many different styles like:

Raster Tiles

Raster Tiles can be consumed by most map libraries, like Leaflet. For Leaflet you can use raster tiles like this:

 var mapilion = L.tileLayer('{z}/{x}/{y}?rapidapi-key=[YOUR_RAPID_API_KEY]', {
   attribution: '© <a href="">Mapilion</a> <a href="" target="_blank">© OpenMapTiles</a> <a href="" target="_blank">© OpenStreetMap contributors</a>',

 var map ='map', {
   center: [40, -30],
   zoom: 3,
   minZoom: 0,
   maxZoom: 18,
   layers: [mapilion]

If you would like to get raster tiles of a custom style, please send us a request, we might be able to provide you with your custom style.

Hillshading Raster Tiles

Hillshading tiles are semi transparent tiles that can be used as an overlay over a regular map. The overlay creates the impression of mountains and can be especially useful for outdoor maps. We provide a version 1 and version 2, depending on the use case either of these might work better for you. We would recommend to start with version 2 as this is an improved version over version 1.

With Leaflet you can use Hillshading like this:

 var hillshading = L.tileLayer('{z}/{x}/{y}?rapidapi-key=[YOUR_RAPID_API_KEY], {
   opacity: 0.7,
   attribution: '© <a href="">Mapilion</a>',
   maxNativeZoom: 12,
   bounds: L.latLngBounds(L.latLng(72, -180), L.latLng(-60, 180))

// Map
 var map ='map', {
   center: [40, -30],
   zoom: 3,
   minZoom: 0,
   maxZoom: 14,
   // Define this layer, see raster tile description above
   layers: [osmBright]

 var basemaps = {
   "OSM Bright": osmBright,
 var overlaymaps = {
   "Mapilion Hillshading V2 Opacity 70%": hillshading,

 // Add base layers
 L.control.layers(basemaps, overlaymaps, {
   collapsed: false