Mapilion - Vector and Raster Map Tiles

FREEMIUM
Door Robin | Bijgewerkt 2 years ago | Mapping
Populariteit

8.9 / 10

Latency

239ms

Serviceniveau

100%

Health Check

N/A

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

README

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);