Map wird in Tabbed Panels (DIV) nicht angezeigt

Hallo zusammen,
es gibt Problem mit dem Anzeigen von Map in Tabbed Panels bzw. Accordion.
Es funktioniert, wenn der Code in einer einfachen HTML-Seite liegt.
Weiß jemand, woran es liegt?

Folgendes ist der Code


var map2 = null;
var waypts = [];

// waypts wird onload initialisiert
function initTab(){
...
waypts.push( { latLng: L.latLng(latWert, lonWert) } );
waypts.push( { latLng: L.latLng(latWert2, lonWert2) } );

$("#coll_lst1vFStF1").click( function(){
    if($("#lst1fly_fli1").css("display") != "none") {
				showRouteMap();
	        }
});


}


function showRouteMap(){
	if(map2 == null){
		map2 = L.map("f1"); // div#f1 liegt unter div#lst1fly_fli1
        }
	else{
		 map2.invalidateSize(false);
		 return;
	}
    
	L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
		attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
	}).addTo(map2);
      
	var lPlan = new L.Routing.Plan(waypts, {
			draggableWaypoints: false,
			addWaypoints:  false,
			createMarker: function(i, wp) {
				return L.marker(wp.latLng, {
					icon: new L.Icon({ iconUrl: "./img/redMarker"+i+".png" , iconSize: [20, 34]})
		    		});
	    	    }
	    });
	
	var routeControl = L.Routing.control({
		show: false,
		plan: lPlan,
		fitSelectedRoutes: true
	}).addTo(map2);
	
	//setTimeout(function(){ map2.invalidateSize();       }, 100 );
	//setTimeout(function(){ map2.invalidateSize(true); }, 100 );
       setTimeout(function(){    map2.invalidateSize(false); }, 100 );
}

Gruß

Samtien

Ich glaube, sinnvoll wäre, wenn Du Dein Problem etwas genauer beschreibst, statt nur den Code sprechen zu lassen - das wird sich wahrscheinlich niemand genauer anschauen.

Mir kommt das Problem bekannt vor, ich hab aber keine Lust im blauen rumzustochern.

Besser als nur ein Code-Ausschnitt, bei dem die vermutlich relevanteren HTML und CSS Angaben noch fehlen, wäre ein Link zu einem lauffähigen Beispiel, idealerweise auf das Problem reduziert.

Z.B. in einem Online Editor wie JSFiddle, Plunker oder speziell für Leaflet:
http://playground-leaflet.rhcloud.com/?html,output (Leaflet Version mit “Add library” wählen, dann “Run with JS”)

Wir haben in unserer Web-Applikation einen DIV-Bereich mit 3 Register(ähnlich wie Accordion-Technik in jqueryUI) mit folgendem Struktur

DIV#l_fC
|-- DIV#l_ff_f0
|-- DIV#l_ff_f1
|-- DIV#c_l_vF1
|-- DIV#l_ff1
|-- DIV#f1
|-- DIV#l_ff_f2

Wir betrachten das Register 2 DIV-Element mit Id=“l_ff_f1”.
Es hat 2 innere DIV, DIV#c_l_vF1 enthält Register-Überschrift (Routenkarte), DIV#l_ff1 Register-Inhalt.
Unterhalb DIV#l_ff1 ist** DIV#f1**, in diesem DIV-Bereich mit Id=“f1” soll Routing-Map erscheinen,
z.B. der Route-Verlauf von A nach B.
Bei onload wird onclick-event von DIV#c_l_vF1 registriert.
Folgendes ist der Ablauf:
Register “Routenkarte” ist am Anfang geschlossen.
Nachdem Klick darauf wird Register-Inhalt geöffnet und die Funktion showRouteMap() aufgerufen.
In dem DIV-Bereich mit id=“f1” sieht man nur grauen Bereich mit Zoom-Symbol ± aber kein Map.

Wenn ich den Code in einem Test-HTML-Seite hinzufügen, dann erscheint der Map


 <body onload="loadMap()">
     <div id="f1"></div>
 </body>

Uh, das macht mich nich wirklich schlauer, aber klingt schon stark nach

Lösung: http://jsfiddle.net/KWX47/

Sollte Deinem recht nahe kommen.

MKnight, danke für den Links. Das hat mir leider nicht geholfen.
Ich habe in der Funktion “showRouteMap” mti folgendes erweitert


