I have a simple static HTML page using MarkMap. I link to two required libraries to enable the functionality. I don’t quite know why I can render the mindmap AND the default Toolbar, but no clicks on the toolbar perform the corresponding actions (e.g., Zoom In, Zoom Out, Recenter, etc.). Any help is greatly appreciated.
Code and Stackblitz link follow:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Markmap</title>
<style>
svg.markmap {
width: 100%;
height: 100vh;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>
<body>
<div id="container">
<div id="mm" class="markmap">
<script type="text/template">
---
markmap:
maxWidth: 300
colorFreezeLevel: 2
---
# markmap
## Links
- <https://markmap.js.org/>
- [GitHub](https://github.com/markmap/markmap)
## Related
- [coc-markmap](https://github.com/markmap/coc-markmap)
- [gatsby-remark-markmap](https://github.com/markmap/gatsby-remark-markmap)
## Features
- links
- **inline** ~~text~~ *styles*
- multiline
text
- `inline code`
- Katex - $x = {-b pm sqrt{b^2-4ac} over 2a}$
- This is a very very very very very very very very very very very very very very very long line.
</script>
<script>
const { markmap } = window;
const { Toolbar } = markmap;
const { el } = Toolbar.create(mm);
el.style.position = 'absolute';
el.style.bottom = '0.5rem';
el.style.right = '0.5rem';
// `container` could be the element that contains both the markmap and the toolbar
container.append(el);
</script>
</div>
</div>
</body>
</html>