diff --git a/src/app/app.component.css b/src/app/app.component.css
index e69de29..b62277e 100644
--- a/src/app/app.component.css
+++ b/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 {
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 432f89a..3170eae 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,3 +1,3 @@
-{{title}}
-
-
+
+
+
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index ac5801b..65c5977 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -7,4 +7,5 @@ import { Component } from '@angular/core';
})
export class AppComponent {
title = 'Sartaguda suena';
+ isMap = false;
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 78defcd..08753fa 100644
--- a/src/app/app.module.ts
+++ b/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
diff --git a/src/app/map-box/map-box.component.ts b/src/app/map-box/map-box.component.ts
index d19021e..59689df 100644
--- a/src/app/map-box/map-box.component.ts
+++ b/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/
----*/
diff --git a/src/app/soinu-progress/soinu-progress.component.css b/src/app/soinu-progress/soinu-progress.component.css
new file mode 100644
index 0000000..cb0aa09
--- /dev/null
+++ b/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); }
+}
+
+
diff --git a/src/app/soinu-progress/soinu-progress.component.html b/src/app/soinu-progress/soinu-progress.component.html
new file mode 100644
index 0000000..ace9f25
--- /dev/null
+++ b/src/app/soinu-progress/soinu-progress.component.html
@@ -0,0 +1,201 @@
+
+
+
+