animate map zoom-in at start, map controls

css/main.css

@@ -10,7 +10,7 @@ body {
   height:100vh;
   display: grid;
   grid-template-rows: 80px 1fr;
-  grid-template-columns: 50% 50%;
+  grid-template-columns: 55% 45%;
   grid-row-gap: 0px;
   grid-template-areas:
     "logo navigation"

index.html

@@ -67,24 +67,9 @@
       </content>
     </div>
 
-    <script>
-      var bounds = [
-        [8.40001, 49.01194],
-        [8.40855, 49.01585]
-      ];
-      mapboxgl.accessToken = 'pk.eyJ1Ijoib25ueSIsImEiOiJjajhvdnc1eTgwOTM3MnFudG81MXlpZGJrIn0.lDC0PwJDf704okmeI6w61g';
-      var map = new mapboxgl.Map({
-      container: 'map',
-      style: 'mapbox://styles/mapbox/light-v9',
-      center: [8.4045, 49.0144],
-      zoom: 17,
-      maxBounds: bounds,
-      pitch: 40,
-      bearing: 20
-      });
-    </script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
     <script src="js/player.js"></script>
+    <script src="js/map.js"></script>
 
   </body>