Mapka JS "przeskakuje" zamiast się płynnie przesuwać/przybliżać

0

Witam serdecznie,
Mam taką mapkę: http://serwer1356363.home.pl/test/mapka.php

<!DOCTYPE HTML>
<html lang="pl">
    <head>
         
        <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
 

    </head>

    <body>
        <div id="container">
         
                 
            <section id="content"> 

                <style>
    #flightMap {
        width: 845px;
        height: 466px;
        position: relative;
        overflow: hidden;
    }

    #flightMapContainer {
        width: 845px;
        height: 466px;
        position: relative;
    }

    canvas {
        background: transparent;
        position: absolute;
        top: 0;
        left: 0;
    }

    #zoomButtons {
        position: absolute;
        bottom: 10px;
        left: 10px;
        width: 34px;
        color: #fff;
    }

    #buttonsZoom > button {
        display: block;
        padding: 0;
        border: none;
    }

    #buttonsZoom {
        float: right;
        -webkit-box-shadow: 0px 0px 25px 0px rgba(145, 142, 149, 0.3);
        -moz-box-shadow:    0px 0px 25px 0px rgba(145, 142, 149, 0.3);
        box-shadow:         0px 0px 25px 0px rgba(145, 142, 149, 0.3);
    }

    #zoomIn, #zoomOut {
        width: 34px;
        height: 34px;
        margin: 0;
        padding: 0;
    }

    #zoomIn {
        background: url('images/zoomin.png');
        margin-bottom: 0px;
    }

    #zoomOut {
        background: url('images/zoomout.png');
        margin-top: 0px;
    }

    #zoomIn:hover {
        background: url('images/zoominhover.png');
    }

    #zoomOut:hover {
        background: url('images/zoomouthover.png');
    }

</style>



