add apikeys.js, .gitignore

.gitignore

@@ -0,0 +1,4 @@
+apikeys.js
+*.pnts
+*.b3dm
+tileset.json

README.md

@@ -33,7 +33,7 @@ tar zxvf ahn_points.tar.gz
 cd ../rotterdam
 tar zxvf rotterdam_3dtiles_small.tar.gz
 ```
-Next, edit index.html and enter your [mapbox token](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/). Point your browser to the directory in question and you should see a basic viewer with 3d tiles content.
+Next, copy file "apikeys.js.example" to "apikeys.js" and add your [mapbox token](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/). Point your browser to the directory in question and you should see a basic viewer with 3d tiles content.
 
 ## Creating tilesets
 Tilesets can be created using [py3dtiles](https://github.com/Oslandia/py3dtiles), using a PostGIS database table as source. The PostGIS table should contain 3D geometries in EPSG:3857 projection. 

apikeys.js.example

@@ -0,0 +1,3 @@
+const apiKeys = {
+    mapboxAccessToken: "<your mapboxAccessToken here>"
+}

index.html

@@ -9,6 +9,7 @@
 	<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js'></script>
 	<script src="GLTFLoader.js"></script>
 	<script src="Mapbox3DTiles.js"></script>
+	<script src="apikeys.js"></script>
 	<style>
 		body { margin:0; padding:0; }
 		#map { position:absolute; top:0; bottom:0; width:100%; }
@@ -19,7 +20,7 @@
 <div id='map'></div>
 
 <script>
-mapboxgl.accessToken = '<your mapbox token here>';
+mapboxgl.accessToken = apiKeys.mapboxAccessToken;
 
 // Load the mapbox map
 var map = new mapboxgl.Map({