diff --git a/index.html b/index.html index 323a229..3414893 100644 --- a/index.html +++ b/index.html @@ -42,6 +42,8 @@ + + diff --git a/src/MapFactory.class.ts b/src/MapFactory.class.ts index 0f6f1a5..9b54748 100644 --- a/src/MapFactory.class.ts +++ b/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': diff --git a/src/Providers.ts b/src/Providers.ts index 57b1b4b..12ffe9f 100644 --- a/src/Providers.ts +++ b/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`; diff --git a/src/types.ts b/src/types.ts index 9a86583..7b3ae38 100644 --- a/src/types.ts +++ b/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);