Use map styles from settings

whiletrue-industries · Jan 16, 2024 · f13492d · f13492d
1 parent 7f1c53a
commit f13492d
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 51 deletions.
diff --git a/CONFIGURATION.ts b/CONFIGURATION.ts
@@ -2,8 +2,6 @@ export const AIRTABLE_BASE = 'appuAa65B1iKwaXXb';
 export const AIRTABLE_API_KEY = 'keysbVnYZk16tqIT0';
 export const AIRTABLE_DETAILS_FORM = 'https://airtable.com/embed/shrynWjEy8fsje5t0';
 
-export const MAPBOX_STYLE = 'mapbox://styles/atlasmedliq/cl59k9bun000y14rzt3yy5ljt';
-export const MAPBOX_BASE_STYLE = 'mapbox://styles/atlasmedliq/ckiodibg82x1k17tcof8e9pmd';
 export const MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoiYXRsYXNtZWRsaXEiLCJhIjoiY2tpbXgzNW5qMHhhcjJ5cGtydHpkNnJqYyJ9.vfietFuvTA8S1vaGlm3CUQ';
 
 export const BASEROW_ENDPOINT = 'https://baserow.datacity.org.il';

diff --git a/projects/chronomaps/src/app/chronomap-page/map-selector/map-selector.component.ts b/projects/chronomaps/src/app/chronomap-page/map-selector/map-selector.component.ts
@@ -1,5 +1,4 @@
-import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
-import { MAPBOX_STYLE } from '../../../../../../CONFIGURATION';
+import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 import { MapService } from '../../map.service';
 
 import * as mapboxgl from 'mapbox-gl';
@@ -13,7 +12,7 @@ import { ChronomapDatabase } from '../../data.service';
   templateUrl: './map-selector.component.html',
   styleUrls: ['./map-selector.component.less']
 })
-export class MapSelectorComponent implements OnInit {
+export class MapSelectorComponent implements AfterViewInit {
 
   @Input() chronomap: ChronomapDatabase;
 
@@ -23,20 +22,20 @@ export class MapSelectorComponent implements OnInit {
 
   constructor(private mapSvc: MapService, private mapSelector: MapSelectorService) { }
 
-  ngOnInit(): void {
-    this.theMap = new mapboxgl.Map({
-      container: this.mapEl.nativeElement,
-      style: MAPBOX_STYLE,
-      minZoom: 3,
-    });
-    var geocoder = new MapboxGeocoder({
-      accessToken: mapboxgl.accessToken,
-      marker: false,
-    });
-    this.theMap.addControl(geocoder);
-    this.theMap.addControl(new mapboxgl.NavigationControl({visualizePitch: true}));
-    this.theMap.on('load', () => {
-      this.chronomap.ready.subscribe(() => {
+  ngAfterViewInit(): void {
+    this.chronomap.ready.subscribe(() => {
+      this.theMap = new mapboxgl.Map({
+        container: this.mapEl.nativeElement,
+        style: this.chronomap.mapStyle(),
+        minZoom: 3,
+      });
+      var geocoder = new MapboxGeocoder({
+        accessToken: mapboxgl.accessToken,
+        marker: false,
+      });
+      this.theMap.addControl(geocoder);
+      this.theMap.addControl(new mapboxgl.NavigationControl({visualizePitch: true}));
+      this.theMap.on('load', () => {
         if (this.chronomap.mapView()) {
           const options = MapService.parseMapView(this.chronomap.mapView());
           this.theMap.jumpTo(options);

diff --git a/projects/chronomaps/src/app/chronomap/chronomap.component.ts b/projects/chronomaps/src/app/chronomap/chronomap.component.ts
@@ -1,7 +1,6 @@
 import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild, effect, signal } from '@angular/core';
 import { DomSanitizer, SafeStyle, Title } from '@angular/platform-browser';
 import { ActivatedRoute } from '@angular/router';
-import { MAPBOX_BASE_STYLE, MAPBOX_STYLE } from 'CONFIGURATION';
 import * as mapboxgl from 'mapbox-gl';
 import { MapService } from '../map.service';
 import { timer, tap, delay, debounceTime, Subject, filter, first, switchMap, Observable, scheduled, animationFrameScheduler, throttleTime, Subscription } from 'rxjs';
@@ -120,45 +119,45 @@ export class ChronomapComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   ngAfterViewInit(): void {
-    this.baseMap = new mapboxgl.Map({
-      container: this.baseMapEl.nativeElement,
-      style: MAPBOX_BASE_STYLE,
-      minZoom: 3,
-      attributionControl: false,
-      logoPosition: 'bottom-right',
-    });
-    this.baseMap.addControl(new mapboxgl.AttributionControl({compact: true}), 'top-right');
-    this.baseMap.on('style.load', () => {
-      this.chronomap.ready.subscribe(() => {
+    this.chronomap.ready.subscribe(() => {
+      this.baseMap = new mapboxgl.Map({
+        container: this.baseMapEl.nativeElement,
+        style: this.chronomap.backgroundMapSytle(),
+        minZoom: 3,
+        attributionControl: false,
+        logoPosition: 'bottom-right',
+      });
+      this.baseMap.addControl(new mapboxgl.AttributionControl({compact: true}), 'top-right');
+      this.baseMap.on('style.load', () => {
         if (this.chronomap.mapView()) {
           this.baseMap.jumpTo(MapService.parseMapView(this.chronomap.mapView()));
         }
         this.updateMarkers(!this.chronomap.mapView());
       });
-    });
-    this.detailMap = new mapboxgl.Map({
-      container: this.detailMapEl.nativeElement,
-      style: MAPBOX_STYLE,
-      minZoom: 3,
-      attributionControl: false,
-      logoPosition: 'bottom-right',
-    });
-    if (this.layout.desktop()) {
-      this.baseMap.addControl(new mapboxgl.NavigationControl(), 'top-left');
-      this.detailMap.addControl(new mapboxgl.NavigationControl(), 'top-left');
-    }
-    this.detailMap.on('style.load', () => {
-      this.syncMaps();
+      this.detailMap = new mapboxgl.Map({
+        container: this.detailMapEl.nativeElement,
+        style: this.chronomap.mapStyle(),
+        minZoom: 3,
+        attributionControl: false,
+        logoPosition: 'bottom-right',
+      });
+      if (this.layout.desktop()) {
+        this.baseMap.addControl(new mapboxgl.NavigationControl(), 'top-left');
+        this.detailMap.addControl(new mapboxgl.NavigationControl(), 'top-left');
+      }
+      this.detailMap.on('style.load', () => {
+        this.syncMaps();
+        timer(0).subscribe(() => {
+          console.log('RESIZE');
+          window.dispatchEvent(new Event('resize'));
+        });
+      });
+      this.resizeObserver.observe(this.el.nativeElement);
       timer(0).subscribe(() => {
-        console.log('RESIZE');
-        window.dispatchEvent(new Event('resize'));
+        this.syncWidths();
+        this.initialize();
       });
     });
-    this.resizeObserver.observe(this.el.nativeElement);
-    timer(0).subscribe(() => {
-      this.syncWidths();
-      this.initialize();
-    });
   }
 
   ngOnDestroy() {