title: Failed to load resource: the server responded with a status of 401 for mapbox api
body: <p>I have followed leaflet "<a href="http://leafletjs.com/examples/quick-start.html" rel="nofollow">get started</a>" tutorial</p>
  
  <p>but I get an 401 error while trying to load the tiles</p>
  
  <blockquote>
    <p><a href="https://api.tiles.mapbox.com/v4/your.mapbox.project.id/13/4093/2724.png?access_token=your.mapbox.public.access.token" rel="nofollow">https://api.tiles.mapbox.com/v4/your.mapbox.project.id/13/4093/2724.png?access_token=your.mapbox.public.access.token</a>
    Failed to load resource: the server responded with a status of 401
    (Unauthorized)</p>
  </blockquote>
  
  <p>what am I missing?</p>
  
  <p>my html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;link rel="stylesheet" href="elad_map.css" /&gt;
    &lt;link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="map"&gt;&lt;/div&gt;
  
    &lt;script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="elad_map.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.onload = loadMap();
  
  function loadMap() {
    var map = L.map('map').setView([51.505, -0.09], 13);
  
  
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
      attribution: 'Map data &amp;copy; &lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt; contributors, &lt;a href="http://creativecommons.org/licenses/by-sa/2.0/"&gt;CC-BY-SA&lt;/a&gt;, Imagery © &lt;a href="http://mapbox.com"&gt;Mapbox&lt;/a&gt;',
      maxZoom: 18,
      id: 'your.mapbox.project.id',
      accessToken: 'your.mapbox.public.access.token'
    }).addTo(map);
  
  
    var circle = L.circle([51.508, -0.11], 500, {
      color: 'red',
      fillColor: '#f03',
      fillOpacity: 0.5
    }).addTo(map);
  
    var polygon = L.polygon([
      [51.509, -0.08],
      [51.503, -0.06],
      [51.51, -0.047]
    ]).addTo(map);
  
  }</code></pre>
  </div>
  </div>
  </p>