MapTiles

FREEMIUM
Verified
Door Support@MapTilesApi | Bijgewerkt 4 days ago | Mapping
Populariteit

9.9 / 10

Latency

140ms

Serviceniveau

100%

Health Check

100%

Terug naar alle tutorials (2)

OpenStreetMap in English in your website using the free Leaflet javascript library

The MapTiles API can be integrated with the free open source javascript library Leaflet JS to display a map on a website.

Quick Start Guide:

  1. Register at RapidAPI (it’s free!)
  2. Subscribe to a plan at https://rapidapi.com/MapTilesApi/api/maptiles/pricing/
  3. Fetch your RapidAPI key (you’ll find it on https://rapidapi.com/MapTilesApi/api/maptiles/ if you are signed in)
  4. Replace YOUR-RAPIDAPI-KEY with your api key (obtained in 3.) in the following code example
  5. Copy the following html, js and css code examples into your website code.

HTML code included in the head of your html docoument

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS reference -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

HTML code to include where the map should be displayed

<div id="map"></div>

CSS to add for the map div:

#map { height: 360px; }

Javascript code to initialize the map (here you’ll have to replace the API key (see 4. above):

var map = L.map('map').setView([51.5, -0.1], 12);
L.tileLayer('https://maptiles.p.rapidapi.com/en/map/v1/{z}/{x}/{y}.png?rapidapi-key=YOUR-RAPIDAPI-KEY', {
attribution: 'Tiles &copy: <a href="https://www.maptilesapi.com/">MapTiles API</a>, Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 19
}).addTo(map);

Test your map in your browser. If the map does not load, please double check that the above javascript code is loaded after the css and js file references in the html head and after the div with the id “map” in the html body code. If you still don’t get the map to load, don’t hesitate to shoot us a mail at support@maptilesapi.com to get help (please include a link to a publicly accessible page where you try to integrate the map - can be an e.g. jsfiddle example as well).

All in one copy&paste code example (just replace the api key as stated above)

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS reference -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<style>
html,body{width:100%;height:100%;padding:0;margin:0;}
#map{width:100%;height:100%;}
</style>
<title>OpenStreetMap in English example with MapTiles API and Leaflet JS</title>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([20.5, 20.1], 3);
L.tileLayer('https://maptiles.p.rapidapi.com/en/map/v1/{z}/{x}/{y}.png?rapidapi-key=YOUR-RAPIDAPI-KEY', {
attribution: 'Tiles &copy: <a href="https://www.maptilesapi.com/">MapTiles API</a>, Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 19
}).addTo(map);
</script>
</body>
</html>