feat: use roadmap / satellite based on pb enum

nobkd · Mar 31, 2023 · f66a586 · f66a586
1 parent fce7093
commit f66a586
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 17 deletions.
diff --git a/src/map/map.ts b/src/map/map.ts
@@ -1,8 +1,26 @@
 import L from 'leaflet';
 
 import { readPB, readQ, type MapData } from './utils/read';
+import { type TileType } from './utils/parsePB';
 
-const tileLayer: string = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
+type Tiles = {
+    [K in TileType]: {
+        layer: string;
+        attr: string;
+    };
+};
+
+// https://leaflet-extras.github.io/leaflet-providers/preview/
+const tileProviders: Tiles = {
+    roadmap: {
+        layer: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', // OpenStreetMap.Mapnik
+        attr: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+    },
+    satellite: {
+        layer: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', // Esri.WorldImagery
+        attr: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
+    },
+};
 
 const gPos: string = 'pb';
 const gQuery: string = 'q';
@@ -24,7 +42,7 @@ if (params.has(gPos)) {
 }
 
 if (params.has(gZoom)) {
-    mapData.zoom = parseInt(params.get(gZoom) as string);
+    mapData.zoom = Number(params.get(gZoom) as string);
 }
 
 const map: L.Map = L.map('map', {
@@ -50,7 +68,7 @@ if (mapData.markers) {
     }
 }
 
-L.tileLayer(tileLayer, {
+L.tileLayer(tileProviders[mapData.tile ?? 'roadmap'].layer, {
     maxZoom: 19,
-    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+    //attribution: tileProviders[mapData.tile ?? 'roadmap'].attr,
 }).addTo(map);
diff --git a/src/map/utils/parsePB.ts b/src/map/utils/parsePB.ts
@@ -1,10 +1,13 @@
-function convertType(item: string): [string | number, boolean] {
+export type TileType = 'roadmap' | 'satellite';
+export const tileTypes = ['roadmap', 'satellite']
+
+function convertType(item: string): [string | TileType | number, boolean] {
     item = item.replace(/^\d+/, '');
     const type: string = item.charAt(0);
     item = item.substring(1);
 
     // s: string || v: timestamp || b: boolean?/byte?
-    let val: string | number = item;
+    let val: string | TileType | number = item;
 
     switch (type) {
         case 'f':
@@ -16,13 +19,7 @@ function convertType(item: string): [string | number, boolean] {
             val = parseInt(item);
             break;
         case 'e': // enum
-            switch (item) {
-                case '0':
-                    val = 'roadmap';
-                    break;
-                case '1':
-                    val = 'satellite';
-            }
+            val = tileTypes[parseInt(item) ?? 0]
             break;
         case 'z': // base64 encoded coords
             val = atob(item).replace(/[^\d\s\-\.\'\"\°SNWE]/g, '');

diff --git a/src/map/utils/read.ts b/src/map/utils/read.ts
@@ -1,4 +1,4 @@
-import { parsePB } from './parsePB';
+import { parsePB, tileTypes, type TileType } from './parsePB';
 import { parseDMS } from './parseDMS';
 
 const nominatimQ: string = 'https://nominatim.openstreetmap.org/search/?limit=1&format=json&q=';
@@ -17,6 +17,7 @@ export type MapData = {
         lon: number;
     };
     zoom?: number;
+    tile?: TileType;
 
     markers?: Marker[];
 };
@@ -30,15 +31,15 @@ export async function readPB(param: string): Promise<MapData> {
         markers: [],
     };
 
-    let data = parsePB(param.split('!').slice(1));
+    let data = parsePB(param.split('!').slice(1))[0];
 
-    let mapArea: number[] = data[0][0][0];
+    let mapArea: number[] = data[0][0];
     mapData.area = {
         lat: mapArea[2],
         lon: mapArea[1],
     };
 
-    let currMarkers: any[] | string = data[0][1];
+    let currMarkers: any[] | string = data[1];
     if (typeof currMarkers !== 'string') {
         for (let markers of currMarkers[0] as string[]) {
             if (markers.match(cidMatch)) {
@@ -60,6 +61,11 @@ export async function readPB(param: string): Promise<MapData> {
             }
         }
     }
+
+    if (tileTypes.includes(data[data.length - 1])) {
+        mapData.tile = data[data.length - 1];
+    }
+
     return mapData;
 }