Get a free key

Leaflet quickstart

On this page
The examples use YOUR_KEY. Get a free key to run them; it takes about a minute and needs no card.Get a free key

Show PinSharing raster map tiles in Leaflet and add address search, in one HTML file.

  1. Start with this complete HTML page. Replace YOUR_KEY with a key from the dashboard.

    <!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <style>#map { height: 400px; }</style>
</head>
<body>
  <div id="map"></div>
  <script>
    const KEY = "YOUR_KEY";
    const map = L.map("map").setView([41.68, -88.35], 12);
    L.tileLayer(`https://api.pinsharing.com/v1/tiles/light/{z}/{x}/{y}@2x.png?key=${KEY}`, {
      tileSize: 256,
      maxZoom: 19,
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'
    }).addTo(map);
  </script>
</body>
</html>

  2. Change the style by replacing light with dark, white or grayscale. Each tile counts as 1 tile; a typical view loads about 16 tiles.

  3. Add address search to the same page:

    async function findAddress(text) {
  const url = `https://api.pinsharing.com/v1/geocode?q=${encodeURIComponent(text)}&limit=1&key=${KEY}`;
  const res = await fetch(url);
  if (!res.ok) throw new Error((await res.json()).message);
  const [hit] = (await res.json()).features;
  if (!hit) return;
  const [lon, lat] = hit.geometry.coordinates;
  map.setView([lat, lon], 16);
  L.marker([lat, lon]).addTo(map).bindPopup(hit.properties.name || text).openPopup();
}
findAddress("Oswego, Illinois");

    Each lookup counts as 1 geocode. Results may be stored for 30 days on Free, or indefinitely on paid plans.

Attribution

OpenStreetMap credit is required; the Leaflet snippet above includes it in the tile layer attribution.

Keys in web pages

Keys used in web pages are visible to visitors. In the dashboard, limit such a key to your websites; keep an unrestricted key on your servers. See Keys & websites.

Next

↑ Contents