add map controls

package.json

@@ -34,6 +34,7 @@
     "xpath": "^0.0.27"
   },
   "dependencies": {
-    "mini-css-extract-plugin": "^0.4.2"
+    "mini-css-extract-plugin": "^0.4.2",
+    "vue2-leaflet": "^1.0.2"
   }
 }

resources/components/popper.html

@@ -1,4 +1,7 @@
 <div class="popper" :class="{ 'has-arrow': arrow, 'd-none': !visible }">
     <div class="popper-arrow" ref="arrow" v-if="arrow"></div>
-    <slot />
+    <lazy v-if="lazy" :activate="visible">
+        <slot></slot>
+    </lazy>
+    <slot v-else></slot>
 </div>

resources/components/stop-details.html

@@ -14,6 +14,14 @@
                     </span>
                 </li>
             </ul>
+
+            <strong>Na mapie:</strong>
+            <div style="height: 350px">
+                <l-map :center="stop.location" :zoom=17>
+                    <l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png" attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'></l-tile-layer>
+                    <l-marker :lat-lng="stop.location"></l-marker>
+                </l-map>
+            </div>
         </div>
 
         <div class="col-md">

resources/components/stop.html

@@ -10,7 +10,7 @@
                 <fa :icon="['fal', details ? 'chevron-circle-up' : 'info-circle']"/>
             </button>
 
-            <button class="btn btn-action" ref="action-map">
+            <button class="btn btn-action" ref="action-map" @click="map = true" @focusout="map = false">
                 <fa :icon="['fal', 'map-marked-alt']"/>
             </button>
         </slot>
@@ -19,4 +19,13 @@
     <fold :visible="details" class="stop__details" lazy>
         <stop-details :stop="stop"></stop-details>
     </fold>
+
+    <popper reference="action-map" :visible="map" arrow placement="left-start">
+        <div style="height: 300px; width: 500px">
+            <l-map :center="stop.location" :zoom=17 :options="{ zoomControl: false, dragging: false }">
+                <l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png" attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'></l-tile-layer>
+                <l-marker :lat-lng="stop.location"></l-marker>
+            </l-map>
+        </div>
+    </popper>
 </div>

resources/styles/_popper.scss

@@ -59,13 +59,14 @@
   $arrow-color: white;
   $arrow-border: black;
 
-  $popper-padding: .5rem;
+  $popper-padding: 2px;
 
   padding: $popper-padding;
   background: white;
   border: 1px solid black;
   z-index: 1000;
   position: relative;
+  box-sizing: content-box;
 
   max-width: 500px;
   min-width: 200px;
@@ -86,7 +87,7 @@
             bottom: top
     );
 
-    &[x-placement^="#{$placement}"] {
+    &[x-placement*="#{$placement}"] {
       margin-#{map-get($opposite, $placement)}: $arrow-base;
 
       .popper-arrow {

resources/ts/app.ts

@@ -5,6 +5,8 @@ import '../styles/main.scss'
 import './font-awesome'
 import './filters'
 
+import "leaflet/dist/leaflet.css";
+
 import Popper from 'popper.js';
 import * as $ from "jquery";
 

resources/ts/components/index.ts

@@ -2,4 +2,5 @@ export * from './utils'
 export * from './picker'
 export * from './departures'
 export * from './stop'
-export * from './messages'
+export * from './messages'
+export * from './map'

resources/ts/components/map.ts

@@ -0,0 +1,19 @@
+import { LMap, LTileLayer, LMarker } from 'vue2-leaflet';
+import Vue from 'vue';
+
+import L = require('leaflet')
+import 'leaflet/dist/leaflet.css'
+
+import iconRetinaUrl = require('leaflet/dist/images/marker-icon-2x.png');
+import iconUrl       = require('leaflet/dist/images/marker-icon.png');
+import shadowUrl     = require('leaflet/dist/images/marker-shadow.png');
+
+delete L.Icon.Default.prototype._getIconUrl;
+
+L.Icon.Default.mergeOptions({ iconRetinaUrl, iconUrl, shadowUrl });
+
+Vue.component('LMap', LMap);
+Vue.component('LTileLayer', LTileLayer);
+Vue.component('LMarker', LMarker);
+
+export { LMap, LTileLayer, LMarker } from 'vue2-leaflet';

resources/ts/components/stop.ts

@@ -44,6 +44,7 @@ export class StopComponent extends Vue {
     public stop: Stop;
 
     details: boolean = false;
+    map: boolean = false;
 }
 
 Vue.component('Stop', StopComponent);

resources/ts/components/utils.ts

@@ -1,7 +1,6 @@
 import Vue from 'vue';
 import { Component, Prop, Watch } from "vue-property-decorator";
 import Popper, { Placement } from "popper.js";
-import * as $ from 'jquery';
 
 import popper   = require("../../components/popper.html");
 import lazy     = require("../../components/lazy.html");
@@ -21,6 +20,9 @@ export class PopperComponent extends Vue {
     @Prop({ type: Boolean, default: false })
     public visible: boolean;
 
+    @Prop(Boolean)
+    public lazy: boolean;
+
     private _popper;
 
     mounted() {
@@ -37,6 +39,7 @@ export class PopperComponent extends Vue {
     @Watch('visible')
     private onVisibilityUpdate() {
         this._popper.update();
+        window.dispatchEvent(new Event('resize'));
     }
 }
 

resources/ts/types/webpack.d.ts

@@ -7,3 +7,5 @@ declare module "*.svg" {
     const content: string;
     export = content;
 }
+
+declare module "*.png" {}

yarn.lock

@@ -1783,6 +1783,10 @@ lcid@^1.0.0:
   dependencies:
     invert-kv "^1.0.0"
 
+leaflet@^1.3.1:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.3.4.tgz#7f006ea5832603b53d7269ef5c595fd773060a40"
+
 load-json-file@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
@@ -3423,6 +3427,12 @@ vue-property-decorator@^7.0.0:
   dependencies:
     vue-class-component "^6.2.0"
 
+vue2-leaflet@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/vue2-leaflet/-/vue2-leaflet-1.0.2.tgz#73e0c09a30015db9a8dc0e9256443afb180d1fd5"
+  dependencies:
+    leaflet "^1.3.1"
+
 vue@^2.5.17:
   version "2.5.17"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.17.tgz#0f8789ad718be68ca1872629832ed533589c6ada"