CSS / JavaScript: Hilfe bei Leaflet-Integration?
Hallo Leute,
ich brauche Hilfe bei dieser Arbeit.
1. Es sollen zwei Karten nebeneinander sein. Jedoch soll die rechte Karte eine Here-Map sein. Wie baue ich das in den Code ein (siehe unten)?
Sie müssen http://ivansanchez.gitlab.io/Leaflet.TileLayer.HERE/leaflet-tilelayer-here.js in einem <script>-Tag laden. Danach müsste es mit sowas hier gehen:
L.tileLayer.here({
appId: 'ViVS62MmsdTJSzwXMlHb',
appCode: 'bsODmSCzkVqEMR8TnGPHdw'
}).addTo(map);
Statt addTo(map) kommt natürlich der Name Ihrer rechten Karte hin.
appId und appCode sind hier aus dem Beispiel von Ivan Sanchez http://ivansanchez.gitlab.io/Leaflet.TileLayer.HERE/demo.html
________________
2. Außerdem soll die zweite Karte sozusagen synchron/parallel mit der linken Karte verlaufen:
Sie müssen, wenn der Benutzer in der linken Karte zoomt oder sie verschiebt, die rechte Karte aktualisieren. Dazu müssen Sie eine Funktion schreiben, die aufgerufen wird, wenn auf der linken Karte das "zoomend" oder "moveend"-Ereignis auftritt.
Also etwa
map1.on("zoomend", meine_funktion);
und dann in der meine_funktion können Sie auf der rechten Karte "setBounds" aufrufen, um die rechte Karte zu verschieben/zu zoomen. Das "setBounds" muss dabei den aktuellen Ausschnitt der linken Karte übergeben bekommen (getBounds).
_________________________________________________
<html>
<head>
<link rel="stylesheet" href="https: //unpkg.com/leaflet@1.4.0/dist/leaflet.css"></link>
<script src="https: //unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
<script src="http: //unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
<script>
function initMaps() {
map = new L.map('meine_map');
L.tileLayer('https: //{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
let karlsruhe = new L.LatLng(49, 8.4);
map.setView(karlsruhe, 12);
map1 = new L.map('meine_map1');
L.tileLayer('http: //{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png').addTo(map1);
map1.setView(karlsruhe, 12);
document.getElementById("suchen").addEventListener("click", suchen);
}
async function suchen() {
let url = new URL('https: //nominatim.openstreetmap.org/search');
url.searchParams.append('format', 'json');
url.searchParams.append('q', document.getElementById("ort").value);
let response = await fetch(url);
let json = await response.json();
let box = json[0].boundingbox;
map.fitBounds([ [ box[0],box[2] ], [ box[1],box[3] ] ]);
map1.fitBounds([ [ box[0],box[2] ], [ box[1],box[3] ] ]);
}
</script>
</head>
<body onLoad="initMaps()">
<div id="meine_map" style="height: 360px; width: 360px;"></div>
<div id="meine_map1" style="position: absolute; top: 9px; left: 375px; height: 360px; width: 360px;"></div>
<input type="text" id="ort">
<button id="suchen">Suchen</button>
</body>
Anmerkung: Damit der GF-Editor die URLs nicht verfälscht, wurde im Protokoll stets ein Leerzeichen hinzugefügt.
Ich danke euch für die Hilfe im Voraus!
LG
2 Antworten
Punkt 1: Wo liegt hier nun das konkrete Problem? Die Anweisungen zur Integration sind doch klar und verständlich: Das externe Skript mit ins Dokument laden und den (angepassten) Code-Snippet bei der Map-Initialisierung hinzufügen. Das könnte direkt vor dem setView-Aufruf für map1 sein.
Punkt 2: Möglicherweise reicht schon diese Zeile für eine Implementation.
map1.on("moveend zoomend", () => map1.setBounds(map.getBounds());
Anmerkungen zu deinem Markup:
Dieses ist an mehreren Stellen invalid. Die einzigen beiden Elemente, die unbedingt notwendig sind, hast du bspw. weggelassen.
- Es fehlt der Doctype.
- Es fehlt ein title-Tag im head-Bereich.
- Der link-Tag wirkt völlig kaputt.
Korrektur für den link-Tag:
<link rel="stylesheet nofollow noopener" href="https: //unpkg.com/leaflet@1.4.0/dist/leaflet.css" data-warning>
Das Leerzeichen vor den Slashes muss natürlich noch raus. Ich setze es hier nur wegen der GF-Editor, der mir sonst den Code vermauscheln würde.
- Die beiden script-Tags sind ebenfalls kaputt.
Korrektur:
<script src="https: //unpkg.com/leaflet@1.4.0/dist/leaflet.js" rel="nofollow noopener" data-warning></script>
<script src="http: //unpkg.com/leaflet@1.3.1/dist/leaflet.js" rel="nofollow noopener" data-warning></script>
Die Werte nofollow und noopener für das rel-Attribut sind meines Erachtens auch unnötig.
- Dein Button löst keinen HTTP Request aus, ist also kein Submit-Button. Er sollte daher auch als normaler Button gekennzeichnet werden.
<button id="suchen" type="button">Suchen</button>
- Ich kann wohl davon ausgehen, dass du nicht viel Ahnung von CSS und daher einfach Inline-Styles ins Markup geklatscht hast, welches Elemente zudem absolut positioniert (nicht so gut, da nicht so flexibel). Dabei lassen sich Elemente ziemlich leicht relativ zueinander positionieren. Setze das Flexbox-Layout ein. Folgend ein Beispiel:
HTML:
<div id="container">
<div></div>
<div></div>
</div>
CSS:
#container {
display: flex;
}
/* following only for test purposes */
#container > div {
background-color: red;
height: 250px;
margin: 5px;
width: 250px;
}
Wie man CSS in HTML einbindet, lässt sich hier nachlesen.
Die initMaps wäre ein geeigneter Platz, frühestens nach Definition von map. Die on-Funktion sollte zudem über map aufgerufen werden, nicht map1. Da muss ich mich vertippt haben.
Frag mal hier https://stackoverflow.com/ ich glaube die können dir schneller helfen.
Vielen Dank, hat alles soweit geklappt. Jedoch funktioniert bei mir dieser code nicht.
map1.on("moveend zoomend", () => map1.setBounds(map.getBounds()));
Wo setze ich ihn ein?