Verschiebbare Karte mit Hilfe von Javascript

[youngperson]

Hallo ich habe auf meiner Webseite eine Karte eingefügt und sollte es so einrichten das sie verschoben werden kann. Das funktioniert soweit auch, allerdings verschiebt sich die dann auch die Karte. Also die position auf der karte verändert sich halt beim verschieben und das würde ich gerne verhindern.


das ist mein code um die karte zu verschieben

<script language="JavaScript" type="text/javascript">

// Objekt das gerade bewegt wird
var currentObj = null; 

 //Position an der es angeklickt wurde
 var currentObjX = 0;
 var currentObjY = 0;

 //mausposition
 var startX = 0;
 var startY = 0;

 // bool ob aktueller Browser ein IE ist
 var IE = document.all&&!window.opera;

 document.onmousemove = doDrag;
 document.onmouseup = stopDrag;

 //wird aufgerufen wenn ein objekt bewegt wird
  function startDrag(obj) {
 currentObj = obj ;
 startX = currentObjX - currentObj.offsetLeft;
 startY = currentObjY - currentObj.offsetTop;
 }

 //wird aufgerufen wenn die Maus bewegt wird und bewegt das objekt
  function doDrag(ereignis) {

 currentObjX = (IE) ? window.event.clientX : ereignis.pageX;
 currentObjY = (IE) ? window.event.clientY : ereignis.pageY;

 if (currentObj != null) {
 currentObj.style.left = (currentObjX - startX) + "px";
 currentObj.style.top = (currentObjY - startY) + "px";
 }
 }
 //wird aufgerufen wenn ein Objekt nich mehr bewegt werden sô
 function stopDrag(ereignis) {
 currentObj = null;
 }
 </script>

und das hier ist die karte selbst

<script>
    // Leaflet-Kartenobjekt im referenzierten div erstellen und initiale Optionen für Karte übergeben
    var karte = L.map('kartencontainer', {
        // Mittelpunkt der Karte als Breiten- und Längengrad, bspw. 50.0956° N, 8.7761° E für Offenbach
        center: [51.75503, 14.34075],
        // initiales Zoomlevel
        zoom: 11, 
        // interaktivität der Karte kann mit Optionen gesteuert werden
        zoomControl: true,
        dragging: true,
        attributionControl: true
    });

    // OSM-Hintergrundslayer definieren
    var osmlayer =  L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data: &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
        maxZoom: 18
    });

    // Warnungs-Layer vom DWD-Geoserver - betterWms fügt Möglichkeiten zur GetFeatureInfo hinzu
    var warnlayer = L.tileLayer.betterWms("https://maps.dwd.de/geoserver/dwd/wms/", {
        layers: 'dwd:Warnungen_Gemeinden_vereinigt',
        // eigene Styled Layer Descriptor (SLD) können zur alternativen Anzeige der Warnungen genutzt werden (http://docs.geoserver.org/stable/en/user/styling/sld/reference/)
        //sld: 'http://eigenerserver/alternativer.sld',
        format: 'image/png',
        transparent: true,
        opacity: 0.8,
        attribution: 'Warndaten: &copy; <a href="http://www.dwd.de">DWD</a>'
    });

    // CQL_FILTER können benutzt werden um angezeigte Warnungen zu filtern (http://docs.geoserver.org/stable/en/user/tutorials/cql/cql_tutorial.html)
    // Filterung kann auf Basis der verschiedenen properties der Warnungen erfolgen (bspw. EC_II, EC_GROUP, DESCRIPTION ... ) siehe https://www.dwd.de/DE/wetter/warnungen_aktuell/objekt_einbindung/einbindung_karten_geowebservice.pdf
    // warnlayer.setParams({CQL_FILTER:"DESCRIPTION LIKE '%Sturm%'"});
    // Filter können zur Laufzeit, z.B. über Nutzereingaben angepasst werden
    //delete warnlayer.wmsParams.CQL_FILTER;
    //warnlayer.redraw();

    // Layer mit neutraler Darstellung der Gemeinde-Warngebiete
    var gemeindelayer = L.tileLayer.wms("https://maps.dwd.de/geoserver/dwd/wms/", {
        layers: 'dwd:Warngebiete_Gemeinden',
        format: 'image/png',
        styles: 'Warngebiete_Grenzen',
        transparent: true,
        opacity: 0.6,
        attribution: 'Geobasisdaten Gemeinden: &copy; <a href="http://www.bkg.de">BKG</a> 2015 (Daten verändert)'
    });

    // Layerlisten für die Layercontrol erstellen und dabei initial aktive Layer zur Karte hinzufügen
    var baseLayers = {
            "OpenStreetMap": osmlayer.addTo(karte)
    };
    var overLayers = {
            "<span title='DWD Geoserver dwd:Warnungen_Gemeinden_vereinigt'>Gemeinde vereinigt</span>": warnlayer.addTo(karte),
            "<span title='DWD Geoserver Gemeindewarngebiete'>Warngebiete (Gemeinden)</span>": gemeindelayer
    };

    // Layercontrol-Element erstellen und hinzufügen
    L.control.layers(baseLayers, overLayers).addTo(karte);

    // Demo-Marker mit Popup hinzufügen
    var marker = L.marker([51.75503, 14.34075]).addTo(karte);
</script>

für hilfe wäre ich sehr dankbar

 

[Kalito]

Hallo,
warum packst du die Karte in ein div und machst das DIV mit jquery ui dragable (https://jqueryui.com/draggable/).