feat: Add Streetview map

index.html

@@ -42,6 +42,8 @@
             <label for="wikimapia">Wikimapia</label>
             <input type="radio" id="google-maps" name="map-type" value="google">
             <label for="google-maps">Google maps</label>
+            <input type="radio" id="streetview" name="map-type" value="streetview">
+            <label for="streetview">Street view</label>
             <input type="radio" id="bing" name="map-type" value="bing">
             <label for="bing">BING</label>
             <input type="radio" id="adsb" name="map-type" value="adsb">

src/MapFactory.class.ts

@@ -1,5 +1,11 @@
 import { MapObserver } from './Map.class.ts';
-import { ADSBExchangeFrame, BingMapsFrame, GoogleMapsFrame, WikiMapiaFrame } from './Providers.ts';
+import {
+  ADSBExchangeFrame,
+  BingMapsFrame,
+  GoogleMapsFrame,
+  GoogleStreetViewFrame,
+  WikiMapiaFrame,
+} from './Providers.ts';
 import { GOOGLE_MAPS_API_KEY, MAX_ZOOM } from './constants.ts';
 import { MapType } from './types.ts';
 import { getMapOptions, getUrlParams } from './url.ts';
@@ -16,6 +22,8 @@ export class MapFactory {
     switch (type) {
       case 'google':
         return new GoogleMapsFrame($mapElement, mapOptions, { ...mapConfig, apiKey: GOOGLE_MAPS_API_KEY });
+      case 'streetview':
+        return new GoogleStreetViewFrame($mapElement, mapOptions, { ...mapConfig, apiKey: GOOGLE_MAPS_API_KEY });
       case 'wiki':
         return new WikiMapiaFrame($mapElement, mapOptions, mapConfig);
       case 'bing':

src/Providers.ts

@@ -14,6 +14,13 @@ export class GoogleMapsFrame extends MapObserver {
   }
 }
 
+// Google street view embed
+export class GoogleStreetViewFrame extends MapObserver {
+  public getUrl() {
+    return `https://www.google.com/maps/embed/v1/streetview?key=${this.config.apiKey}&location=${this.mapOptions.lat},${this.mapOptions.lng}&heading=0`;
+  }
+}
+
 export class WikiMapiaFrame extends MapObserver {
   getUrl() {
     return `https://wikimapia.org/#lat=${this.mapOptions.lat}&lon=${this.mapOptions.lng}&z=${this.mapOptions.zoom}&l=&ifr=1&m=w`;

src/types.ts

@@ -1,8 +1,8 @@
-export type MapType = 'wiki' | 'google' | 'osm' | 'bing' | 'adsb';
+export type MapType = 'wiki' | 'google' | 'streetview' | 'osm' | 'bing' | 'adsb';
 export type LayerName = 'OSM' | 'OSM DE' | 'Humanitarian' | 'Topography' | 'Cyclo' | 'Satellite' | 'Rail';
 
 // Create array based on the MapType
-const mapTypeArray: MapType[] = ['wiki', 'google', 'osm', 'bing', 'adsb'];
+const mapTypeArray: MapType[] = ['wiki', 'google', 'streetview', 'osm', 'bing', 'adsb'];
 const layerNameArray: LayerName[] = ['OSM', 'OSM DE', 'Humanitarian', 'Topography', 'Cyclo', 'Satellite', 'Rail'];
 
 export const isLayerName = (value: string): value is LayerName => layerNameArray.includes(value as LayerName);