diff options
| author | Hsieh Chin Fan <pham@topo.tw> | 2024-08-15 20:56:51 +0800 |
|---|---|---|
| committer | Hsieh Chin Fan <pham@topo.tw> | 2024-08-15 20:56:51 +0800 |
| commit | 780d2bca89b769bc6a1b8d3dbe22a6bb4616f733 (patch) | |
| tree | 014a7df39f7df78a2bc1f05d861c6d9b03d0db60 /snippets/html_template_map_leaderline | |
| parent | 5053d2e031ed63f4ef4c5fd6f7d18a217e1654b7 (diff) | |
Update
Diffstat (limited to 'snippets/html_template_map_leaderline')
| -rw-r--r-- | snippets/html_template_map_leaderline | 135 |
1 files changed, 135 insertions, 0 deletions
diff --git a/snippets/html_template_map_leaderline b/snippets/html_template_map_leaderline new file mode 100644 index 0000000..afcec6d --- /dev/null +++ b/snippets/html_template_map_leaderline | |||
| @@ -0,0 +1,135 @@ | |||
| 1 | <!DOCTYPE html> | ||
| 2 | <html lang="en"> | ||
| 3 | |||
| 4 | <head> | ||
| 5 | <meta charset='utf-8'> | ||
| 6 | <title>Leader Line with Markdown</title> | ||
| 7 | |||
| 8 | <meta property="og:description" content="Add a default marker to the map." /> | ||
| 9 | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| 10 | |||
| 11 | <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@4.5.2/dist/maplibre-gl.css' /> | ||
| 12 | |||
| 13 | <script src='https://unpkg.com/maplibre-gl@4.5.2/dist/maplibre-gl.js'></script> | ||
| 14 | <script src='https://cdnjs.cloudflare.com/ajax/libs/leader-line/1.0.7/leader-line.min.js'></script> | ||
| 15 | <script src='https://cdnjs.cloudflare.com/ajax/libs/marked/14.0.0/marked.min.js'></script> | ||
| 16 | <style> | ||
| 17 | body { | ||
| 18 | margin: 0; | ||
| 19 | padding: 0; | ||
| 20 | display: flex; | ||
| 21 | } | ||
| 22 | |||
| 23 | html, | ||
| 24 | body, | ||
| 25 | #map, | ||
| 26 | #markdown { | ||
| 27 | height: 100%; | ||
| 28 | } | ||
| 29 | |||
| 30 | #map, | ||
| 31 | #markdown { | ||
| 32 | flex: 50%; | ||
| 33 | } | ||
| 34 | |||
| 35 | pre { | ||
| 36 | display: none; | ||
| 37 | } | ||
| 38 | </style> | ||
| 39 | </head> | ||
| 40 | |||
| 41 | <body> | ||
| 42 | <div id="map"></div> | ||
| 43 | <div id="markdown"></div> | ||
| 44 | <pre id="markdown-raw"># Some Markdown rendered Content | ||
| 45 | [Place 1] | ||
| 46 | |||
| 47 | ## Title 2 | ||
| 48 | |||
| 49 | - item | ||
| 50 | - subitem | ||
| 51 | - subusb | ||
| 52 | |||
| 53 | Text before link [Place 2] | ||
| 54 |  | ||
| 55 | |||
| 56 | [Place 1]: geo:12.55,55.66 | ||
| 57 | [Place 2]: geo:13,55.8 | ||
| 58 | </pre> | ||
| 59 | |||
| 60 | <script> | ||
| 61 | const map = new maplibregl.Map({ | ||
| 62 | container: 'map', | ||
| 63 | style: | ||
| 64 | 'https://raw.githubusercontent.com/maplibre/demotiles/gh-pages/style.json', | ||
| 65 | center: [12.550343, 55.665957], | ||
| 66 | zoom: 8 | ||
| 67 | }); | ||
| 68 | |||
| 69 | document.getElementById('markdown').innerHTML = marked.parse(document.getElementById('markdown-raw').innerHTML); | ||
| 70 | |||
| 71 | const links = Array.from(document.querySelectorAll('#markdown a')) | ||
| 72 | links.forEach(link => { | ||
| 73 | let location = link.href.split('geo:')[1] | ||
| 74 | let lon = Number(location.split(',')[0]) | ||
| 75 | let lat = Number(location.split(',')[1]) | ||
| 76 | link.marker = new maplibregl.Marker() | ||
| 77 | .setLngLat([lon, lat]) | ||
| 78 | .addTo(map) | ||
| 79 | .getElement() | ||
| 80 | |||
| 81 | link.line = new LeaderLine( | ||
| 82 | link, | ||
| 83 | // LeaderLine.mouseHoverAnchor(link), | ||
| 84 | // line.marker.getElement(), | ||
| 85 | LeaderLine.areaAnchor(link.marker, 'circle'), | ||
| 86 | { | ||
| 87 | middleLabel: LeaderLine.captionLabel('MIDDLE'), | ||
| 88 | offset: [-20, 0], | ||
| 89 | startSocket: 'auto', | ||
| 90 | } | ||
| 91 | ) | ||
| 92 | link.line.hide() | ||
| 93 | |||
| 94 | link.visibility = false | ||
| 95 | |||
| 96 | link.addEventListener("click", (event) => { | ||
| 97 | link.visibility ? link.line.hide() : link.line.show() | ||
| 98 | // if (link.visibility) { | ||
| 99 | // link.line.hide() | ||
| 100 | // } | ||
| 101 | // else { | ||
| 102 | // link.line.show() | ||
| 103 | // } | ||
| 104 | link.visibility = !link.visibility | ||
| 105 | }) | ||
| 106 | }) | ||
| 107 | |||
| 108 | function isChildOutsideParent(childElement, parentElement) { | ||
| 109 | // 获取边界框信息 | ||
| 110 | const childRect = childElement.getBoundingClientRect(); | ||
| 111 | const parentRect = parentElement.getBoundingClientRect(); | ||
| 112 | |||
| 113 | return ( | ||
| 114 | childRect.left < parentRect.left || | ||
| 115 | childRect.right > parentRect.right || | ||
| 116 | childRect.top < parentRect.top || | ||
| 117 | childRect.bottom > parentRect.bottom | ||
| 118 | ); | ||
| 119 | } | ||
| 120 | map.on('move', () => { | ||
| 121 | links.forEach(link => { | ||
| 122 | if (isChildOutsideParent(link.marker, map.getCanvas())) { | ||
| 123 | link.line.hide() | ||
| 124 | return | ||
| 125 | } else { | ||
| 126 | if (link.visibility) link.line.show() | ||
| 127 | } | ||
| 128 | link.line.position() | ||
| 129 | }) | ||
| 130 | }) | ||
| 131 | |||
| 132 | </script> | ||
| 133 | </body> | ||
| 134 | |||
| 135 | </html> | ||