- replace moment with dayjs

- add leaflet.css inside main-styles.css
- add map.componetn for leaflet map
- bind properties to map via map-view.component

src/views/map-view/map-view.component.ts

@@ -1,53 +1,25 @@
 import { Options, Vue } from "vue-class-component";
-import { Prop } from "vue-property-decorator";
-import { Map, Control, MapOptions, LatLngBoundsExpression, tileLayer, TileLayer } from "leaflet";
+import MapComponent from "@/components/map/map.component.vue";
+import { Marker, MapOptions, Control, icon, LatLngBoundsExpression } from "leaflet";
 
-const DEFAULT_BASE_LAYER_NAME = "BaseLayer";
-const DEFAULT_BASE_LAYER_URL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
-const DEFAULT_BASE_LAYER_ATTRIBUTION = '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors';
+// const DEFAULT_BASE_LAYER_NAME = "BaseLayer";
+// const DEFAULT_BASE_LAYER_URL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
+// const DEFAULT_BASE_LAYER_ATTRIBUTION = '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors';
 
 @Options({
     name: "MapViewComponent",
-    components: {},
+    components: {
+        MapComponent,
+    },
 })
 export default class MapViewComponent extends Vue {
-    /**
-     * A map with the given ID is created inside this component. This ID can be used the get the map instance over the map cache service.
-     */
-    @Prop()
-    public mapId!: string;
+    public mapOptions: MapOptions = {
+        center: [48.208174, 16.373819],
+        zoom: 3,
+        zoomControl: false,
+    };
 
-    protected oldBaseLayer: Control.LayersObject = {};
-    protected map!: Map;
-    protected zoomControl!: Control.Zoom;
-
-    beforeMount() {
-        if (this.mapId === undefined || this.mapId === null) {
-            this.mapId = this.generateUUID();
-        }
-    }
-
-    protected initMap(): void {
-        this.map = new Map(this.mapId);
-        // this.mapService.setMap(this.mapId, this.map);
-        // this.onMapInitializedEvent.emit(this.mapId);
-
-        // if (this.baseMaps && this.baseMaps.size > 0) {
-        // 	this.baseMaps.forEach((layerOptions, key) => this.addBaseMap(layerOptions));
-        // } else {
-        // 	this.addBaseMap();
-        // }
-        // if (this.fitBounds) {
-        // 	this.map.fitBounds(this.fitBounds);
-        // }
-    }
-
-    private generateUUID(): string {
-        function s4() {
-            return Math.floor((1 + Math.random()) * 0x10000)
-                .toString(16)
-                .substring(1);
-        }
-        return s4() + s4() + "-" + s4() + "-" + s4() + "-" + s4() + "-" + s4() + s4() + s4();
-    }
+    // public onMapInitialized(newItem: string) {
+    //     console.log(newItem);
+    // }
 }

src/views/map-view/map-view.component.vue

@@ -1,12 +1,11 @@
 <template>
-    <div class="container">
-        <section class="section">
-            <div class="column is-full text-center">
-                <h1>TETHYS SERVICES</h1>
-                <p class="lead">Map</p>
-                <hr class="center-line" />
+    <div class="container main">
+        <div class="canvas-area is-8 column">
+            <h1>TETHYS SERVICES</h1>
+            <div id="div-map">
+                <MapComponent v-bind:mapId="'map'" v-bind:mapOptions="mapOptions"> </MapComponent>
             </div>
-        </section>
+        </div>
     </div>
 </template>
 
@@ -15,9 +14,44 @@ import MapViewComponent from "./map-view.component";
 export default MapViewComponent;
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 .section {
     font-size: 0.8rem;
     padding: 0;
 }
+.main {
+    // padding-top: 65px;
+    // flex-wrap: wrap;
+    // justify-content: space-around;
+
+    position: absolute;
+    overflow: hidden;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    overflow-y: scroll;
+}
+.canvas-area {
+    /* flex: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center; */
+    height: 100%;
+}
+
+#div-map {
+    position: relative;
+    height: 500px;
+    width: 500px;
+}
+
+.mapDesktop {
+    overflow: hidden;
+    position: absolute;
+    bottom: 30px;
+    top: 30px;
+    left: 30px;
+    right: 30px;
+}
 </style>