Hallo @pwaMarlem und willkommen hier!
Folgender Code funktioniert für mich in einer herkömmlichen Webseite für die Anzeige einer Streckevon A nach B, die als geoJSON (hier im gleichen Verzeichnis des Webservers) vorliegt mit Marker für Start- und Endpunkt. Das ganze kann man sich unter Leaflet - Route als geoJSON einbinden anschauen.
// Funktion zum Einbinden von GeoJSON-Dateien
// siehe Antwort von F1refly in https://gis.stackexchange.com/questions/68489/loading-external-geojson-file-into-leaflet-map
async function getGeoJson(url) {
const response = await fetch(url);
const data = await response.json();
return data;
}
// Anzeige der Route - plus Start- und Endpunkt
async function displayRoute(url, map) {
const routeData = await getGeoJson(url);
// falls route sonst nicht gebraucht wird:
// L.geoJSON(routeData).addTo(map);
const route = L.geoJSON(routeData);
route.addTo(map);
// Marker an Start und Ziel
displayMarker(routeData, map);
}
// Anzeige Start- und Endpunkt auf der Basis meiner Routendaten
function displayMarker(routeData, map) {
// passt so bei meinen geoJSON-Daten der Route: lng, lat, height
var startPoint = routeData.features[0].geometry.coordinates[0][0];
var endPoint = routeData.features[0].geometry.coordinates.at(-1).at(-1);
L.marker([startPoint[1], startPoint[0]]).addTo(map);
L.marker([endPoint[1], endPoint[0]]).addTo(map);
}
var map = new L.map('mapid', {
fullscreenControl: true,
fullscreenControlOptions: {
position: 'topleft'
}
} ).setView([49.20, 5.40], 9);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© Openstreetmap | © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
displayRoute("./meine-route.geojson", map);
Bei einer erneuten Sucheingabe würde ich das Map-Objekt nur an die neue Stelle verschieben statt zu löschen und wieder neu zu erzeugen.
Anmerkung: auf das {s}. beim Tilelayer kannst Du inzwischen verzichten (bzw. es ist besser, darauf zu verzichten), siehe die Beiträge #9 und #11 in A,b,c.tile.openstreetmap.de subdomains von tile.openstreetmap.de werden aufgehoben - #9 by Stereo
Was spuckt denn Deine Konsole als Fehler aus?