|
Looks like a big SVG made with Inkscape: xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
And the controls seem to be made with https://github.com/timmywil/panzoom: <script src="https://unpkg.com/@panzoom/panzoom@4.5.1/dist/panzoom.min.js"></script>
<script type="text/javascript">
const panzoom = Panzoom(elem, {
maxScale: 12
})
m = {
animate: true,
relative: true,
maxScale: 80
}
right.addEventListener('click', function() {
panzoom.pan(100, 0, m);
})
left.addEventListener('click', function() {
panzoom.pan(-100, 0, m);
})
lu.addEventListener('click', function() {
panzoom.pan(-100, -100, m);
})
up.addEventListener('click', function() {
panzoom.pan(0, -100, m);
})
ru.addEventListener('click', function() {
panzoom.pan(100, -100, m);
})
down.addEventListener('click', function() {
panzoom.pan(0, 100, m);
})
ld.addEventListener('click', function() {
panzoom.pan(-100, 100, m);
})
rd.addEventListener('click', function() {
panzoom.pan(100, 100, m);
})
center.addEventListener('click', panzoom.reset)
zoom_in.addEventListener('click', panzoom.zoomIn)
zoom_out.addEventListener('click', panzoom.zoomOut)
elem.parentElement.addEventListener('wheel', panzoom.zoomWithWheel)
</script>
|