Quick Start
With Leaflet

1. Register an account at protomaps.com/signup.

2. At the Dashboard, an API key that is valid for all origins (*) has been created for you. This is your development key.
Note: In production, using a key with a limited list of origins is more secure.

3. Copy the below HTML snippet to a new file like index.html replacing the API key placeholder in green, or use the JavaScript between the script tags along with the 3 lines in head for including Leaflet and Tangram scripts and stylesheets.
Note: the Leaflet map page element, in this case #map, must have a defined height for the map to appear.

<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.protomaps.com/leaflet/1.6.0/leaflet.css" />
    <script src="https://cdn.protomaps.com/leaflet/1.6.0/leaflet.js"></script>
    <script src="https://cdn.protomaps.com/tangram-lite/0.0.5/tangram.min.js"></script>
  </head>
  <body style="margin:0px">
    <div id="map" style="height:100%; width:100%;"></div>
    <script>
      window.addEventListener('load',() => {
        var map = L.map("map").setView([0,0], 2)
        var layer = Tangram.leafletLayer({
            scene: {
              import: 'https://cdn.protomaps.com/styles/0.0.3/light.yml',
              global:{api_key:'REPLACE_WITH_YOUR_API_KEY'}
            },
        }).addTo(map)
      })
    </script>
  </body>
</html>

4. The import: value above can be changed to ../dark.yml, etc to change the map style. See Styles for all options. For more examples on how to add data and interactivity, check out the Leaflet documentation.

For more information on how to use Protomaps on the web, see the Web Maps Documentation.