Scrollbare Karte mit Speicherung der Koordinaten | Zoom per Maus

Z

Zunftmeister

Grünschnabel
Hallo zusammen!

Ich bin neu und muß euch gleich mit einen Problem überfallen, an denen ich mir schon die letzten Wochen die Zähne ausbeiße.

Ich habe einige Projekte in PHP online und merke immer wieder, dass ich der aktuellen Technik etwas hinterherhänge^^ Vor allem im Bereich JS und Ajax lern ich mich gerade erst ein. Allerdings brauch ich Hilfe bei einen Problem, was wohl etwas zu fortgeschritten ist für mich...

Stehe bei JS erst am Anfang - von Ajax brauch ich gar nicht reden...

Ich hab eine Projekt (noch nicht online) dort habe ich einen 4000x4000px großes Div, in welchen ein weiteres Div (#draggable) mit einer Karte ist.
Diese Karte soll bewegt werden können. Momentan löse ich das mit Buttons, welche Margin-Angaben in eine MySQL Datenbank speichert und so wieder ausgibt, das der User wieder an der selben Stelle landet, als wo er die Seite verlassen hat.

Jetzt, wo ihr mich alle ausgelacht habt, würde ich das ganze natürlich eleganter mit der Maus lösen. Also die User sollen die Karte per Maus verschieben können.
Nach gefühlten tausend Stunden bei Google hab ich mir jetzt auch ein Script mehr oder weniger durch Schnipsel und selbst probieren zusammengestellt, was auch funktioniert:

Javascript: 
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#draggable" ).draggable();
  } );
  </script>

Die Karte wird im DIV draggable bewegt... (y)

Was ich aber absolute nicht hinbekomme, dass die Koordinaten(?) der letzten Platzierung ausgelesen werden, sodaß ich diese entweder in einer Textdatei, in einem Cookie oder in der Datenbank abspeichern kann.
Wenn ich dies hinbekommen, müßte ich diese auch wieder einlesen können, damit der User an der gleichen Stelle landet, als er die Seite aktualisierte oder die Seite verließ. Denn jedesmal wenn der User auf ein Objekt auf der Karte klickt, springt er logischerweise wieder zurück ins linke obere Ecke mit obigen Script.


Das wäre mein erstes Problem - vielleicht kennt da einer eine schnelle Lösung oder hat einen Link zu einen verständlichen Tutorial zur Hand. Ich habe leider nichts gefunden :(


Was mich auf interessieren würde, ist das scrollen der Karte per Mausrad - dies hab ich auch wieder mit Buttons und CSS-Angaben gelöst... auch hier würde ich mich über Links, Tipps, Codeschnipsel freuen, um eine elegante Lösung zu finden! :D

vielen Dank!
 
dass die Koordinaten(?) der letzten Platzierung ausgelesen werden
Zum Vergrößern anklicken....
Das ist der leichtere Teil der Übung, denn es ist in der Docu beschrieben:
http://api.jqueryui.com/draggable/#event-drag
damit der User an der gleichen Stelle landet, als er die Seite aktualisierte oder die Seite verließ
Zum Vergrößern anklicken....
Anscheinend stellt das Plugin keine Methode zur Verfügund, um das Objekt zu positionieren. Beobachtet man jedoch das CSS, erkennt man, dass die Eigenschaften top und left verändert werden und anders herum kann man das Element positionieren, indem man diese Eigenschaften setzt. Hier ein kleines Demo, mit dem ich es überprüft habe:
Code: 
        <div id="draggable">Drag me</div>
        <button id="posbtn">Position</button>


        <script>
        $( "#draggable" ).draggable();
        $("#posbtn").on("click", function() {
            $("#draggable").css({top: "100px", left: "200px"});
        });
        </script>
Außerdem musst Du die Position irgend wie speichern und dafür bietet sich Localstorage an:
https://wiki.selfhtml.org/wiki/JavaScript/Web_Storage
Damit hast Du alles, um dein Vorhaben, die Position nach einem erneuten Laden der Seite wiederherzustellen, umzusetzen.

Zu der zweiten Frage: Meinst Du hier wirklich scrollen oder eher zoomen? Weil scrollen könnte man mit dem Mausrad ja nur in einer Richtung, entweder horizontal oder vertikal.
 
Hallo Sempervivum,
vielen Dank für deine Links und Erklärungen! Probier ich nachher gleich rum! :)

Ja, ich meine natürlich zoomen ;) Also nah ran und weiter weg ;)
 
PS: Da gibt es eine Demo mit Panning und Zooming. Wenn man sich danach richtet, ist es kinderleicht und mit wenigen Zeilen Javascript getan:
Code: 
    <div id="cpanzoom">
        <div id="innerpanzoom">
            <img src="images/dia0.jpg">
        </div>
    </div>
    <script>
        var $panzoom = $("#innerpanzoom").panzoom();
        $("#cpanzoom").on('wheel', function (e) {
            e.preventDefault();
            var delta = e.originalEvent.deltaY;
            var zoomOut = delta < 0;
            $panzoom.panzoom('zoom', zoomOut, {
                increment: 0.1,
                animate: false,
                focal: e
            });
        });
    </script>
 
So, ich hab mir alles mal angeschaut und mit Hilfe der Demo hab ich es auch übertragen können...

Ich muß noch viel lernen.. wie erstellt man z.B. diese js-Dateien die man für die Scripte braucht? Das ist alles viel Script und Dateien für so eine kleine Funktion^^

Als nächsten knöpf ich mir die Sache mit dem speichern vor.. obwohl ich da bis jetzt null durchsehe^^
 
Freut mich zu lesen, dass es funktioniert!
Solche Bibliotheksfunktionen zu erstellen erfordert schon ziemlich fortgeschrittene Kenntnisse. Beim Programmieren ist es häufig so, dass die Programmierung relativ aufwändig ist, obwohl sich die Aufgabe relativ kurz und leicht beschreiben lässt.
 
..also ich bin noch dran^^

Versteh das nur nicht mit dem "abspeichern" der "Koordinaten bzw. erstmal dem auslesen.. aber ich bin dran...
 
Bevor Du endlos suchst und probierst, sieh dir dies an:
Javascript: 
        var $panzoom = $("#innerpanzoom").panzoom()
            .on("panzoomchange", function(e, panzoom, transform) {
                localStorage.setItem("matrix", JSON.stringify(transform));
            });
        $("#cpanzoom").on('wheel', function (e) {
            e.preventDefault();
            var delta = e.originalEvent.deltaY;
            var zoomOut = delta < 0;
            $panzoom.panzoom('zoom', zoomOut, {
                increment: 0.1,
                animate: false,
                focal: e
            });
        });
        var lsitem = localStorage.getItem("matrix");
        if (lsitem) $panzoom.panzoom("setMatrix", JSON.parse(lsitem));
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück