Criar equipeAdicione sua APIDocumentos
Entrar
Inscrever-se

MapTiles

FREEMIUM
Verified
✓
Por Support@MapTilesApi | Atualizado il y a 8 jours | Mapping
Popularidade

9.9 / 10

Latência

145ms

Nível de serviço

100%

Health Check

100%

Voltar para todos os tutoriais (2)

OpenStreetMap in Spanish - add a Spanish map to your website with Leaflet JS and MapTiles API

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([9.5, 0.02], 3);
L.tileLayer('https://maptiles.p.rapidapi.com/es/map/v1/{z}/{x}/{y}.png?rapidapi-key=YOUR-RAPIDAPI-KEY', {
attribution: '&copy: <a href="https://www.maptilesapi.com/">MapTiles API</a>, Datos de Mapa &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 Spanish example with MapTiles API and Leaflet JS</title>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([9.5, 0.02], 3);
L.tileLayer('https://maptiles.p.rapidapi.com/es/map/v1/{z}/{x}/{y}.png?rapidapi-key=YOUR-RAPIDAPI-KEY', {
attribution: '&copy: <a href="https://www.maptilesapi.com/">MapTiles API</a>, Datos de Mapa &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 19
}).addTo(map);
</script>
</body>
</html>