<div id="flightMap">
    <div id="flightMapContainer">
        <canvas id="secondBackgroundElements" width="815" height="466"></canvas>
        <canvas id="generalElements" width="815" height="466"><div>
                <img src="images/error_icon.png" class="feedback-icon">
                <p>
                    Ta aplikacja uĹźywa nowoczesnych funkcji przeglÄdarki, ktĂłrych Twoja przeglÄdarka nie obsĹuguje.<br>
                    Aby uzyskaÄ najlepsze efekty, pobierz <a href="//www.google.com/chrome/">najnowszÄ wersjÄ przeglÄdarki Chrome</a>.
                </p>
            </div></canvas>
    </div>
    <div id="zoomButtons">
        <div id="buttonsZoom">
            <button id="zoomIn"></button>
            <button id="zoomOut"></button>
        </div>
    </div>
    <script>
    var planes = null;
        (function () {
            var OPTIONS = {
                ORIGINAL_WIDTH: 845,
                ORIGINAL_HEIGHT: 466,
                MAX_ZOOM_LEVEL: 4
            },
            images = {
                airportTown: new Image(),
                background: 'background.png'
            },
            obiects = {
                documentObiect: document,
                mathObiect: Math,
                dateObiect: Date,
                windowObiect: window
            },
            flightMapContainer = obiects.documentObiect.getElementById('flightMapContainer'),
                    secondBackgroundElements = obiects.documentObiect.getElementById('secondBackgroundElements'),
                    generalElements = obiects.documentObiect.getElementById('generalElements'),
                    secondContext = secondBackgroundElements.getContext('2d'),
                    generalContext = generalElements.getContext('2d'),
                    canvasWidth = generalElements.width,
                    canvasHeight = generalElements.height,
                    canvasWidthTmp = canvasWidth * zoom,
                    canvasHeightTmp = canvasHeight * zoom,
                    scaleX = canvasWidth / OPTIONS.ORIGINAL_WIDTH,
                    scaleY = canvasHeight / OPTIONS.ORIGINAL_HEIGHT,
                    zoom = 1,
                    rangeOfXAndY = {
                        x: {
                            min: 0,
                            max: function () {
                                return this.min + canvasWidthTmp;
                            },
                            lastMin: 0,
                            lastMax: function () {
                                return this.lastMin + canvasWidthTmp;
                            }
                        },
                        y: {
                            min: 0,
                            max: function () {
                                return this.min + canvasHeightTmp;
                            },
                            lastMin: 0,
                            lastMax: function () {
                                return this.min + canvasHeightTmp;
                            }
                        }
                    },
            dragging = false;

            var timer, airports, planes, beforeDragPosX, beforeDragPosY;

            function addEvent(evnt, elem, func) {
                if (elem.addEventListener) {
                    elem.addEventListener(evnt, func, false);
                } else if (elem.attachEvent) {
                    elem.attachEvent("on" + evnt, func);
                }
                else {
                    elem[evnt] = func;
                }
            }

            function ajax(options) {
                options = {
                    type: options.type || "POST",
                    url: options.url || "",
                    onComplete: options.onComplete || function () {
                    },
                    onError: options.onError || function () {
                    },
                    onSuccess: options.onSuccess || function () {
                    },
                    dataType: options.dataType || "text"
                };

                var xml = new XMLHttpRequest();
                xml.open(options.type, options.url, true);

                xml.onreadystatechange = function () {
                    if (xml.readyState == 4) {
                        if (httpSuccess(xml)) {
                            var returnData = (options.dataType == "xml") ? xml.responseXML : xml.responseText
                            options.onSuccess(returnData);
                        } else {
                            options.onError();
                        }
                        options.onComplete();
                        xml = null;
                    }
                };

                xml.send();

                function httpSuccess(r) {
                    try {
                        return (r.status >= 200 && r.status < 300 || r.status == 304 || navigator.userAgent.indexOf("Safari") >= 0 && typeof r.status == "undefined")
                    } catch (e) {
                        return false;
                    }
                }
            }

            function completeArraysFromJSON(data) {
                var jsonObiect = JSON.parse(data),
                        planesObiect = jsonObiect.planes,
                        airportsObiect = jsonObiect.airports,
                        planesLength = obiectLength(planesObiect),
                        airportsLength = obiectLength(airportsObiect);

                planes = [];
                airports = [];

                for (var i = planesLength; i--; ) {
                    var plane = planesObiect[i],
                            airplaneIconTop = new Image(),
                            airplaneIconTopRight = new Image(),
                            airplaneIconRight = new Image(),
                            airplaneIconBottomRight = new Image(),
                            airplaneIconBottom = new Image(),
                            airplaneIconBottomLeft = new Image(),
                            airplaneIconLeft = new Image(),
                            airplaneIconTopLeft = new Image();

                    airplaneIconTop.src = plane.icons.top;
                    airplaneIconTopRight.src = plane.icons.topRight;
                    airplaneIconRight.src = plane.icons.right;
                    airplaneIconBottomRight.src = plane.icons.bottomRight;
                    airplaneIconBottom.src = plane.icons.bottom;
                    airplaneIconBottomLeft.src = plane.icons.bottomLeft;
                    airplaneIconLeft.src = plane.icons.left;
                    airplaneIconTopLeft.src = plane.icons.topLeft;

                    planes.push([plane.name, plane.startTime, plane.finishTime, parseInt(plane.velocity), parseInt(plane.startAirport), parseInt(plane.finishAirport), [airplaneIconTop, airplaneIconTopRight, airplaneIconRight, airplaneIconBottomRight, airplaneIconBottom, airplaneIconBottomLeft, airplaneIconLeft, airplaneIconTopLeft], null, null, null, null, null, null, plane.lineColor, plane.startAirportName, plane.finishAirportName, plane.logo, plane.occupancy, plane.country, plane.shortcut, plane.designation, plane.owner]);
                }

                for (var y = airportsLength; y--; ) {
                    var airport = airportsObiect[y],
                            airportX = parseInt(airport.positionX) * scaleX,
                            airportY = parseInt(airport.positionY) * scaleY,
                            newAirportX = airportX * zoom,
                            newAirportY = airportY * zoom;

                    airports.push([parseInt(airport.id), newAirportX - 10, newAirportY - 10, airport.name, airport.country, airport.shortcut, airportX, airportY, airport.logo, airport.occupancy, airport.seat, airport.size]);
                }

                drawPlanes(planes, airports);
                drawAirports(airports);
            }

            function completeArraysAfterUpdate(planesArray, airportsArray) {
                var planesLength = planesArray.length,
                        airportsLength = airportsArray.length;

                for (var i = planesLength; i--; ) {
                    var plane = planesArray[i];


                    plane[7] = null;
                    plane[8] = null;
                    plane[9] = null;
                    plane[10] = null;

                    planes[i] = plane;
                }

                for (var y = airportsLength; y--; ) {
                    var airport = airportsArray[y],
                            newAirportX = airport[6] * zoom,
                            newAirportY = airport[7] * zoom;

                    airport[1] = newAirportX - 10;
                    airport[2] = newAirportY - 10;

                    airports[y] = airport;
                }

                drawPlanes(planes, airports);
                drawAirports(airports);
            }

            function drawPlanes(planesArray, airportsArray) {
                var planesLength = planesArray.length,
                        airportsLength = airportsArray.length,
                        dateNow = obiects.dateObiect.now();

                clearTimeout(timer);

                generalContext.clearRect(0, 0, canvasWidth * zoom, canvasHeight * zoom);

                for (var i = planesLength; i--; ) {

                    var plane = planesArray[i];

                    if (obiects.dateObiect.parse(plane[1]) <= dateNow && obiects.dateObiect.parse(plane[2]) >= dateNow) {

                        if (plane[7] === null || plane[8] === null || plane[9] === null || plane[10] === null) {
                            for (var y = airportsLength; y--; ) {

                                var airport = airportsArray[y];

                                if (plane[4] === airport[0]) {
                                    plane[7] = airport[1] + 10;
                                    plane[8] = airport[2] + 10;
                                }
                                else if (plane[5] === airport[0]) {
                                    plane[9] = airport[1] + 10;
                                    plane[10] = airport[2] + 10;
                                }
                            }
                        }

                        console.log('rysuj');

                        var deltaStartFinish = (obiects.dateObiect.parse(plane[2]) - obiects.dateObiect.parse(plane[1])) / 1000,
                                pxPerSecondX = (plane[9] - plane[7]) / deltaStartFinish,
                                pxPerSecondY = (plane[10] - plane[8]) / deltaStartFinish,
                                deltaTime = (dateNow - obiects.dateObiect.parse(plane[1])) / 1000,
                                pxOnFinishX = plane[7] + deltaTime * pxPerSecondX,
                                pxOnFinishY = plane[8] + deltaTime * pxPerSecondY,
                                icons = plane[6];

                        generalContext.strokeStyle = plane[13];
                        generalContext.lineWidth = 2;

                        generalContext.beginPath();
                        generalContext.moveTo(plane[7], plane[8]);
                        generalContext.lineTo(pxOnFinishX, pxOnFinishY);
                        generalContext.stroke();

                        drawPlaneIcon(icons, pxOnFinishX, pxOnFinishY, plane[7], plane[8], plane[9], plane[10]);

                        plane[11] = pxOnFinishX - 10;
                        plane[12] = pxOnFinishY - 10;

                        planes[i] = plane;
                    }
                }

                timer = setTimeout(drawPlanes, 1000, planes, airports)
            }

            function drawPlaneIcon(plane, pxOnFinishX, pxOnFinishY, startX, startY, finishX, finishY) {
                if (startX === finishX && startY > finishY) {
                    generalContext.drawImage(plane[0], pxOnFinishX - 10, pxOnFinishY - 10);
                }
                else if (startX < finishX && startY > finishY) {
                    generalContext.drawImage(plane[1], pxOnFinishX - 10, pxOnFinishY - 10);
                }
                else if (startX < finishX && startY === finishY) {
                    generalContext.drawImage(plane[2], pxOnFinishX - 10, pxOnFinishY - 10);
                }
                else if (startX < finishX && startY < finishY) {
                    generalContext.drawImage(plane[3], pxOnFinishX - 10, pxOnFinishY - 10);
                }
                else if (startX === finishX && startY < finishY) {
                    generalContext.drawImage(plane[4], pxOnFinishX - 10, pxOnFinishY - 10);
                }
                else if (startX > finishX && startY < finishY) {
                    generalContext.drawImage(plane[5], pxOnFinishX - 10, pxOnFinishY - 10);
                }
                else if (startX > finishX && startY === finishY) {
                    generalContext.drawImage(plane[6], pxOnFinishX - 10, pxOnFinishY - 10);
                }
                else {
                    generalContext.drawImage(plane[7], pxOnFinishX - 10, pxOnFinishY - 10);
                }
            }

            function MeasureText(text, bold, font, size)
            {
                // This global variable is used to cache repeated calls with the same arguments
                var str = text + ':' + bold + ':' + font + ':' + size;
                if (typeof (__measuretext_cache__) == 'object' && __measuretext_cache__[str]) {
                    return __measuretext_cache__[str];
                }

                var div = document.createElement('DIV');
                div.innerHTML = text;
                div.style.position = 'absolute';
                div.style.top = '-100px';
                div.style.left = '-100px';
                div.style.fontFamily = font;
                div.style.fontWeight = bold ? 'bold' : 'normal';
                div.style.fontSize = size + 'pt';
                document.body.appendChild(div);

                var size = [div.offsetWidth, div.offsetHeight];

                document.body.removeChild(div);

                // Add the sizes to the cache as adding DOM elements is costly and can cause slow downs
                if (typeof (__measuretext_cache__) != 'object') {
                    __measuretext_cache__ = [];
                }
                __measuretext_cache__[str] = size;

                return size;
            }

            function drawAirports(airports) {
                var length = airports.length;
                secondContext.clearRect(0, 0, canvasWidth * zoom, canvasHeight * zoom);
                secondContext.font = "8pt Arial";
                secondContext.fillStyle = "#c69c6d";
                for (var i = length; i--; ) {
                    var airport = airports[i];
                    secondContext.drawImage(images.airportTown, airport[1], airport[2]);
                    airport[8] = MeasureText(airport[3], false, 'Arial', 8)[0];
                    airport[9] = MeasureText(airport[3], false, 'Arial', 8)[1];
                    secondContext.fillText(airport[3], airport[1] + 20, airport[2] + 20);
                    console.log(airport[1] + 20);
                }
            }

            function obiectLength(obiect) {
                var count = 0,
                        i;

                for (i in obiect) {
                    if (obiect.hasOwnProperty(i)) {
                        count++;
                    }
                }
                return count;
            }

            function drawPlaneInfo(plane) {
                var flightMap = obiects.documentObiect.getElementById('flightMapContainer'),
                        planeInfoDiv = obiects.documentObiect.createElement('div'),
                        divX = plane[11],
                        divY = plane[12] + 20 + 10;

                removeInfo(flightMap);

                planeInfoDiv.setAttribute('id', 'planeInfo');
                planeInfoDiv.setAttribute('style', 'position: absolute; width: 200px; font-size: 12px; background: #5E5E5E; border: 1px solid #333333; padding: 5px; color: white; top: ' + divY + 'px; left: ' + divX + 'px;');
                planeInfoDiv.innerHTML = "<p><b>Nazwa:</b> " + plane[0] + "</p><p><b>Nazwa lotniska poczÄtkowego:</b> " + plane[14] + "</p><p><b>Nazwa lotniska koĹcowego:</b> " + plane[15] + "</p><p><b>Data startu:</b> " + plane[1] + "</p><p><b>Data lÄdowania:</b> " + plane[2] + " </p><p><b>PrÄdkoĹÄ:</b> " + plane[3] + " km/h </p><p><b>Oznaczenie:</b> " + plane[20] + "</p><p><b>WĹaĹciciel:</b> " + plane[21] + "</p>";
                flightMap.appendChild(planeInfoDiv);

                window.setTimeout(removeInfo, 10000, flightMap);
            }

            function drawAirportInfo(airport) {
                var flightMap = obiects.documentObiect.getElementById('flightMapContainer'),
                        airportInfoDiv = obiects.documentObiect.createElement('div'),
                        divX = airport[1],
                        divY = airport[2] + 20 + 10;

                removeInfo(flightMap);

                airportInfoDiv.setAttribute('id', 'airportInfo');
                airportInfoDiv.setAttribute('style', 'position: absolute; width: 250px; font-size: 12px; background: #5E5E5E; border: 1px solid #333333; padding: 5px; color: white; top: ' + divY + 'px; left: ' + divX + 'px;');
                airportInfoDiv.innerHTML = "<p><b>Nazwa:</b> " + airport[3] + "</p><p><b>Kraj: </b>" + airport[4] + "</p><p><b>ObĹoĹźenie:</b> " + airport[9] + "</p><p><b>WielkoĹÄ:</b> " + airport[11] + "</p>";
                flightMap.appendChild(airportInfoDiv);

                window.setTimeout(removeInfo, 10000, flightMap);
            }

            function removeInfo(flightMap) {
                if (obiects.documentObiect.getElementById('planeInfo')) {
                    flightMap.removeChild(obiects.documentObiect.getElementById('planeInfo'));
                }
                if (obiects.documentObiect.getElementById('airportInfo')) {
                    flightMap.removeChild(obiects.documentObiect.getElementById('airportInfo'));
                }
            }

            function drawBackground() {
                flightMapContainer.style.background = "url('" + images.background + "')";
                flightMapContainer.style.backgroundSize = "cover";
            }

            function set_translate(e, x, y) {
                e.style["-webkit-transform"] = "translate(" + x + "px, " + y + "px)";
                e.style["-moz-transform"] = "translate(" + x + "px, " + y + "px)";
                e.style["-ms-transform"] = "translate(" + x + "px, " + y + "px)";
                e.style["-o-transform"] = "translate(" + x + "px, " + y + "px)";
                e.style["transform"] = "translate(" + x + "px, " + y + "px)";
            }

            function updateElementsSize() {
                canvasWidthTmp = canvasWidth * zoom;
                canvasHeightTmp = canvasHeight * zoom;
                flightMapContainer.style.width = canvasWidthTmp + 'px';
                flightMapContainer.style.height = canvasHeightTmp + 'px';
                secondBackgroundElements.width = canvasWidthTmp;
                secondBackgroundElements.height = canvasHeightTmp;
                generalElements.width = canvasWidthTmp;
                generalElements.height = canvasHeightTmp;
            }

            function zoomIn() {
                if (zoom < OPTIONS.MAX_ZOOM_LEVEL) {
                    ++zoom;
                    removeInfo(obiects.documentObiect.getElementById('flightMapContainer'));
                    rangeOfXAndY.x.min = rangeOfXAndY.x.lastMin;
                    rangeOfXAndY.y.min = rangeOfXAndY.y.lastMin;
                    set_translate(flightMapContainer, rangeOfXAndY.x.min, rangeOfXAndY.y.min);
                    set_translate(flightMapContainer, rangeOfXAndY.x.min, rangeOfXAndY.y.min);
                    if (zoom === 2) {
                        rangeOfXAndY.x.min = 0;
                        rangeOfXAndY.y.min = 0;
                        set_translate(flightMapContainer, rangeOfXAndY.x.min, rangeOfXAndY.y.min);
                        set_translate(flightMapContainer, rangeOfXAndY.x.min, rangeOfXAndY.y.min);
                    }
                    updateElementsSize();
                    completeArraysAfterUpdate(planes, airports);
                }
            }

            function zoomOut() {
                if (zoom > 1) {
                    --zoom;
                    removeInfo(obiects.documentObiect.getElementById('flightMapContainer'));
                    rangeOfXAndY.x.min = rangeOfXAndY.x.min / zoom;
                    rangeOfXAndY.y.min = rangeOfXAndY.y.min / zoom;
                    set_translate(flightMapContainer, rangeOfXAndY.x.min, rangeOfXAndY.y.min);
                    set_translate(flightMapContainer, rangeOfXAndY.x.min, rangeOfXAndY.y.min);
                    if (zoom === 1) {
                        rangeOfXAndY.x.min = 0;
                        rangeOfXAndY.y.min = 0;
                        rangeOfXAndY.x.lastMin = 0;
                        rangeOfXAndY.y.lastMin = 0;
                        set_translate(flightMapContainer, rangeOfXAndY.x.min, rangeOfXAndY.y.min);
                        set_translate(flightMapContainer, rangeOfXAndY.x.min, rangeOfXAndY.y.min);
                    }
                    updateElementsSize();
                    completeArraysAfterUpdate(planes, airports);
                }
            }

            function mouseMove(e) {
                if (dragging) {
                    if (zoom > 1) {
                        var differenceX = ~~((e.clientX - beforeDragPosX) / 5),
                                differenceY = ~~((e.clientY - beforeDragPosY) / 5);

                        if (rangeOfXAndY.x.min + differenceX >= (canvasWidthTmp - canvasWidth) * (-1) && rangeOfXAndY.x.min + differenceX <= 0)
                        {
                            rangeOfXAndY.x.min += differenceX;
                        }
                        if (rangeOfXAndY.y.min + differenceY >= (canvasHeightTmp - canvasHeight) * (-1) && rangeOfXAndY.y.min + differenceY <= 0) {
                            rangeOfXAndY.y.min += differenceY;
                        }

                        set_translate(flightMapContainer, rangeOfXAndY.x.min, rangeOfXAndY.y.min);
                        set_translate(flightMapContainer, rangeOfXAndY.x.min, rangeOfXAndY.y.min);
                        rangeOfXAndY.x.lastMin = rangeOfXAndY.x.min;
                        rangeOfXAndY.y.lastMin = rangeOfXAndY.y.min;
                    }
                }
            }

            function getPos(el) {
                for (var lx = 0, ly = 0;
                        el != null;
                        lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent)
                    ;
                return {x: lx, y: ly};
            }

            function init() {
                images.airportTown.src = 'ikona.png';

                drawBackground();

                addEvent('load', images.airportTown, function () {
                    ajax({
                        url: "http://serwer1356363.home.pl/test/map.php",
                        onSuccess: completeArraysFromJSON
                    });
                });

                addEvent('click', obiects.documentObiect.getElementById('zoomIn'), zoomIn);
                addEvent('click', obiects.documentObiect.getElementById('zoomOut'), zoomOut);

                addEvent('mousewheel', generalElements, function (e, delta) {
                    delta = delta || -e.detail || e.wheelDelta;
                    if (delta > 0) {
                        zoomIn();
                    } else {
                        zoomOut();
                    }
                    e.preventDefault();
                });

                addEvent('DOMMouseScroll', generalElements, function (e, delta) {
                    delta = delta || -e.detail || e.wheelDelta;
                    if (delta > 0) {
                        zoomIn();
                    } else {
                        zoomOut();
                    }
                    e.preventDefault();
                });

                addEvent('mouseup', generalElements, function () {
                    dragging = false;
                    generalElements.style.cursor = "default";
                });

                addEvent('mousedown', generalElements, function (e) {
                    dragging = true;
                    beforeDragPosX = e.clientX;
                    beforeDragPosY = e.clientY;
                    generalElements.style.cursor = "move";
                });

                addEvent('mouseleave', generalElements, function () {
                    dragging = false;
                    generalElements.style.cursor = "default";
                });

                addEvent('mousemove', generalElements, mouseMove);

                addEvent('click', generalElements, function (e) {
                    var planesLength = planes.length,
                            airportsLength = airports.length,
                            clientX = e.clientX,
                            clientY = e.clientY,
                            xOffset = obiects.windowObiect.pageXOffset,
                            yOffset = obiects.windowObiect.pageYOffset,
                            elPos = getPos(obiects.documentObiect.getElementById('flightMap')),
                            differenceX = rangeOfXAndY.x.min * (-1),
                            differenceY = rangeOfXAndY.y.min * (-1);

                    removeInfo(obiects.documentObiect.getElementById('flightMapContainer'));
                    for (var i = planesLength; i--; ) {
                        var plane = planes[i];
                        if ((clientX - elPos.x + differenceX + xOffset) > plane[11] && (clientX - elPos.x + differenceX + xOffset) < (plane[11] + 20) && (clientY - elPos.y + differenceY + yOffset) > plane[12] && (clientY - elPos.y + differenceY + yOffset) < (plane[12] + 20)) {
                            drawPlaneInfo(plane);
                        }
                    }

                    for (var y = airportsLength; y--; ) {
                        var airport = airports[y];
                        if ((clientX - elPos.x + differenceX + xOffset) > airport[1] && (clientX - elPos.x + differenceX + xOffset) < (airport[1] + 20) && (clientY - elPos.y + differenceY + yOffset) > airport[2] && (clientY - elPos.y + differenceY + yOffset) < (airport[2] + 20)) {
                            drawAirportInfo(airport);
                        }
                        if ((clientX - elPos.x + differenceX + xOffset) > airport[1] + 20 && (clientX - elPos.x + differenceX + xOffset) < airport[1] + 20 + airport[8] && (clientY - elPos.y + differenceY + yOffset) > airport[2] + 10 && (clientY - elPos.y + differenceY + yOffset) < airport[2] + 10 + airport[9]) {
                            drawAirportInfo(airport);
                        }
                        console.log(clientX - elPos.x + differenceX + xOffset);
                    }

                });

            }

            init();
        })();
    </script>    
