Retina Tiles

FREEMIUM
Durch Support@MapTilesApi | Aktualisiert vor einem Monat | Mapping
Popularität

9.6 / 10

Latenz

131ms

Service Level

100%

Zurück zu allen Tutorials (2)

Using Retina Tiles with Leaflet to display a map on a website

The Retina Tiles 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/retina-tiles/pricing/
  3. Fetch your RapidAPI key (you’ll find it on https://rapidapi.com/MapTilesApi/api/retina-tiles/ 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://retina-tiles.p.rapidapi.com/local/osm{r}/v1/{z}/{x}/{y}.png?rapidapi-key=YOUR-RAPIDAPI-KEY', {
attribution: 'Tiles &copy: <a href="https://www.maptilesapi.com/retina-tiles/">Retina Tiles 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).

Bewertung: 5 - Stimmen: 1