Progress and home content

src/app/app.component.css

@@ -0,0 +1,10 @@
+soinu-progress {
+	margin: auto;
+	float: left;
+	width: 100%;
+	text-align: center;
+	margin-top: 5%;
+}
+
+map-box {
+}

src/app/app.component.html

@@ -1,3 +1,3 @@
-<h1>{{title}}</h1>
-
-<map-box></map-box>
+<map-box *ngIf="isMap"></map-box>
+<soinu-progress *ngIf="!isMap"></soinu-progress>
+<button pButton label="Map" *ngIf="!isMap" (click)="isMap=true">Map</button>

src/app/app.component.ts

@@ -7,4 +7,5 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'Sartaguda suena';
+	isMap = false;
 }

src/app/app.module.ts

@@ -5,12 +5,14 @@ import { MapService } from './map.service';
 
 import { AppComponent } from './app.component';
 import { MapBoxComponent } from './map-box/map-box.component';
+import { SoinuProgressComponent } from './soinu-progress/soinu-progress.component';
 
 
 @NgModule({
   declarations: [
     AppComponent,
-    MapBoxComponent
+    MapBoxComponent,
+    SoinuProgressComponent
   ],
   imports: [
     BrowserModule

src/app/map-box/map-box.component.ts

@@ -37,8 +37,10 @@ export class MapBoxComponent implements OnInit {
 		this.map = new mapboxgl.Map({
 			container: 'map',
 		  //style: 'mapbox://styles/mapbox/outdoors-v9',
-			style: 'mapbox://styles/lrullo/cjm3ppgo50j492snxn2lwak88',
+			style: 'mapbox://styles/lrullo/cjm4bqlj2b36y2ss4mpq41uxs',
 			zoom: 13,
+			pitch: 60, // pitch in degrees
+    	bearing: -60, // bearing in degrees
 			center: [this.lng, this.lat]
 		});
 
@@ -92,7 +94,7 @@ export class MapBoxComponent implements OnInit {
 				type: 'geojson',
 				data: '/assets/soinumapa.geojson',
 				cluster:true,
-				clusterMaxZoom: 20,
+				clusterMaxZoom: 30,
 				clusterRadius: 50
 			})
 	
@@ -171,7 +173,7 @@ export class MapBoxComponent implements OnInit {
 	        filter: ["!", ["has", "point_count"]],
 					layout: {
             'icon-image': "icon-red",
-						'icon-size': 1,
+						'icon-size': 0.5,
         	},
 					paint: {
 						'icon-opacity': ["case",
@@ -195,4 +197,5 @@ https://www.mapbox.com/help/working-with-large-geojson-data/
 https://www.mapbox.com/mapbox-gl-js/example/cluster/
 https://www.mapbox.com/mapbox-gl-js/example/popup-on-hover/
 https://www.mapbox.com/mapbox-gl-js/example/hover-styles/
+https://angularfirebase.com/lessons/build-realtime-maps-in-angular-with-mapbox-gl/
 ----*/

src/app/soinu-progress/soinu-progress.component.css

@@ -0,0 +1,28 @@
+.soinuhex { display:block; opacity:0; transition-duration:1s;}
+
+#hex001 {
+ animation: hideshow 10s ease infinite;
+}
+
+#hex002 {
+animation: hideshow 10s 1.5s ease infinite;
+}
+
+#hex003 {
+animation: hideshow 10s 3s ease infinite;
+}
+
+.soinuwave { animation: moveX 100s ease infinite; }
+
+@keyframes hideshow {
+	0% { opacity:0; }
+	50% { opacity:1; }
+	100% { opacity:0; }
+}
+
+@keyframes moveX {
+	0% { transform: translateX(-1px); }
+	100% { transform: translateX(1px); }
+}
+
+

src/app/soinu-progress/soinu-progress.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SoinuProgressComponent } from './soinu-progress.component';
+
+describe('SoinuProgressComponent', () => {
+  let component: SoinuProgressComponent;
+  let fixture: ComponentFixture<SoinuProgressComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SoinuProgressComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SoinuProgressComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/soinu-progress/soinu-progress.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'soinu-progress',
+  templateUrl: './soinu-progress.component.html',
+  styleUrls: ['./soinu-progress.component.css']
+})
+export class SoinuProgressComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}