Add Markdown support to map tooltips

This commit is contained in:
D. Berge
2021-05-14 01:22:16 +02:00
parent 2aba132220
commit 814e071698

View File

@@ -31,6 +31,7 @@ import 'leaflet-arrowheads'
import { mapActions, mapGetters, mapState } from 'vuex'; import { mapActions, mapGetters, mapState } from 'vuex';
import ftstamp from '@/lib/FormatTimestamp' import ftstamp from '@/lib/FormatTimestamp'
import zoomFitIcon from '@/assets/zoom-fit-best.svg' import zoomFitIcon from '@/assets/zoom-fit-best.svg'
import { markdown, markdownInline } from '@/lib/markdown';
var map; var map;
@@ -108,7 +109,7 @@ const layers = {
const speed = (p.length / (new Date(p.ts1) - new Date(p.ts0))) * 3.6/1.852 * 1000; const speed = (p.length / (new Date(p.ts1) - new Date(p.ts0))) * 3.6/1.852 * 1000;
const remarks = p.remarks const remarks = p.remarks
? "<hr/>"+p.remarks ? "<hr/>"+markdownInline(p.remarks)
: ""; : "";
const popup = `Planned sequence <b>${p.sequence}</b><br/> const popup = `Planned sequence <b>${p.sequence}</b><br/>
@@ -146,7 +147,7 @@ const layers = {
: ""; : "";
const remarks = p.remarks const remarks = p.remarks
? "<hr/>"+p.remarks ? "<hr/>"+markdown(p.remarks)
: ""; : "";
const popup = feature.geometry.type == "Point" const popup = feature.geometry.type == "Point"
@@ -181,7 +182,7 @@ const layers = {
const p = feature.properties; const p = feature.properties;
const remarks = p.remarks const remarks = p.remarks
? "<hr/>"+p.remarks ? "<hr/>"+markdown(p.remarks)
: ""; : "";
const popup = feature.geometry.type == "Point" const popup = feature.geometry.type == "Point"
@@ -612,8 +613,8 @@ export default {
onEachFeature (feature, layer) { onEachFeature (feature, layer) {
const p = feature.properties; const p = feature.properties;
const popup = (p.sequence const popup = (p.sequence
? `Event @ ${p.tstamp}<br/>Sequence ${p.sequence}<br/>Point <b>${p.line} / ${p.point}</b><br/><hr/>${p.remarks}` ? `Event @ ${p.tstamp}<br/>Sequence ${p.sequence}<br/>Point <b>${p.line} / ${p.point}</b><br/><hr/>${markdownInline(p.remarks)}`
: `Event @ ${p.tstamp}<br/><hr/>${p.remarks}`) : `Event @ ${p.tstamp}<br/><hr/>${markdownInline(p.remarks)}`)
+ (p.labels.length? `<br/>[<i>${p.labels.join(", ")}</i>]` : ""); + (p.labels.length? `<br/>[<i>${p.labels.join(", ")}</i>]` : "");
layer.bindTooltip(popup, {sticky: true}); layer.bindTooltip(popup, {sticky: true});
} }