From 33a8526c2ffa14a25e2d819fed2e64ce31b20956 Mon Sep 17 00:00:00 2001
From: Binnette <binnette@gmail.com>
Date: Mon, 15 Jul 2024 22:49:48 +0200
Subject: [PATCH] Add MapBox Satellite

---
 src/conf.js |  3 ++-
 src/main.js | 10 +++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/conf.js b/src/conf.js
index 73ff57b..ea452ae 100644
--- a/src/conf.js
+++ b/src/conf.js
@@ -13,7 +13,8 @@ if (window.location.toString().startsWith('https://binnette.github.io/parking-ma
 const url = 'https://www.openstreetmap.org';
 const apiUrl = 'https://api.openstreetmap.org';
 export const overpassApiUrl = 'https://overpass-api.de/api/';
-export const bingMapsKey = 'AlP2hZdKUYiJxdBH7O65tFO8mxiz_OZk5Vx6V5mxzW3WKkilMKP9hfixb1CpHuS4'
+export const bingMapsKey = 'AlP2hZdKUYiJxdBH7O65tFO8mxiz_OZk5Vx6V5mxzW3WKkilMKP9hfixb1CpHuS4';
+export const mapboxAccessToken = 'pk.eyJ1IjoiYmlubmV0dGUiLCJhIjoiY2x5bmYzczlzMDVleDJqc2ZtNzE2cTAwNCJ9.6FY-NU7wTMOGfox3wCurzA';
 
 export const conf = {
   scope: "read_prefs write_api",
diff --git a/src/main.js b/src/main.js
index de32f70..e574889 100644
--- a/src/main.js
+++ b/src/main.js
@@ -11,7 +11,7 @@ import OsmRequest from 'osm-request'
 import 'jquery-toast-plugin'
 import 'remodal'
 import { osmAuth } from 'osm-auth';
-import { conf, overpassApiUrl, bingMapsKey } from './conf.js'
+import { conf, overpassApiUrl, bingMapsKey, mapboxAccessToken } from './conf.js'
 
 // ui components
 let map, polyline, bbox, parkings, currentElement, changesetId, index, solved, skipped, solvedChangeset, total;
@@ -49,9 +49,17 @@ function initMap() {
       maxZoom: 20, maxNativeZoom: 18
     }),
     'Bing Aerial': L.tileLayer.bing({
+      attribution: '&copy; <a href="https://opengeodata.org/microsoft-imagery-details">Bing Maps</a>',
       bingMapsKey: bingMapsKey,
       maxZoom: 20
     }),
+    'Mapbox Satellite': L.tileLayer('https://api.mapbox.com/v4/{tileset_id}/{z}/{x}/{y}@2x.{format}?access_token={accessToken}', {
+      attribution: '&copy; <a href="https://www.mapbox.com/about/maps/">Mapbox</a>',
+      tileset_id: 'mapbox.satellite',
+      format: 'jpg',
+      accessToken: mapboxAccessToken,
+      maxZoom: 20, maxNativeZoom: 18
+    }),
     'BDOrtho IGN': L.tileLayer('https://proxy-ign.openstreetmap.fr/94GjiyqD/bdortho/{z}/{x}/{y}.jpg', {
       attribution: '&copy; <a href="https://www.openstreetmap.fr/bdortho/">BDOrtho IGN</a>',
       maxZoom: 20, maxNativeZoom: 18