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 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset='utf-8'>
+  <title>Leader Line with Markdown</title>
+  <meta property="og:description" content="Add a default marker to the map." />
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@4.5.2/dist/maplibre-gl.css' />
+  <script src='https://unpkg.com/maplibre-gl@4.5.2/dist/maplibre-gl.js'></script>
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/leader-line/1.0.7/leader-line.min.js'></script>
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/marked/14.0.0/marked.min.js'></script>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+      display: flex;
+    }
+    html,
+    body,
+    #map,
+    #markdown {
+      height: 100%;
+    }
+    #map,
+    #markdown {
+      flex: 50%;
+    }
+    pre {
+      display: none;
+    }
+  </style>
+</head>
+<body>
+  <div id="map"></div>
+  <div id="markdown"></div>
+  <pre id="markdown-raw"># Some Markdown rendered Content
+[Place 1]
+## Title 2
+- item
+- subitem
+- subusb
+Text before link [Place 2]
+![](https://i.ibb.co/3N65X9n/2021-05-27-6-21-48.png)
+[Place 1]: geo:12.55,55.66
+[Place 2]: geo:13,55.8
+  </pre>
+  <script>
+    const map = new maplibregl.Map({
+      container: 'map',
+      style:
+        'https://raw.githubusercontent.com/maplibre/demotiles/gh-pages/style.json',
+      center: [12.550343, 55.665957],
+      zoom: 8
+    });
+    document.getElementById('markdown').innerHTML = marked.parse(document.getElementById('markdown-raw').innerHTML);
+    const links = Array.from(document.querySelectorAll('#markdown a'))
+    links.forEach(link => {
+      let location = link.href.split('geo:')[1]
+      let lon = Number(location.split(',')[0])
+      let lat = Number(location.split(',')[1])
+      link.marker = new maplibregl.Marker()
+        .setLngLat([lon, lat])
+        .addTo(map)
+        .getElement()
+      link.line = new LeaderLine(
+        link,
+        // LeaderLine.mouseHoverAnchor(link),
+        // line.marker.getElement(),
+        LeaderLine.areaAnchor(link.marker, 'circle'),
+        {
+          middleLabel: LeaderLine.captionLabel('MIDDLE'),
+          offset: [-20, 0],
+          startSocket: 'auto',
+        }
+      )
+      link.line.hide()
+      link.visibility = false
+      link.addEventListener("click", (event) => {
+        link.visibility ? link.line.hide() : link.line.show()
+        // if (link.visibility) {
+        //   link.line.hide()
+        // }
+        // else {
+        //   link.line.show()
+        // }
+        link.visibility = !link.visibility
+      })
+    })
+    function isChildOutsideParent(childElement, parentElement) {
+      // 获取边界框信息
+      const childRect = childElement.getBoundingClientRect();
+      const parentRect = parentElement.getBoundingClientRect();
+      return (
+        childRect.left < parentRect.left ||
+        childRect.right > parentRect.right ||
+        childRect.top < parentRect.top ||
+        childRect.bottom > parentRect.bottom
+      );
+    }
+    map.on('move', () => {
+      links.forEach(link => {
+        if (isChildOutsideParent(link.marker, map.getCanvas())) {
+          link.line.hide()
+          return
+        } else {
+          if (link.visibility) link.line.show()
+        }
+        link.line.position()
+      })
+    })
+  </script>
+</body>
+</html>

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	![](https://i.ibb.co/3N65X9n/2021-05-27-6-21-48.png)
	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>