Skip to content

Instantly share code, notes, and snippets.

Last active Mar 24, 2022
What would you like to do?
Example and helper script for using the tiles provided by MapTiles API as a LeafletJS TileLayer
<!DOCTYPE html>
<title>MapTiles API Leaflet Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="" />
<script src=""></script>
<!-- important: copy the maptilesapi.js to your webspace and adjust the src url accordingly. //-->
<script src="maptilesapi.js"></script>
<style type="text/css">
<div id="mymap"></div>
<script type="text/javascript">
var map ='mymap').setView({lon: 2.294694, lat: 48.858093}, 5);
// using the english labeled tiles here
// important: copy the maptilesapi.js to your webspace and replace <YOUR X-RapidAPI-Key> with your X-RapidAPI-Key.
// You can get an api key by signing up and subscribing to a plan at (a free tier for non-commercial use is available)
// important: you have to attribute OpenStreetMap contributors to use the map tiles provided by MapTiles API
L.tileLayer.mapTilesAPI('{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="" target="_blank">OpenStreetMap contributors</a>, @copy; <a href="" target="_blank">MapTiles API</a>'
"use strict";
var maptileskey='<INSERT YOUR X-RapidAPI-Key HERE>';
function callAjax(url, callback) {
var xmlhttp;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
xmlhttp.onloadstart = function(ev) {
xmlhttp.responseType = "blob";
}"GET", url, true);
xmlhttp.setRequestHeader('X-RapidAPI-Key', maptileskey);
L.TileLayer.MapTilesAPI = L.TileLayer.extend({
initialize: function (url, options) {, url, options);
createTile: function (coords, done) {
const url = this.getTileUrl(coords);
const img = document.createElement('img');
img.src = window.URL.createObjectURL(response);
done(null, img);
return img;
L.tileLayer.mapTilesAPI = function (url, options) {
return new L.TileLayer.MapTilesAPI(url, options);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment