Free Leaflet.js Map Tiles API

Add a beautiful basemap to any Leaflet map with a single L.tileLayer call. OpenStreetMap-powered, globally cached, light & dark styles. Free to start — no credit card.

Get Free API Key → Documentation MapLibre Tiles

🗺️ Live Demo — drag & zoom to explore

1 line

to add a basemap

Free

to get started

🌍

Global OSM coverage

Quick Start

Copy, paste, and replace pk_latlng_YOUR_KEY with your key from the dashboard.

const map = L.map('map').setView([40.71, -74.01], 12);

L.tileLayer(
  'https://tiles.latlng.work/v1/tiles/{z}/{x}/{y}.png?key=pk_latlng_YOUR_KEY&style=light',
  { attribution: '© <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors' }
).addTo(map);

L.tileLayer(
  'https://tiles.latlng.work/v1/tiles/{z}/{x}/{y}.png?key=pk_latlng_YOUR_KEY&style=dark',
  { attribution: '© <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors' }
).addTo(map);

<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<div id="map" style="height:400px"></div>
<script>
const map = L.map('map').setView([40.71, -74.01], 12);
L.tileLayer(
  'https://tiles.latlng.work/v1/tiles/{z}/{x}/{y}.png?key=pk_latlng_YOUR_KEY&style=light',
  { attribution: '© <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors', maxZoom: 18 }
).addTo(map);
</script>

Integrate in Any Framework

Copy the snippet for your stack:

MapContainer.jsx
import { MapContainer, TileLayer } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';

export default function Map() {
  return (
    <MapContainer center={[40.71, -74.01]} zoom={12} style={{ height: '400px' }}>
      <TileLayer
        url="https://tiles.latlng.work/v1/tiles/{z}/{x}/{y}.png?key=pk_latlng_YOUR_KEY&style=light"
        attribution="© <a href='https://openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
        maxZoom={18}
      />
    </MapContainer>
  );
}

Map.vue
<template>
  <l-map :zoom="12" :center="[40.71, -74.01]" style="height:400px">
    <l-tile-layer
      url="https://tiles.latlng.work/v1/tiles/{z}/{x}/{y}.png?key=pk_latlng_YOUR_KEY&style=light"
      attribution="© <a href='https://openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
      :max-native-zoom="18"
    />
  </l-map>
</template>

<script setup>
import { LMap, LTileLayer } from '@vue-leaflet/vue-leaflet';
</script>

map.py — folium
import folium

m = folium.Map(location=[40.71, -74.01], zoom_start=12)

folium.TileLayer(
    tiles="https://tiles.latlng.work/v1/tiles/{z}/{x}/{y}.png?key=pk_latlng_YOUR_KEY&style=light",
    attr='© <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    max_native_zoom=14,
).add_to(m)

m.save("map.html")  # pip install folium

MainActivity.kt — MapLibre Android
val tileUrl = "https://tiles.latlng.work/v1/tiles/{z}/{x}/{y}.png?key=pk_latlng_YOUR_KEY&style=dark"

val style = Style.Builder()
    .fromUri(Style.EMPTY)
    .withSource(RasterSource("latlng", TileSet("ts", tileUrl).apply { maxZoom = 14f }))
    .withLayer(RasterLayer("tiles", "latlng"))
    .build()

Leaflet Tile Providers — Compared

Provider	Free Tier	Styles	API Key	Active
LatLng	Yes — no card	Light & Dark	Yes (pk_latlng_)	✓
OpenStreetMap (tile.osm.org)	ToS restricted	One style	No	✓
Stamen (Stadia)	Free tier	Multiple	Yes	✓
CartoDB	Limited	Dark / Light	Optional	✓
Mapbox Raster	50K loads/mo	Multiple	Required	✓

💡 OSM's own tile servers have a usage policy that prohibits high-traffic production use. LatLng's tiles are a fully API-keyed, production-ready alternative with the same underlying OSM data.

Why Use LatLng Tiles with Leaflet?

True L.tileLayer compatible: Standard 256×256 PNG tiles — works with any Leaflet version and plugin
Light & dark styles: Switch with ?style=light or ?style=dark
Frontend-safe API key: Your pk_latlng_... key is safe to embed in HTML — restrict to your domain in the dashboard
Global edge caching: Tiles served from a global edge network
OSM-powered: Map data from OpenStreetMap — community-maintained, always improving
No credit card to start: Get your maps key for free — sign up in 30 seconds

Common use cases

Store locators and branch finders using existing Leaflet codebases
Real estate apps needing a drop-in OSM replacement
Data science / Jupyter notebooks via folium
Mobile apps (Android / iOS) using MapLibre raster tiles
Dashboards where MapLibre GL is overkill

Common Questions

Can I use these in a commercial project?

Yes — tile requests are included in your plan quota. See the dashboard for your current limits, and check our pricing for higher volume needs. Required: show OpenStreetMap attribution in your UI.

What zoom levels are supported?

Source tiles go to zoom 14. Use maxNativeZoom: 14, maxZoom: 18 in Leaflet for seamless over-zoom.

How do I lock my key to a domain?

In the dashboard, go to Maps key → Allowed Domains.

Can I add overlays on top?

Yes — Leaflet supports layer stacking. Use L.geoJSON() or our Datasets API for vector overlays.

Add Leaflet Map Tiles in 60 Seconds

Free account — no credit card required. Get your pk_latlng_ key and paste it into your L.tileLayer.

Get Your Free API Key →