feat(urlParams): add url params to define map view and context

src/demo-app/app/app.component.ts

@@ -41,7 +41,7 @@ export class AppComponent implements OnInit {
     // where "context" is an object with the same interface
     // as the contexts in ../contexts/
 
-    this.contextService.loadContext('_default');
+    this.contextService.loadDefaultContext();
 
     this.demoForm = this.formBuilder.group({
       location: ['', [

src/demo-app/app/module.ts

@@ -10,7 +10,8 @@ import { IgoModule, provideSearchSourceOptions,
          provideNominatimSearchSource,
          provideDataSourceSearchSource,
          LanguageLoader, provideLanguageLoader,
-         provideContextServiceOptions } from '../../lib';
+         provideContextServiceOptions,
+         RouteService } from '../../lib';
 
 import { AppComponent } from './app.component';
 
@@ -26,12 +27,14 @@ export function languageLoader(http: Http) {
   imports: [
     BrowserModule,
     RouterModule.forRoot([]),
+
     FormsModule,
     HttpModule,
     MaterialModule,
     IgoModule.forRoot()
   ],
   providers: [
+    RouteService,
     provideSearchSourceOptions({
       limit: 5
     }),

src/lib/context/shared/context.service.ts

@@ -1,13 +1,13 @@
-import { Inject, Injectable, InjectionToken } from '@angular/core';
+import { Inject, Injectable, InjectionToken, Optional } from '@angular/core';
 import { Http } from '@angular/http';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
-import { RequestService } from '../../core';
+import { RequestService, Message, RouteService } from '../../core';
 // Import from shared to avoid circular dependencies
 import { ToolService } from '../../tool/shared';
 
 import { Context, ContextServiceOptions,
-         DetailedContext } from './context.interface';
+         DetailedContext, ContextMapView } from './context.interface';
 
 
 export let CONTEXT_SERVICE_OPTIONS =
@@ -25,28 +25,54 @@ export class ContextService {
 
   public context$ = new BehaviorSubject<DetailedContext>(undefined);
   public contexts$ = new BehaviorSubject<Context[]>([]);
+  private defaultContextUri: string = '_default';
+  private mapViewFromRoute: ContextMapView = {};
 
   constructor(private http: Http,
               private requestService: RequestService,
               private toolService: ToolService,
               @Inject(CONTEXT_SERVICE_OPTIONS)
-              private options: ContextServiceOptions) {}
+              private options: ContextServiceOptions,
+              @Optional() private route: RouteService) {
+
+    this.readParamsFromRoute();
+  }
 
   loadContexts() {
     this.requestService.register(
       this.http.get(this.getPath(this.options.contextListFile)))
         .map(res => res.json())
-        .subscribe(contexts => this.contexts$.next(contexts));
+        .subscribe(contexts => {
+          this.contexts$.next(contexts);
+        });
+  }
+
+  loadDefaultContext() {
+    if (this.route && this.route.options.contextKey) {
+      this.route.queryParams.subscribe(params => {
+        const contextParam = params[this.route.options.contextKey as string];
+        if (contextParam) {
+          this.defaultContextUri = contextParam;
+        }
+        this.loadContext(this.defaultContextUri);
+      });
+    } else {
+      this.loadContext(this.defaultContextUri);
+    }
   }
 
   loadContext(uri: string) {
     const context = this.context$.value;
     if (context && context.uri === uri) { return; }
 
     this.requestService.register(
-      this.http.get(this.getPath(`${uri}.json`)), 'Context')
+      this.http.get(this.getPath(`${uri}.json`))
         .map(res => res.json())
-        .subscribe(_context => this.setContext(_context));
+        .catch(res => this.handleError(res))
+    , 'Context')
+    .subscribe((_context: DetailedContext) => {
+      this.setContext(_context);
+    });
   }
 
   setContext(context: DetailedContext) {
@@ -55,13 +81,50 @@ export class ContextService {
       this.toolService.setTools(context.tools);
     }
 
+    if (!context.map) {
+      context.map = {view: {}};
+    }
+
+    Object.assign(context.map.view, this.mapViewFromRoute);
+
     this.context$.next(context);
   }
 
+  private readParamsFromRoute() {
+    if (!this.route) {
+      return;
+    }
+
+    this.route.queryParams
+      .subscribe(params => {
+        const centerKey = this.route.options.centerKey;
+        if (centerKey && params[centerKey as string]) {
+          const centerParams = params[centerKey as string];
+          this.mapViewFromRoute.center = centerParams.split(',').map(Number);
+        }
+
+        const projectionKey = this.route.options.projectionKey;
+        if (projectionKey && params[projectionKey as string]) {
+          const projectionParam = params[projectionKey as string];
+          this.mapViewFromRoute.projection = projectionParam;
+        }
+
+        const zoomKey = this.route.options.zoomKey;
+        if (zoomKey && params[zoomKey as string]) {
+          const zoomParam = params[zoomKey as string];
+          this.mapViewFromRoute.zoom = Number(zoomParam);
+        }
+      });
+  }
+
   private getPath(file: string) {
     const basePath = this.options.basePath.replace(/\/$/, '');
 
     return `${basePath}/${file}`;
   }
 
+  private handleError(res: Response): Message[] {
+    throw [{text: 'Invalid context'}];
+  }
+
 }

src/lib/context/shared/layer-context.directive.ts

@@ -40,7 +40,9 @@ export class LayerContextDirective implements OnInit, OnDestroy {
 
     this.map.removeLayers();
 
-    context.layers.forEach((contextLayer) => this.addLayerToMap(contextLayer));
+    context.layers.forEach((contextLayer) => {
+      this.addLayerToMap(contextLayer);
+    });
   }
 
   private addLayerToMap(contextLayer: ContextLayer) {

src/lib/core/index.ts

@@ -5,4 +5,4 @@ export * from './language';
 export * from './media';
 export * from './message';
 export * from './request';
-
+export * from './route';

src/lib/core/route/index.ts

@@ -0,0 +1,2 @@
+export * from './route.service';
+export * from './route.interface';

src/lib/core/route/route.interface.ts

@@ -0,0 +1,7 @@
+export interface RouteServiceOptions {
+  centerKey?: boolean | string;
+  zoomKey?: boolean | string;
+  projectionKey?: boolean | string;
+  contextKey?: boolean | string;
+  searchKey?: boolean | string;
+}

src/lib/core/route/route.service.spec.ts

@@ -0,0 +1,26 @@
+import { TestBed, inject } from '@angular/core/testing';
+import { ActivatedRoute } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+
+import { RouteService } from '.';
+
+describe('RouteService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            params: Observable.of({zoom: 8})
+          }
+        },
+        RouteService
+      ]
+    });
+  });
+
+  it('should ...', inject([RouteService], (service: RouteService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/lib/core/route/route.service.ts

@@ -0,0 +1,38 @@
+import { Injectable, Inject, InjectionToken, Optional } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { RouteServiceOptions } from '.';
+
+export let ROUTE_SERVICE_OPTIONS =
+  new InjectionToken<RouteServiceOptions>('routeServiceOptions');
+
+export function provideRouteServiceOptions(options: RouteServiceOptions) {
+  return {
+    provide: ROUTE_SERVICE_OPTIONS,
+    useValue: options
+  };
+}
+
+@Injectable()
+export class RouteService {
+  public options: RouteServiceOptions;
+
+  constructor(public route: ActivatedRoute,
+              @Inject(ROUTE_SERVICE_OPTIONS)
+              @Optional() options: RouteServiceOptions) {
+
+    const defaultOptions = {
+      centerKey: 'center',
+      zoomKey: 'zoom',
+      projectionKey: 'projection',
+      contextKey: 'context',
+      searchKey: 'search'
+    };
+    this.options = Object.assign({}, defaultOptions, options);
+  }
+
+  get queryParams() {
+    return this.route.queryParams;
+  }
+
+}

src/lib/search/search-bar/search-url-param.directive.ts

@@ -1,5 +1,7 @@
-import { Directive, Self, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { Directive, Self, OnInit, Optional,
+         ChangeDetectorRef } from '@angular/core';
+
+import { RouteService } from '../../core';
 
 import { SearchBarComponent } from './search-bar.component';
 
@@ -10,18 +12,19 @@ import { SearchBarComponent } from './search-bar.component';
 export class SearchUrlParamDirective implements OnInit {
 
   constructor(@Self() private component: SearchBarComponent,
-              private route: ActivatedRoute) {}
+              private ref: ChangeDetectorRef,
+              @Optional() private route: RouteService) {}
 
   ngOnInit() {
-    const queryParams$$ = this.route.queryParams
-      .subscribe(params => {
-        if (queryParams$$ !== undefined) {
-          queryParams$$.unsubscribe();
-        }
-        if (params['search']) {
-          this.component.setTerm(params['search']);
+    if (this.route && this.route.options.searchKey) {
+      this.route.queryParams.subscribe(params => {
+        const searchParams = params[this.route.options.searchKey as string];
+        if (searchParams) {
+          this.component.setTerm(searchParams);
+          this.ref.detectChanges();
         }
       });
+    }
   }
 
 }