Merge pull request #1167 from benstonezhang/maplibre_gl_basic_auth

Support basic auth with Maplibre-gl-js for map server

css/adminSettings.css

@@ -4,7 +4,8 @@
 #graphhopperURL,
 #graphhopperAPIKEY,
 #mapboxAPIKEY,
-#maplibreStreetStyleURL
+#maplibreStreetStyleURL,
+#maplibreStreetStyleAuth
 {
     width: 400px;
 }

lib/Controller/PageController.php

@@ -122,7 +122,8 @@ class PageController extends Controller {
                 'osrmCarURL',
                 'osrmFootURL',
                 'graphhopperURL',
-				'maplibreStreetStyleURL'
+				'maplibreStreetStyleURL',
+				'maplibreStreetStyleAuth'
             ];
             foreach ($urlKeys as $key) {
                 $url = $this->config->getAppValue('maps', $key);

lib/Controller/PublicUtilsController.php

@@ -210,6 +210,7 @@ class PublicUtilsController extends PublicPageController {
             'graphhopperAPIKEY',
             'mapboxAPIKEY',
 			'maplibreStreetStyleURL',
+			'maplibreStreetStyleAuth',
             'graphhopperURL'
         ];
         foreach ($settingsKeys as $k) {

lib/Controller/UtilsController.php

@@ -151,6 +151,7 @@ class UtilsController extends Controller {
             'graphhopperAPIKEY',
             'mapboxAPIKEY',
 			'maplibreStreetStyleURL',
+			'maplibreStreetStyleAuth',
             'graphhopperURL'
         ];
         foreach ($settingsKeys as $k) {
@@ -175,6 +176,7 @@ class UtilsController extends Controller {
             'graphhopperAPIKEY',
             'mapboxAPIKEY',
 			'maplibreStreetStyleURL',
+			'maplibreStreetStyleAuth',
             'graphhopperURL'
         ];
         foreach ($values as $k=>$v) {

lib/Settings/AdminSettings.php

@@ -47,6 +47,7 @@ class AdminSettings implements ISettings {
             'graphhopperAPIKEY',
             'mapboxAPIKEY',
 			'maplibreStreetStyleURL',
+			'maplibreStreetStyleAuth',
             'graphhopperURL'
         ];
         $parameters = [];

src/adminSettings.js

@@ -39,10 +39,12 @@ $(document).ready(function() {
         'input#graphhopperAPIKEY, ' +
         '#osrmDEMO, ' +
         'input#mapboxAPIKEY, ' +
-        'input#maplibreStreetStyleURL', function(e) {
-        var value = $(this).val();
-        setMapsRoutingSettings($(this).attr('id'), value);
-    });
+        'input#maplibreStreetStyleURL, ' +
+		'input#maplibreStreetStyleAuth',
+		function(e) {
+	        var value = $(this).val();
+    	    setMapsRoutingSettings($(this).attr('id'), value);
+    	});
     $('body').on('change', '#osrmDEMO', function(e) {
         var value = $(this).is(':checked') ? '1' : '0';
         setMapsRoutingSettings($(this).attr('id'), value);

src/components/Map.vue

@@ -175,6 +175,7 @@ import 'mapbox-gl/dist/mapbox-gl'
 import 'mapbox-gl/dist/mapbox-gl.css'
 import 'mapbox-gl-leaflet/leaflet-mapbox-gl'
 import '@maplibre/maplibre-gl-leaflet'
+import ResourceType from 'maplibre-gl'
 import {
 	baseLayersByName,
 	overlayLayersByName,
@@ -784,18 +785,37 @@ export default {
 
 			if ((gl !== null) &&
 				('maplibreStreetStyleURL' in this.optionValues && this.optionValues.maplibreStreetStyleURL !== '')) {
+				let token = null
+				if ('maplibreStreetStyleAuth' in this.optionValues && this.optionValues.maplibreStreetStyleAuth !== '') {
+					token = this.optionValues.maplibreStreetStyleAuth
+				}
+
 				// wrapper to make tile layer component correctly pass arguments
 				L.myMaplibreGL = (url, options) => {
+					if (token !== null) {
+						token = 'Basic ' + btoa(token)
+						const oldTransform = options.transformRequest
+						options.transformRequest = (url, resourceType) => {
+							const param = oldTransform?.() || {}
+							param.url = param.url || url
+							if (resourceType === ResourceType.Tile) {
+								param.type = 'arrayBuffer'
+							}
+							param.headers = param.headers || {}
+							param.headers.Authorization = token
+							return param
+						}
+					}
 					return new L.maplibreGL(options)
 				}
 
 				this.allBaseLayers = {}
 				Object.keys(baseLayersByName).forEach(id => {
 					if (id === 'Open Street Map') {
-						let layer = Object.assign({}, baseLayersByName[id]);
+						const layer = Object.assign({}, baseLayersByName[id])
 						delete layer.url
 						layer.tileLayerClass = L.myMaplibreGL
-						layer.options = Object.assign({}, layer.options);
+						layer.options = Object.assign({}, layer.options)
 						layer.options.style = this.optionValues.maplibreStreetStyleURL
 						layer.options.minZoom = 0
 						layer.options.maxZoom = 22

templates/adminSettings.php

@@ -48,10 +48,12 @@ if (!isset($_['osrmDEMO']) || $_['osrmDEMO'] === '1') {
     </div><br/>
 
 	<h3><a href="https://maplibre.org/" title="<?php p($l->t('MapLibre Website')) ?>" target="_blank"><?php p($l->t('MapLibre settings')); ?></a></h3>
-	<p><?php p($l->t('Set the URL of style.json for OpenStreetMap Vector Tiles with MapLibre-GL-JS')); ?></p>
+	<p><?php p($l->t('Set the URL and Basic Authorization of style.json for OpenStreetMap Vector Tiles with MapLibre-GL-JS.')); ?></p>
 	<p><?php p($l->t('Leave empty to disable.')); ?></p><br/>
 	<div id="maplibre_street">
 		<label for="maplibreStreetStyleURL"><?php p($l->t('MapLibre Street style URL')); ?></label><br/>
-		<input id="maplibreStreetStyleURL" type="text" value="<?php if (isset($_['maplibreStreetStyleURL'])) p($_['maplibreStreetStyleURL']); ?>"/>
+		<input id="maplibreStreetStyleURL" type="text" value="<?php if (isset($_['maplibreStreetStyleURL'])) p($_['maplibreStreetStyleURL']); ?>"/><br/>
+		<label for="maplibreStreetStyleAuth"><?php p($l->t('Basic Authorization if required. Format is "user:password"')); ?></label><br/>
+		<input id="maplibreStreetStyleAuth" type="text" value="<?php if (isset($_['maplibreStreetStyleAuth'])) p($_['maplibreStreetStyleAuth']); ?>"/>
 	</div><br/>
 </div>