Skip to content
Home
Raster Tiles

Raster Tiles

Raster tiles are pre-rendered map images served as PNG files. They work with Leaflet, OpenLayers, and any other library that supports the standard slippy map tile format.

Use raster tiles when you need a simple setup or when your library does not support vector tiles.

Standard Map Styles


Style Name:
maptoolkit-maptoolkit.summer
Topographic outdoor map with terrain shading (default)
Style URL:
https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=YOUR_API_KEY
Preview maptoolkit-maptoolkit.summer
Style Name:
maptoolkit-maptoolkit.winter
Topographic outdoor map with a winter look
Style URL:
https://styles.maptoolkit.net/maptoolkit/maptoolkit.winter.json?api_key=YOUR_API_KEY
Preview maptoolkit-maptoolkit.winter
Style Name:
maptoolkit-maptoolkit.hiking
Hiking-focused outdoor map
Style URL:
https://styles.maptoolkit.net/maptoolkit/maptoolkit.hiking.json?api_key=YOUR_API_KEY
Preview maptoolkit-maptoolkit.hiking
Style Name:
maptoolkit-maptoolkit.cycling
Cycling-focused outdoor map
Style URL:
https://styles.maptoolkit.net/maptoolkit/maptoolkit.cycling.json?api_key=YOUR_API_KEY
Preview maptoolkit-maptoolkit.cycling
Style Name:
maptoolkit-maptoolkit.street
Detailed street map
Style URL:
https://styles.maptoolkit.net/maptoolkit/maptoolkit.street.json?api_key=YOUR_API_KEY
Preview maptoolkit-maptoolkit.street
Style Name:
maptoolkit-maptoolkit.light
Minimal light theme
Style URL:
https://styles.maptoolkit.net/maptoolkit/maptoolkit.light.json?api_key=YOUR_API_KEY
Preview maptoolkit-maptoolkit.light
Style Name:
maptoolkit-maptoolkit.dark
Dark theme with high contrast
Style URL:
https://styles.maptoolkit.net/maptoolkit/maptoolkit.dark.json?api_key=YOUR_API_KEY
Preview maptoolkit-maptoolkit.dark

You can preview all styles at maptoolkit.com/map.

Tile URL

https://rtc-cdn.maptoolkit.net/rtc/{style_name}/{z}/{x}/{y}.png?api_key=YOUR_API_KEY

For high-resolution displays, use the @2x suffix:

https://rtc-cdn.maptoolkit.net/rtc/{style_name}/{z}/{x}/{y}@2x.png?api_key=YOUR_API_KEY

Replace {style_name} with one of the bold style names from the Standard Map Styles list above.

Authentication

Add your API key as ?api_key=YOUR_API_KEY to every request. See Authentication for details.

Use Raster Tiles with Leaflet

const map = L.map('map').setView([47.268, 11.400], 13);

    L.tileLayer(
      'https://rtc-cdn.maptoolkit.net/rtc/maptoolkit-maptoolkit.summer/{z}/{x}/{y}{ratio}.png?api_key=YOUR_API_KEY',
      {
        ratio: L.Browser.retina ? '@2x' : '',
        maxZoom: 18,
        attribution: '© <a href="https://www.maptoolkit.com">Maptoolkit</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
      }
    ).addTo(map);
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.css" />
  <style>
    body { margin: 0; }
    #map { height: 400px; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.js"></script>
  <script>
    const map = L.map('map').setView([47.268, 11.400], 13);

    L.tileLayer(
      'https://rtc-cdn.maptoolkit.net/rtc/maptoolkit-maptoolkit.summer/{z}/{x}/{y}{ratio}.png?api_key=YOUR_API_KEY',
      {
        ratio: L.Browser.retina ? '@2x' : '',
        maxZoom: 18,
        attribution: '© <a href="https://www.maptoolkit.com">Maptoolkit</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
      }
    ).addTo(map);
  </script>
</body>
</html>

Custom Styles

Custom map styles are available on request. Contact maptoolkit.com for details.