if(waypts.length > 0)   map2.setView([waypts[0].latLng.lat, waypts[0].latLng.lng], 5);

Ich kann jetzt die 2 Marker A und B sehen aber die Linie dazwischen nicht.

In dem Logbuch von Konsole steht folgendes:
Routing error: Object { status: -3, message: “TypeError: instructionObject is null” } jsosm.leaflet-routing-machine.js:2608:5

“Ich habe ein Problem. Bitte lösen.”
“Was für ein Problem?”
“Es geht nicht.”
“Was geht nicht?”
“Es wird keine Linie angezeigt.”
“Welche Linie?”

Die unendliche Geschichte. Entwickler finden Fehler normalerweise durch Debuggen. Deine stückchenweisen Infos ohne ein zusammenhängendes, lauffähiges Beispiel wird nicht viele Leute dazu animieren, dir zu helfen.

https://forum.openstreetmap.org/viewtopic.php?pid=655607#p655607

Davon abgesehen, hast du nichts von dem Projekt bekanntgegeben. Um ein Hobbyprojekt handelt es eher nicht, weil dann würdest du nicht so ein Geheimnis darum machen.

Es tut mir leid, dass ich nicht klar beschrieben habe.
Ich arbeite an einer komplexen Web-Applikation in einer Firma,
deswegen gibt es kein Link zu einem lauffähigen Beispiel.

An einer website gibt es einen DIV-Bereich, wo es Accordion liegt.
Ich verwende Bibliotheken leaflet.js Version 1.1.0 und leaflet-rounting-machine.js Version 3.2.5

Es geht darum, dass durch vorhandene Koordinaten die Route(z.B. A->B) auf der Karte
angezeigt wird.

Zum Test funktioniert folgende Code


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title>Beispiel mit  L.Routing.control </title>
    <style type="text/css">
      #map {
        height: 500px;
		width: 700px;
        margin-top: 20px;
      }
    </style>
    <link rel="stylesheet"  type="text/css" href="css/leaflet-routing-machine.css">
    <link rel="stylesheet"  type="text/css" href="css/leaflet.css">
    
    <script src="js/leaflet.js"></script>
    <script src="js/leaflet-routing-machine.js"></script>
    <script type="text/javascript">
  
    function loadMap(){
        var map = L.map('map');
		L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
		attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors. ' +
                'Routes from <a href="http://project-osrm.org/">OSRM</a>, ' +
                'data uses <a href="http://opendatacommons.org/licenses/odbl/">ODbL</a> license'
		}).addTo(map);
		var waypts = [];
		waypts.push( {latLng: L.latLng(48.5079039, 9.199177100000043)} );
		waypts.push( {latLng: L.latLng(51.491060, 7.524960)} );
 
		var lPlan = new L.Routing.Plan(waypts, {
			draggableWaypoints: false,
			addWaypoints:  false,
			createMarker: function(i, wp) {
				return L.marker(wp.latLng, {
					icon: new L.Icon({ iconUrl: "./img/redMarker"+i+".png" , iconSize: [20, 34]})
		    		});
	    	    }
	      });
		
	      var routeControl = L.Routing.control({
			show: false,
			plan: lPlan,
			lineOptions: {
				styles: [{color: 'blue', opacity: 1, weight: 3}]
                        }
		}).addTo(map);
	}
    </script>
   
  </head>
  <body onload="loadMap()">
    <div id="map"></div>
  </body>
</html>

In der Web-Applikation in Accordion sieht man die 2 Marker auf der Karte, die Verlauf-Linie ist nicht zu sehen. Die Verlauf-Linie zeigt,
wie man vom Marker A nach Marker B fährt

Dann eben nicht. Probier dein Glück auf stackoverflow.com

Hm. Was soll man dazu sagen? Firma, komplexe Applikation, keine Entwickler (nee, nur CSS und HTML beherrschen zählt da nicht), Geheimniskrämerei? Dann müßt ihr euch halt das Wissen einkaufen. Es gibt zwischenzeitlich genug Selbständige und Unternehmen, die das können und als Dienstleistung anbieten. Oder, wenn ihr kein Geld ausgeben wollt:

Be warned: Auch dort sieht man so ein “Details aus der Nase ziehen müssen”-Verhalten nicht so gerne.

Ich bin damit auch raus aus der Konversation. Viel Glück.