chore(views/geomap): basic initialization

apps/client/src/widgets/geo_map.ts

@@ -8,10 +8,7 @@ const TPL = /*html*/`\
     <style>
         .note-detail-geo-map,
         .geo-map-widget,
-        .geo-map-container {
-            height: 100%;
-            overflow: hidden;
-        }
+
 
         .leaflet-top,
         .leaflet-bottom {
@@ -19,7 +16,6 @@ const TPL = /*html*/`\
         }
     </style>
 
-    <div class="geo-map-container"></div>
 </div>`;
 
 export type Leaflet = typeof L;
@@ -27,8 +23,6 @@ export type InitCallback = (L: Leaflet) => void;
 
 export default class GeoMapWidget extends NoteContextAwareWidget {
 
-    map?: Map;
-    $container!: JQuery<HTMLElement>;
     private initCallback?: InitCallback;
 
     constructor(widgetMode: "type", initCallback?: InitCallback) {
@@ -39,20 +33,10 @@ export default class GeoMapWidget extends NoteContextAwareWidget {
     doRender() {
         this.$widget = $(TPL);
 
-        this.$container = this.$widget.find(".geo-map-container");
-
-        const map = L.map(this.$container[0], {
-            worldCopyJump: true
-        });
-
-        this.map = map;
         if (this.initCallback) {
             this.initCallback(L);
         }
 
-        L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
-            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-            detectRetina: true
-        }).addTo(map);
+
     }
 }

apps/client/src/widgets/view_widgets/geo_view/index.ts

@@ -1,4 +1,5 @@
 import ViewMode, { ViewModeArgs } from "../view_mode.js";
+import L from "leaflet";
 
 const TPL = /*html*/`
 <div class="geo-view">
@@ -8,26 +9,46 @@ const TPL = /*html*/`
             position: relative;
             height: 100%;
         }
+
+        .geo-map-container {
+            height: 100%;
+            overflow: hidden;
+        }
     </style>
 
-    Geo View is not implemented yet.
+    <div class="geo-map-container"></div>
 </div>`;
 
 export default class GeoView extends ViewMode<{}> {
 
     private $root: JQuery<HTMLElement>;
+    private $container!: JQuery<HTMLElement>;
+    private map?: L.Map;
 
     constructor(args: ViewModeArgs) {
         super(args, "geoMap");
         this.$root = $(TPL);
+        this.$container = this.$root.find(".geo-map-container");
         args.$parent.append(this.$root);
     }
 
     async renderList() {
-        console.log("Rendered");
+        this.renderMap();
         return this.$root;
     }
 
+    async renderMap() {
+        const map = L.map(this.$container[0], {
+            worldCopyJump: true
+        });
+        L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
+            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+            detectRetina: true
+        }).addTo(map);
+
+        this.map = map;
+    }
+
     get isFullHeight(): boolean {
         return true;
     }