diff --git a/public/templates/data.tmpl b/public/templates/data.tmpl
index e4aa164..af56677 100644
--- a/public/templates/data.tmpl
+++ b/public/templates/data.tmpl
@@ -4,8 +4,8 @@
   <meta charset="UTF-8">
   <title>{{name}} - TileServer GL</title>
   {{#is_vector}}
-  <link rel="stylesheet" type="text/css" href="/mapbox-gl.css" />
-  <script src="/mapbox-gl.js"></script>
+  <link rel="stylesheet" type="text/css" href="/mapbox-gl.css{{&access_key_query}}" />
+  <script src="/mapbox-gl.js{{&access_key_query}}"></script>
   <style>
     body {background:#000;color:#ccc;}
     #map {position:absolute;top:0;left:0;right:250px;bottom:0;}
@@ -16,9 +16,9 @@
   </style>
   {{/is_vector}}
   {{^is_vector}}
-  <link rel="stylesheet" type="text/css" href="/mapbox.css" />
-  <script src="/mapbox.js"></script>
-  <script src="/leaflet-hash.js"></script>
+  <link rel="stylesheet" type="text/css" href="/mapbox.css{{&access_key_query}}" />
+  <script src="/mapbox.js{{&access_key_query}}"></script>
+  <script src="/leaflet-hash.js{{&access_key_query}}"></script>
   <style>
     body { margin:0; padding:0; }
     #map { position:absolute; top:0; bottom:0; width:100%; }
@@ -97,7 +97,7 @@
     }
   };
   xhttp.responseType = 'json';
-  xhttp.open('GET', '/data/{{id}}.json', true);
+  xhttp.open('GET', '/data/{{id}}.json{{&access_key_query}}', true);
   xhttp.send();
 
   var propertyList = document.getElementById('propertyList');
@@ -116,7 +116,7 @@
   <h1 style="display:none;">{{name}}</h1>
   <div id='map'></div>
   <script>
-    var map = L.mapbox.map('map', '/data/{{id}}.json', { zoomControl: false });
+    var map = L.mapbox.map('map', '/data/{{id}}.json{{&access_key_query}}', { zoomControl: false });
     new L.Control.Zoom({ position: 'topright' }).addTo(map);
     setTimeout(function() {
       new L.Hash(map);
diff --git a/public/templates/index.tmpl b/public/templates/index.tmpl
index c7c96c3..df2456c 100644
--- a/public/templates/index.tmpl
+++ b/public/templates/index.tmpl
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>TileServerGL</title>
-  <link rel="stylesheet" type="text/css" href="/index.css" />
+  <link rel="stylesheet" type="text/css" href="/index.css{{&access_key_query}}" />
 </head>
 <body>
   <section>
@@ -13,25 +13,25 @@
     {{#each styles}}
       <div class="item">
         {{#if thumbnail}}
-          <img src="/styles/{{@key}}/rendered/{{thumbnail}}" alt="{{name}} preview" />
+          <img src="/styles/{{@key}}/rendered/{{thumbnail}}{{&../access_key_query}}" alt="{{name}} preview" />
         {{else}}
           <div class="sample-img"></div>
         {{/if}}
         <h3>{{name}}</h3>
         <p>Id: {{@key}}
           {{#if serving_rendered}}
-            | <a href="/styles/{{@key}}/rendered.json">TileJSON</a>
+            | <a href="/styles/{{@key}}/rendered.json{{&../access_key_query}}">TileJSON</a>
           {{/if}}
         </p>
         {{#if serving_data}}
-          <a class="btn" href="/styles/{{@key}}/?vector{{viewer_hash}}">Vector view</a>
+          <a class="btn" href="/styles/{{@key}}/?key={{&../access_key}}&amp;vector{{viewer_hash}}">Vector view</a>
         {{/if}}
         {{#if serving_rendered}}
-          <a class="btn" href="/styles/{{@key}}/?raster{{viewer_hash}}">Raster view</a>
+          <a class="btn" href="/styles/{{@key}}/?key={{&../access_key}}&amp;raster{{viewer_hash}}">Raster view</a>
         {{/if}}
         {{#if serving_data}}
           {{#if serving_rendered}}
-            <a class="btn" href="/styles/{{@key}}/{{viewer_hash}}">Auto view</a>
+            <a class="btn" href="/styles/{{@key}}/{{&../access_key_query}}{{viewer_hash}}">Auto view</a>
           {{/if}}
         {{/if}}
       </div>
@@ -42,17 +42,17 @@
     {{#each data}}
       <div class="item">
         {{#if thumbnail}}
-          <img src="/data/{{@key}}/{{thumbnail}}" alt="{{name}} preview" />
+          <img src="/data/{{@key}}/{{thumbnail}}{{&../access_key_query}}" alt="{{name}} preview" />
         {{else}}
           <div class="sample-img"></div>
         {{/if}}
         <h3>{{name}}</h3>
-        <p>Id: {{@key}} |{{#if formatted_filesize}} {{formatted_filesize}} |{{/if}} {{#is_vector}}Vector{{/is_vector}}{{^is_vector}}Raster{{/is_vector}} data | <a href="/data/{{@key}}.json">TileJSON</a></p>
+        <p>Id: {{@key}} |{{#if formatted_filesize}} {{formatted_filesize}} |{{/if}} {{#is_vector}}Vector{{/is_vector}}{{^is_vector}}Raster{{/is_vector}} data | <a href="/data/{{@key}}.json{{&../access_key_query}}">TileJSON</a></p>
         {{#is_vector}}
-        <a class="btn" href="/data/{{@key}}/{{viewer_hash}}">X-Ray view</a>
+        <a class="btn" href="/data/{{@key}}/{{&../access_key_query}}{{viewer_hash}}">X-Ray view</a>
         {{/is_vector}}
         {{^is_vector}}
-        <a class="btn" href="/data/{{@key}}/{{viewer_hash}}">Raster view</a>
+        <a class="btn" href="/data/{{@key}}/{{&../access_key_query}}{{viewer_hash}}">Raster view</a>
         {{/is_vector}}
       </div>
     {{/each}}
diff --git a/public/templates/viewer.tmpl b/public/templates/viewer.tmpl
index 6b9adb7..7f05b62 100644
--- a/public/templates/viewer.tmpl
+++ b/public/templates/viewer.tmpl
@@ -3,11 +3,11 @@
 <head>
   <meta charset="UTF-8">
   <title>{{name}} - TileServer GL</title>
-  <link rel="stylesheet" type="text/css" href="/mapbox-gl.css" />
-  <script src="/mapbox-gl.js"></script>
-  <link rel="stylesheet" type="text/css" href="/mapbox.css" />
-  <script src="/mapbox.js"></script>
-  <script src="/leaflet-hash.js"></script>
+  <link rel="stylesheet" type="text/css" href="/mapbox-gl.css{{&access_key_query}}" />
+  <script src="/mapbox-gl.js{{&access_key_query}}"></script>
+  <link rel="stylesheet" type="text/css" href="/mapbox.css{{&access_key_query}}" />
+  <script src="/mapbox.js{{&access_key_query}}"></script>
+  <script src="/leaflet-hash.js{{&access_key_query}}"></script>
   <style>
     body { margin:0; padding:0; }
     #map { position:absolute; top:0; bottom:0; width:100%; }
@@ -24,12 +24,12 @@
     if (preference == 'vector') {
       var map = new mapboxgl.Map({
         container: 'map',
-        style: '/styles/{{id}}.json',
+        style: '/styles/{{id}}.json{{&access_key_query}}',
         hash: true
       });
       map.addControl(new mapboxgl.Navigation());
     } else {
-      var map = L.mapbox.map('map', '/styles/{{id}}/rendered.json', { zoomControl: false });
+      var map = L.mapbox.map('map', '/styles/{{id}}/rendered.json{{&access_key_query}}', { zoomControl: false });
       new L.Control.Zoom({ position: 'topright' }).addTo(map);
       setTimeout(function() {
         new L.Hash(map);
diff --git a/src/serve_style.js b/src/serve_style.js
index 87c06f9..69ab6a3 100644
--- a/src/serve_style.js
+++ b/src/serve_style.js
@@ -46,9 +46,13 @@ module.exports = function(options, repo, params, id, reportTiles, reportFont) {
   repo[id] = styleJSON;
 
   app.get('/' + id + '.json', function(req, res, next) {
-    var fixUrl = function(url) {
+    var fixUrl = function(url, opt_nokey) {
+      var query = '';
+      if (!opt_nokey && req.query.key) {
+        query = '?key=' + req.query.key;
+      }
       return url.replace(
-          'local://', req.protocol + '://' + req.headers.host + '/');
+          'local://', req.protocol + '://' + req.headers.host + '/') + query;
     };
 
     var styleJSON_ = clone(styleJSON);
@@ -56,7 +60,8 @@ module.exports = function(options, repo, params, id, reportTiles, reportFont) {
       var source = styleJSON_.sources[name];
       source.url = fixUrl(source.url);
     });
-    styleJSON_.sprite = fixUrl(styleJSON_.sprite);
+    // mapbox-gl-js viewer cannot handle sprite urls with query
+    styleJSON_.sprite = fixUrl(styleJSON_.sprite, true);
     styleJSON_.glyphs = fixUrl(styleJSON_.glyphs);
     return res.send(styleJSON_);
   });
diff --git a/src/server.js b/src/server.js
index a474eb2..f7b27bf 100644
--- a/src/server.js
+++ b/src/server.js
@@ -118,13 +118,15 @@ module.exports = function(opts, callback) {
 
   app.get('/styles.json', function(req, res, next) {
     var result = [];
+    var query = req.query.key ? ('?key=' + req.query.key) : '';
     Object.keys(serving.styles).forEach(function(id) {
       var styleJSON = serving.styles[id];
       result.push({
         version: styleJSON.version,
         name: styleJSON.name,
         id: id,
-        url: req.protocol + '://' + req.headers.host + '/styles/' + id + '.json'
+        url: req.protocol + '://' + req.headers.host +
+             '/styles/' + id + '.json' + query
       });
     });
     res.send(result);
@@ -170,6 +172,8 @@ module.exports = function(opts, callback) {
             return res.status(404).send('Not found');
           }
         }
+        data['access_key'] = req.query.key;
+        data['access_key_query'] = req.query.key ? '?key=' + req.query.key : '';
         return res.status(200).send(compiled(data));
       });
     });
