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 'https://cdn.skypack.dev/maplibre-gl'
const rapidAPIKey = "[YOUR_RAPID_API_KEY]"
const map = new Map({
container: "map",
style: `https://mapilion-vector-and-raster-map-tiles.p.rapidapi.com/rapid-api/stylejson/osm-bright?rapidapi-key=${rapidAPIKey}`,
center: [1, 45],
zoom: 3
})
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": "https://mapilion-vector-and-raster-map-tiles.p.rapidapi.com/rapid-api/tilejson/v3?rapidapi-key=[YOUR_RAPID_API_KEY]" ,
}
},
"glyphs": ""https://mapilion-vector-and-raster-map-tiles.p.rapidapi.com/rapid-api/fonts/{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 can be consumed by most map libraries, like Leaflet. For Leaflet you can use raster tiles like this:
var mapilion = L.tileLayer('https://mapilion-vector-and-raster-map-tiles.p.rapidapi.com/rapid-api/raster/kurviger-liberty/{z}/{x}/{y}?rapidapi-key=[YOUR_RAPID_API_KEY]', {
attribution: '© <a href="https://mapilion.com/attribution">Mapilion</a> <a href="http://www.openmaptiles.org/" target="_blank">© OpenMapTiles</a> <a href="http://www.openstreetmap.org/about/" target="_blank">© OpenStreetMap contributors</a>',
});
var map = L.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 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('https://mapilion-vector-and-raster-map-tiles.p.rapidapi.com/rapid-api/hillshades/v2/{z}/{x}/{y}?rapidapi-key=[YOUR_RAPID_API_KEY], {
opacity: 0.7,
attribution: '© <a href="https://mapilion.com/attribution">Mapilion</a>',
maxNativeZoom: 12,
bounds: L.latLngBounds(L.latLng(72, -180), L.latLng(-60, 180))
});
// Map
var map = L.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
}).addTo(map);