Leaflet: raster map
Leaflet: vector map
OpenLayers: create a map
MapLibre GL (Mapbox GL): create a map
React-based project template
Vue-based project template
Angular-based project template

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:
<html>
  <head>
    <title>Leaflet + Raster Map tiles</title>
    <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css"
    />

    <style id="compiled-css" type="text/css">
      html,
      body,
      #my-map {
        width: 100%;
        height: 100%;
        margin: 0;
      }
    </style>
  </head>
  <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 =
        "https://maps.geoapify.com/v1/tile/osm-bright/{z}/{x}/{y}.png?apiKey={apiKey}";
      var retinaUrl =
        "https://maps.geoapify.com/v1/tile/osm-bright/{z}/{x}/{y}@2x.png?apiKey={apiKey}";

      // Add map tiles layer. Set 20 as the maximal zoom and provide map data attribution.
      L.tileLayer(isRetina ? retinaUrl : baseUrl, {
        attribution:
          '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",
      }).addTo(map);
    </script>
  </body>
</html>

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

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