Get a free key

OpenLayers 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

PinSharing raster tiles and vector styles in OpenLayers.

  1. Raster tiles in one HTML file:

    <!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@10.11.0/ol.css">
  <script src="https://cdn.jsdelivr.net/npm/ol@10.11.0/dist/ol.js"></script>
  <style>#map { height: 400px; }</style>
</head>
<body>
  <div id="map"></div>
  <script>
    const KEY = "YOUR_KEY";
    new ol.Map({
      target: "map",
      layers: [new ol.layer.Tile({
        source: new ol.source.XYZ({
          url: `https://api.pinsharing.com/v1/tiles/light/{z}/{x}/{y}@2x.png?key=${KEY}`,
          tilePixelRatio: 2,
          attributionsCollapsible: false,
          maxZoom: 19,
          attributions: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'
        })
      })],
      view: new ol.View({ center: ol.proj.fromLonLat([-88.35, 41.68]), zoom: 12 })
    });
  </script>
</body>
</html>

  2. Vector tiles with ol-mapbox-style:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@10.11.0/ol.css">
<script src="https://cdn.jsdelivr.net/npm/ol@10.11.0/dist/ol.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@13.9.0/dist/olms.js"></script>
<div id="map" style="height:400px"></div>
<script>
  olms.apply("map", "https://api.pinsharing.com/v1/styles/light.json?key=YOUR_KEY");
</script>

    The vector style works like the MapLibre style URL: tiles, fonts and sprites carry your key; each vector tile counts 1 tile.

Attribution

OpenStreetMap credit is required; the snippets above include it for raster tiles, and the vector style supplies it.

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