Map tiles

Mapricot's vector map tiles cover the whole planet at every zoom level, for use with MapLibre. They're free, need no API key, and don't count against your requests or credit.

Styles

Pick a style and pass its URL to MapLibre:

Each style loads its tiles, fonts, and icons from tiles.mapricot.com, so nothing else needs to be configured.

Show a map

A map is one HTML file. Save this as index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Portland</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@6.15.0/dist/maplibre-gl.css">
  </head>
  <body style="margin: 0">
    <div id="map" style="height: 100vh"></div>
    <script type="module">
      import * as maplibregl from "https://cdn.jsdelivr.net/npm/maplibre-gl@6.15.0/+esm";

      const map = new maplibregl.Map({
        container: "map",
        style: "https://tiles.mapricot.com/styles/light.json",
        center: [-122.68, 45.52],
        zoom: 12,
      });
    </script>
  </body>
</html>

• The link loads MapLibre's stylesheet, which styles the map's controls, markers, and popups.
• The map element is where the map is drawn. It needs a height; this one fills the window.
• type="module" lets the script import MapLibre, here from jsDelivr, which serves any npm package. +esm asks for it as a module, and the version in the URL keeps the page from changing when MapLibre releases a new one.
• center is [longitude, latitude], the order MapLibre always uses, and zoom runs from 0, the whole world, to about 22.

Serve the folder with a local web server, and open the address it prints: run npx serve (with Node.js) or python3 -m http.server in the folder. Opened straight from a file, the map stays blank with Worker failed to load, since browsers don't let a page from a file start MapLibre's web worker. If your app uses a bundler, npm install maplibre-gl and import from maplibre-gl instead; under Vite, also set the worker's URL, as MapLibre React shows.

That code makes this map. Switch styles to compare them:

Add your data

Draw search results as markers and routes as lines on top of the map. Search results already include lat and lon; note that MapLibre takes coordinates as [lon, lat].

new maplibregl.Marker().setLngLat([result.lon, result.lat]).addTo(map);

The guides build complete maps with MapLibre: markers and popups, clustering points, drawing a route, and a search box.

Attribution

The styles credit Mapricot and OpenStreetMap, and MapLibre shows those credits in the corner of the map by default. Keep the OpenStreetMap credit visible: its license requires it.

Fair use

Tiles are served from Cloudflare's edge. Each IP address can make about 1,200 tile requests a minute; past that, its requests are refused for a few seconds. That's plenty for people browsing a map, even many behind one office network. Tiles are intended for maps in apps and websites, so don't bulk-download them.

Data

The tiles are Protomaps basemaps built from OpenStreetMap, refreshed about monthly. A refresh needs no change on your side: the styles always point at the current tiles.