feat: use the same mapbox tiles as the main website

fingerprintjs · Jul 10, 2024 · 065b7fc · 065b7fc
1 parent 961c63b
commit 065b7fc
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/src/app/playground/components/Map.tsx b/src/app/playground/components/Map.tsx
@@ -6,6 +6,7 @@ import { MapContainer, Marker, TileLayer } from 'react-leaflet';
 import React from 'react';
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
+import { env } from '../../../env';
 
 // This is a workaround for the marker icon not showing up out of the box
 const DefaultIcon = L.divIcon({
@@ -27,7 +28,9 @@ type MapProps = {
   zoom?: number;
 };
 
-const Map: FunctionComponent<MapProps> = (props) => {
+const MAPBOX_ACCESS_TOKEN = env.NEXT_PUBLIC_MAPBOX_API_TOKEN;
+
+export const Map: FunctionComponent<MapProps> = (props) => {
   const defaultZoom = 9; // Shows you rougly inside a specific city
   return (
     <MapContainer
@@ -45,9 +48,12 @@ const Map: FunctionComponent<MapProps> = (props) => {
       doubleClickZoom={false}
       attributionControl={false}
     >
-      {/* More options here https://github.com/leaflet-extras/leaflet-providers 
-      but make sure to test them live, some of them only work on Localhost  */}
-      <TileLayer url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' />
+      <TileLayer
+        url={`https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=${MAPBOX_ACCESS_TOKEN}`}
+        id='mapbox/outdoors-v11'
+        tileSize={512}
+        zoomOffset={-1}
+      />
       <Marker position={props.position} icon={DefaultIcon} interactive={false} />
     </MapContainer>
   );

diff --git a/src/env.ts b/src/env.ts
@@ -56,6 +56,9 @@ export const env = createEnv({
       .default('https://metrics.fingerprinthub.com/web/v<version>/<apiKey>/loader_v<loaderVersion>.js'),
     NEXT_PUBLIC_ENDPOINT: z.string().min(1).default('https://metrics.fingerprinthub.com'),
 
+    // Playground
+    NEXT_PUBLIC_MAPBOX_API_TOKEN: z.string().min(1).optional(),
+
     // Fingerprint configuration for VPN Detection demo feat. Sealed client results
     NEXT_PUBLIC_SEALED_RESULTS_PUBLIC_API_KEY: z.string().min(1).default('2lFEzpuyfqkfQ9KJgiqv'),
     NEXT_PUBLIC_SEALED_RESULTS_SCRIPT_URL: z
@@ -82,6 +85,9 @@ export const env = createEnv({
     NEXT_PUBLIC_REGION: process.env.NEXT_PUBLIC_REGION,
     SERVER_API_KEY: process.env.SERVER_API_KEY,
 
+    // Playground
+    NEXT_PUBLIC_MAPBOX_API_TOKEN: process.env.NEXT_PUBLIC_MAPBOX_API_TOKEN,
+
     // E2E tests
     MIN_CONFIDENCE_SCORE: process.env.MIN_CONFIDENCE_SCORE,