youngperson
Grünschnabel
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
und das hier ist die karte selbst
für hilfe wäre ich sehr dankbar
das ist mein code um die karte zu verschieben
Javascript:
<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
Javascript:
<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: © <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: © <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: © <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