Commit 9e7069a7 authored by dagal's avatar dagal
Browse files

A fancy arrow to point from origin to dest zones

parent b4b30eef
import "./index.css"; import "./index.css";
import L from "leaflet"; import L from "leaflet";
import LContextMenu from "leaflet-contextmenu"; import LContextMenu from "leaflet-contextmenu";
import LPolylineDecorator from "leaflet-polylinedecorator";
import RectSelect from "./Map.RectSelect"; import RectSelect from "./Map.RectSelect";
import Vue from "vue"; import Vue from "vue";
import Hello from "./components/Hello.vue"; import Hello from "./components/Hello.vue";
...@@ -36,6 +37,8 @@ let app = new Vue({ ...@@ -36,6 +37,8 @@ let app = new Vue({
}, },
selectedStop: {id: 0, name: ""}, selectedStop: {id: 0, name: ""},
selectedStops: [], selectedStops: [],
selectedBounds: null,
arrow: null,
startStop: null, startStop: null,
endStop: null, endStop: null,
startLine: null, startLine: null,
...@@ -114,6 +117,18 @@ let app = new Vue({ ...@@ -114,6 +117,18 @@ let app = new Vue({
} }
}, },
makeArrow(origin, dest) {
let arrow = L.polyline([origin, dest], {color: "red", renderer: canvasRenderer}).addTo(map);
let arrowDecorator = L.polylineDecorator(arrow, {
patterns: [
{offset: '100%', repeat: 0, symbol: L.Symbol.arrowHead({pixelSize: 15, polygon: false,
pathOptions: {color: "red", stroke: true, renderer: canvasRenderer}})}
]
}).addTo(map);
return [arrow, arrowDecorator];
},
selectStops(bounds) { selectStops(bounds) {
let selectedIds = []; let selectedIds = [];
...@@ -128,9 +143,25 @@ let app = new Vue({ ...@@ -128,9 +143,25 @@ let app = new Vue({
if (selectedIds.length > 0) { if (selectedIds.length > 0) {
if (this.selectedStops.length > 0) { if (this.selectedStops.length > 0) {
let [arrow, arrowDecorator] = this.makeArrow(this.selectedBounds.getCenter(), bounds.getCenter());
arrow.bindPopup(() => {
return "Tomorrow I'll display some stats here :D";
}, { maxWidth: "auto" });
setTimeout(() => arrow.openPopup(), 500);
arrow.on("popupclose", () => {
console.log("wtf closed");
arrow.removeFrom(map);
arrowDecorator.removeFrom(map);
this.clearSelectedStops();
});
console.log("query! " + this.selectedStops + selectedIds); console.log("query! " + this.selectedStops + selectedIds);
} else { } else {
this.selectedStops = selectedIds; this.selectedStops = selectedIds;
this.selectedBounds = bounds;
} }
} }
}, },
......
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
"dotenv-webpack": "^1.7.0", "dotenv-webpack": "^1.7.0",
"leaflet": "^1.4.0", "leaflet": "^1.4.0",
"leaflet-contextmenu": "git+https://github.com/aratcliffe/Leaflet.contextmenu.git", "leaflet-contextmenu": "git+https://github.com/aratcliffe/Leaflet.contextmenu.git",
"leaflet-polylinedecorator": "^1.6.0",
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-async-computed": "^3.6.1", "vue-async-computed": "^3.6.1",
"vue-router": "^3.0.6", "vue-router": "^3.0.6",
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment