diff --git a/.env.dist b/.env.dist
index 509fee86..ead1c943 100644
--- a/.env.dist
+++ b/.env.dist
@@ -69,3 +69,5 @@ API_LOGGING=set_to_true_or_false
 
 # customer distance limit in km
 CUST_DISTANCE_LIMIT=set_to_number
+
+MAPTILER_API_KEY=map_tiler_api_key
diff --git a/config/packages/twig.yaml b/config/packages/twig.yaml
index cb90797b..1c848030 100644
--- a/config/packages/twig.yaml
+++ b/config/packages/twig.yaml
@@ -4,6 +4,7 @@ twig:
     strict_variables: '%kernel.debug%'
     globals:
         gmaps_api_key: "%env(GMAPS_API_KEY)%"
+        maptiler_api_key: "%env(MAPTILER_API_KEY)%"
         mqtt_host: "%env(MQTT_WS_HOST)%"
         mqtt_port: "%env(MQTT_WS_PORT)%"
         dashboard_enable: "%env(DASHBOARD_ENABLE)%"
diff --git a/public/assets/js/dashboard_map.js b/public/assets/js/dashboard_map.js
index 874883a7..3f02d1f4 100644
--- a/public/assets/js/dashboard_map.js
+++ b/public/assets/js/dashboard_map.js
@@ -21,12 +21,24 @@ class DashboardMap {
         );
 
         // add tile layer
+        var streets = L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key={accessToken}',{
+			tileSize: 512,
+			zoomOffset: -1,
+			minZoom: 1,
+			attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>',
+			crossOrigin: true,
+            accessToken: this.options.access_token
+		  }).addTo(this.map);
+
+		/*
+        // NOTE: this is for mapbox
         var streets = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
             attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
             maxZoom: 18,
             id: 'mapbox/streets-v11',
             accessToken: this.options.access_token
         }).addTo(this.map);
+		*/
 
         // layer groups
         this.layer_groups.rider_available.addTo(this.map);
diff --git a/templates/home.html.twig b/templates/home.html.twig
index 61b93de0..69cb59c0 100644
--- a/templates/home.html.twig
+++ b/templates/home.html.twig
@@ -27,7 +27,7 @@ function initMap(r_markers, c_markers, icons) {
     var options = {
         'display_overlay': true,
         'enable_popup': true,
-        'access_token': 'pk.eyJ1Ijoia2NvcmRlcm8iLCJhIjoiY2szbzA3ZHdsMDZxdTNsbGl4ZGNnN2VxaSJ9.LRzAe3RlV8sIP1N1x0chdw',
+        'access_token': '{{ maptiler_api_key }}',
         'div_id': 'dashboard_map',
         'center_lat': default_lat,
         'center_lng': default_lng,
diff --git a/templates/map/joOpenStreetMap.js b/templates/map/joOpenStreetMap.js
index 3d92c330..8199ab36 100644
--- a/templates/map/joOpenStreetMap.js
+++ b/templates/map/joOpenStreetMap.js
@@ -11,14 +11,24 @@ function mapCreate(div_id, center_lat, center_lng, map_type, zoom) {
         zoom
     );
 
-    //TODO: put access token in .env
     // add tile layer
+	var streets = L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key={accessToken}',{
+		tileSize: 512,
+		zoomOffset: -1,
+		minZoom: 1,
+		attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>',
+		crossOrigin: true,
+		accessToken: '{{ maptiler_api_key }}'
+	  }).addTo(map);
+
+    /*
     var streets = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
         attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
         maxZoom: 18,
         id: 'mapbox/streets-v11',
         accessToken: 'pk.eyJ1Ijoia2NvcmRlcm8iLCJhIjoiY2szbzA3ZHdsMDZxdTNsbGl4ZGNnN2VxaSJ9.LRzAe3RlV8sIP1N1x0chdw'
     }).addTo(map);
+    */
 
     return map;
 }