Mapilion - Vector and Raster Map Tiles

FREEMIUM
By Robin | Updated 23 days ago | Mapping
Popularity

8.9 / 10

Latency

214ms

Service Level

100%

Followers: 1
Resources:
Product Website Terms of use
API Creator:
avatar
Robin
boldtrn
Rate API:
Log In to Rate API

README

Mapilion provides you application with Vector Tiles, Raster Tiles, and Hillshading Tiles. You can show these maps on websites, mobile apps, GIS, or any other mapping application. There are no restrictions on how to use these tiles, you can use them for navigation, asset tracking and private applications.

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 '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
})

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": "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

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 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('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);
Rating: 5 - Votes: 1