Add MapBox Satellite

Binnette · Jul 15, 2024 · 33a8526 · 33a8526
1 parent b949e76
commit 33a8526
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git 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
@@ -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