Add a basic map component

app/package.json

@@ -26,6 +26,7 @@
     "@fontsource-variable/material-symbols-rounded": "^5.0.7",
     "@fontsource/material-icons-round": "^5.0.7",
     "@fontsource/roboto": "^5.0.8",
+    "leaflet": "^1.9.4",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.13.0"
@@ -35,6 +36,7 @@
     "@angular/cli": "~16.1.8",
     "@angular/compiler-cli": "^16.1.0",
     "@types/jasmine": "~4.3.0",
+    "@types/leaflet": "^1.9.6",
     "jasmine-core": "~4.6.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",

app/src/app/app-routing.module.ts

@@ -6,6 +6,7 @@ import { CategoryComponent } from './category/category.component';
 import { AdminComponent } from './admin/admin.component';
 import { ProfileComponent } from './profile/profile.component';
 import { CreateComponent } from './create/create.component';
+import { MapComponent } from './map/map.component';
 
 const routes: Routes = [
   {
@@ -21,6 +22,10 @@ const routes: Routes = [
     path: 'collection',
     component: CollectionComponent,
   },
+  {
+    path: 'map/:id',
+    component: MapComponent,
+  },
   {
     path: 'category/:id',
     component: CategoryComponent,

app/src/app/app.component.scss

@@ -1,5 +1,13 @@
 .page-container {
-  padding-top: 84px;
+  box-sizing: border-box;
+  padding-top: 64px;
+  height: 100%;
+}
+
+@media (max-width: 600px) {
+  .page-container {
+    padding-top: 56px;
+  }
 }
 
 .fixedElement {

app/src/app/app.module.ts

@@ -28,6 +28,7 @@ import { YesPipe } from './services/yes.pipe';
 import { CreateComponent } from './create/create.component';
 import { MatRadioModule } from '@angular/material/radio';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MapComponent } from './map/map.component';
 
 @NgModule({
   declarations: [
@@ -39,6 +40,7 @@ import { ReactiveFormsModule } from '@angular/forms';
     ProfileComponent,
     YesPipe,
     CreateComponent,
+    MapComponent,
   ],
   imports: [
     BrowserModule,

app/src/app/home/home.component.html

@@ -8,6 +8,11 @@
     ><br />
     <span>{{ category.name }}</span>
   </a>
+
+  <a [routerLink]="['/map', 'liberstad']" class="category">
+    <mat-icon inline="true">map</mat-icon><br />
+    <span>City Tiles</span>
+  </a>
 </div>
 
 <p class="remark">
@@ -18,7 +23,6 @@
   >), use at your own risk. Data will be deleted and lost.
 </p>
 
-
 <!--
 <div class="categories">
   <a routerLink="/collection" class="category">

app/src/app/map/map.component.css

@@ -0,0 +1,14 @@
+/* .map-container {
+  height: 100%;
+  width: 100%;
+}
+
+.map-frame {
+  height: 100%;
+  width: 100%;
+} */
+
+#map {
+  width: 100%;
+  height: 100%;
+}

app/src/app/map/map.component.html

@@ -0,0 +1,85 @@
+<!-- <div class="page"> -->
+<!-- <h3>City Tiles: Liberstad</h3>
+
+  <p>Here are the public available City Tiles for purchase.</p> -->
+
+<div id="map"></div>
+
+<!-- <mat-card
+    class="collection-card"
+    *ngFor="let collection of collections; let i = index"
+  >
+    <mat-card-header>
+      <div mat-card-avatar class="example-header-image"></div>
+      <mat-card-title>{{ collection.name }}</mat-card-title>
+      <mat-card-subtitle>{{ collection.title }}</mat-card-subtitle>
+    </mat-card-header>
+    <img
+      mat-card-image
+      src="https://material.angular.io/assets/img/examples/shiba2.jpg"
+      alt="Photo of a Shiba Inu"
+    />
+    <mat-card-content>
+      <p>
+        {{ collection.description }}
+      </p>
+    </mat-card-content>
+    <mat-card-actions>
+      <button *ngIf="!collection.collection" mat-stroked-button>
+        OPEN OFFER</button
+      >&nbsp;
+      <button *ngIf="collection.collection" mat-stroked-button>
+        OPEN COLLECTION</button
+      >&nbsp;
+      <button mat-button>SHARE</button>
+    </mat-card-actions>
+  </mat-card> -->
+
+<!-- <mat-card class="collection-card">
+    <mat-card-header>
+      <div mat-card-avatar class="example-header-image"></div>
+      <mat-card-title>Shiba Inu</mat-card-title>
+      <mat-card-subtitle>Dog Breed</mat-card-subtitle>
+    </mat-card-header>
+    <img
+      mat-card-image
+      src="https://material.angular.io/assets/img/examples/shiba2.jpg"
+      alt="Photo of a Shiba Inu"
+    />
+    <mat-card-content>
+      <p>
+        The Shiba Inu is the smallest of the six original and distinct spitz
+        breeds of dog from Japan. A small, agile dog that copes very well with
+        mountainous terrain, the Shiba Inu was originally bred for hunting.
+      </p>
+    </mat-card-content>
+    <mat-card-actions>
+      <button mat-button>LIKE</button>
+      <button mat-button>SHARE</button>
+    </mat-card-actions>
+  </mat-card>
+
+  <mat-card class="collection-card">
+    <mat-card-header>
+      <div mat-card-avatar class="example-header-image"></div>
+      <mat-card-title>Shiba Inu</mat-card-title>
+      <mat-card-subtitle>Dog Breed</mat-card-subtitle>
+    </mat-card-header>
+    <img
+      mat-card-image
+      src="https://material.angular.io/assets/img/examples/shiba2.jpg"
+      alt="Photo of a Shiba Inu"
+    />
+    <mat-card-content>
+      <p>
+        The Shiba Inu is the smallest of the six original and distinct spitz
+        breeds of dog from Japan. A small, agile dog that copes very well with
+        mountainous terrain, the Shiba Inu was originally bred for hunting.
+      </p>
+    </mat-card-content>
+    <mat-card-actions>
+      <button mat-button>LIKE</button>
+      <button mat-button>SHARE</button>
+    </mat-card-actions>
+  </mat-card> -->
+<!-- </div> -->

app/src/app/map/map.component.ts

@@ -0,0 +1,63 @@
+import { Component, OnInit } from '@angular/core';
+import { ApiService } from '../services/api.service';
+import * as L from 'leaflet';
+
+@Component({
+  selector: 'app-map',
+  templateUrl: 'map.component.html',
+  styleUrls: ['map.component.css'],
+})
+export class MapComponent implements OnInit {
+  collections: any[] = [];
+
+  private map: any;
+
+  constructor(private apiService: ApiService) {}
+
+  async ngOnInit() {
+    this.map = L.map('map', {
+      attributionControl: true,
+
+      center: [58.358786, 7.547088],
+      zoom: 16,
+
+      minZoom: 10,
+      maxZoom: 22,
+      // maxBounds: [
+      //   [58.3, 7.6],
+      //   [58.4, 7.5],
+      // ],
+    });
+
+    // initialize the map on the "map" div with a given center and zoom
+    // this.map = L.map('map', {
+    //   center: [51.505, -0.09],
+    //   zoom: 13,
+    // });
+
+    this.map.attributionControl.setPrefix('');
+
+    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      maxZoom: 19,
+      attribution:
+        '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+    }).addTo(this.map);
+
+    this.collections = await this.apiService.categories();
+
+    // const rawResponse = await fetch(serviceUrl, {
+    //   method: 'POST',
+    //   headers: {
+    //     Accept: 'application/json',
+    //     'Content-Type': 'application/json',
+    //   },
+    //   body: jws,
+    // });
+
+    // Due to rendering issue on smaller screens / mobile devices, we do this extra refresh here.
+    // No longer needed due to fix for grid layout (overflow on content, making 100% height staying stable).
+    // Left as a future example on invalidation if needed.
+    //this.map.invalidateSize(false);
+    // this.map.setView([58.35877, 7.54705], 19);
+  }
+}

app/src/styles.scss

@@ -16,6 +16,8 @@
 
 @import "@fontsource/material-icons-round";
 
+@import "~leaflet/dist/leaflet.css";
+
 .dark-theme {
   @include angular-material-color($dark-theme);
   @include custom-components-theme($dark-theme);
@@ -70,7 +72,8 @@ p {
 }
 
 .page {
-  margin: 2em;
+  height: 100%;
+  box-sizing: content-box;
 }
 
 .link {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "blockcore-market",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "scripts": {
     "version": "node -p \"require('./package.json').version\""
   },