Display a raster map with Leaflet

Leaflet has native support for raster maps. This lets to add a map with a few commands only.

  1. You will require Geoapify API Key to display a map. Register and get an API key for free on Geoapify MyProjects.
  2. Visit our documentation page for Map Tiles to get a map tiles link.
  3. Create an HTML file and add the following code:
    <title>Leaflet + Raster Map tiles</title>

    <style id="compiled-css" type="text/css">
      #my-map {
        width: 100%;
        height: 100%;
        margin: 0;
  <body data-new-gr-c-s-check-loaded="14.991.0" data-gr-ext-installed="">
    <div id="my-map"></div>
    <script type="text/javascript">
      var map = L.map("my-map").setView([48.1500327, 11.5753989], 10);

      // Get your own API Key on https://myprojects.geoapify.com
      var myAPIKey = "6dc7fb95a3b246cfa0f3bcef5ce9ed9a";

      // Retina displays require different mat tiles quality
      var isRetina = L.Browser.retina;

      var baseUrl =
      var retinaUrl =

      // Add map tiles layer. Set 20 as the maximal zoom and provide map data attribution.
      L.tileLayer(isRetina ? retinaUrl : baseUrl, {
          'Powered by <a href="https://www.geoapify.com/" target="_blank">Geoapify</a> | © OpenStreetMap <a href="https://www.openstreetmap.org/copyright" target="_blank">contributors</a>',
        apiKey: myAPIKey,
        maxZoom: 20,
        id: "osm-bright",

Note! You need to take care about different map tiles quality for retina displays.

  1. Save the file and open it in a browser.