map.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Karte</title>
    <style>
        body {
            padding: 0px;
            margin: 0;
        }

        *, *::after, *::before {
            scrollbar-width: none;
        }

        canvas {
            width: 100vw;
            height: 100vh;
            border: 1px dashed red;
            image-rendering: crisp-edges;
            cursor: grab;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        let map = [
            [[25,25],[25,100],[100,100],[100,25],[25,25],[25,50],[50,50],[50,25],[25,25]],
            [[75,75],[75,150],[150,150],[150,75],[75,75],[75,50],[50,50],[50,75],[75,75]],
            [[50,50],[50,150],[150,150],[150,50],[50,50],[50,75],[75,75],[75,50],[50,50]],
        ];

        canvas.width = window.innerWidth/2;
        canvas.height = window.innerHeight/2;

        let pos = [0,0];
        let view = [canvas.width/2,canvas.height/2];
        let debug = false;
        let pos1 = [];
        let grabbing = false;
        let scale = 1;
        let zoomStep = 0.5;
        let scaler = 5;
        let zoomBorders = [0.5,100]; // out , in
        let xy = {
            show: [true,true,true,true], // all,x,y,dot
            lineWidth: 5,
            colors: {
                dot: 'blue',
                x: 'red',
                y: 'lime'
            }
        }

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.save();
                ctx.translate(view[0],view[1]);
                ctx.scale(scale,scale);
                map.forEach(seg => {
                    pos = [seg[0],seg[1]];
                    seg.forEach(con => {
                        ctx.beginPath();
                            ctx.moveTo(pos[0],pos[1]);
                            pos = [con[0],con[1]];
                            ctx.strokeStyle = 'black';
                            ctx.lineWidth = 5;
                            ctx.lineTo(con[0],con[1]);
                        ctx.stroke();
                    });
                });
                drawXY();
            ctx.restore();
        }

        function drawXY() {
            if(xy.show[0] === true) {
                if(xy.show[1]) {
                    ctx.beginPath();
                        ctx.moveTo(canvas.width*-1,0);
                        ctx.strokeStyle = xy.colors.x;
                        ctx.lineWidth = xy.lineWidth;
                        ctx.lineTo(canvas.width,0);
                    ctx.stroke();
                }
                if(xy.show[2]) {
                    ctx.beginPath();
                        ctx.moveTo(0,canvas.height*-1);
                        ctx.strokeStyle = xy.colors.y;
                        ctx.lineWidth = xy.lineWidth;
                        ctx.lineTo(0,canvas.height);
                    ctx.stroke();
                }
                if(xy.show[3]) {
                    setPoint(0,0,xy.lineWidth,xy.colors.dot);
                }
            }
        }

        function setPoint(x = 0, y = 0, r = 5, pointColor = 'red') {
            ctx.beginPath();
                ctx.arc(x, y, r, 0, Math.PI * 2); 
                ctx.fillStyle = pointColor;
            ctx.fill(); 
        }

        document.addEventListener('keydown', function(e) {
            console.log(e.key);
            if(e.key === 'ArrowUp') {
                view[1]++;
                e.preventDefault();
            }else if(e.key === 'ArrowDown') {
                view[1]--;
                e.preventDefault();
            } else if(e.key === 'ArrowLeft') {
                view[0]++;
                e.preventDefault();
            } else if(e.key === 'ArrowRight') {
                view[0]--;
                e.preventDefault();
            } else if(e.key === '+') {
                scale += zoomStep;
                e.preventDefault();
            } else if(e.key === '-') {
                scale -= zoomStep;
                e.preventDefault();
            } else if(e.key === ' ') {
                view = [canvas.width/2,canvas.height/2];
                scale = 1;
                e.preventDefault();
            }
            draw();
            console.log(view);
        });

        canvas.onmousemove = (e) => {
            console.log(e);
            if(grabbing === true) {
                e.preventDefault();
                if(pos1.length === 0) {
                    pos1 = [e.screenX,e.screenY];
                } else {
                    let pos2 = [e.screenX,e.screenY];
                    console.log([pos1,pos2]);
                    if(pos1[0] > pos2[0]) {
                        view[0] -= scaler;
                    } else if(pos1[0] < pos2[0]) {
                        view[0] += scaler;
                    } else if(pos1[1] > pos2[1]) {
                        view[1] -= scaler;
                    } else if(pos1[1] < pos2[1]) {
                        view[1] += scaler;
                    }
                    pos1 = [e.screenX,e.screenY];
                    draw();
                }
            }
        }
        canvas.onmousedown = () => {grabbing = true; canvas.style.cursor = 'grabbing';}
        canvas.onmouseup = () => {grabbing = false; canvas.style.cursor = 'grab';}
        document.body.addEventListener('wheel', function (e) {
            e.preventDefault();
            if (e.deltaY < 0) {
                scale += zoomStep;
            } else {
                scale -= zoomStep;
            }

            scale = Math.min(Math.max(zoomBorders[0], scale), zoomBorders[1]);

            draw();
        }, { passive: false });

        draw();

        // DEBUG
        const orgLog = console.log;
        console.log = function(...arg) {
            if(debug === true) {
                orgLog.apply(console,arg);
            }
        }
    </script>
</body>
</html>