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.1/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.2/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. For more examples on how to add data and interactivity, check out the Leaflet documentation.

With MapboxGL

Coming Soon...