</div>
 
    </body>

</html> 

Wszystko działa jak należy - prócz przesuwania i oddalania/przybliżania. Proszę spróbujcie przesunąć, przybliżyć/oddalić mapkę - strasznie "przeskakuje" lub "sama" się przesuwa.

Potrafiłby ktoś może usunąć powyższe problemy?

Baaardzo proszę o pomoc,
Northwest

0

Wrzucenie kilometrowego listingu kodu (oczywiście bez kolorowania, dodatkowo wymiksowany html z css i javascript) nie zachęca do przyjrzenia się problemowi. To jakiś gotowiec czy Twój kod? musisz trochę "nakomplikować" funkcję zoomIn() - wprowadzić jakiś timer i w tym timerze stopniowo zwiększać mnożnik zoomujący i odświeżać mapę.

0

Przepraszam, już "pokolorowałem" tą składnię.

To jest mapka którą kupiłem. Zapłaciłem wykonawcy za szybko, bo przed 100% końcem prac i zostałem z częściowo nie działającym kodem :(
Wykonawca przepadł bez śladu, a sam nie wiem jak to poprawić :(

0

Wrzucając cały kod jak leci i nie rozumiejąc go, oczekujać rozwiązania - wybacz, ale to nadal jest zlecenie. Podejrzewam, że lepszym działem byłyby Ogłoszenia Drobne.

1 użytkowników online, w tym zalogowanych: 0, gości: 1