Leaflet: zoom und bounds (interaktiver Messeplan)

[Linuchs]

Moin,

offenbar sehe ich den Wald vor lauter Bäumen nicht, die Bedeutung der Stellschrauben bei Leaflet ist mir nicht klar.

Der Messeplan soll (hauptsächlich) auf Smartphones dargestellt werden. Anfänglich soll der zoom so sein, dass der ganze Plan verkleinert und bildschirmfüllend zu sehen ist. Muss ich dafür per JS den Viewport ausmessen und den start_zoom ermitteln oder kann Leaflet das selber?

  // die Grafik, Abmessung in px:
  var messeplan_filename  = "img/bfp_FORUM_2017_Hallenplan_90cm.png";
  var messeplan_x         = 3344;
  var messeplan_x         = 1436;

  // die Zeigefläche, Abmessung in px:
  var messe_div_x = document.getElementById("messe_div").offsetWidth;   // z.B. 865 Smartphone
  var messe_div_y = document.getElementById("messe_div").offsetHeight;  // z.B. 469

  var start_zoom = Math.round( messe_div_x / messeplan_x *100 ) /100;   // 2 Stellen nach dem Komma
  alert( "["+messe_div_x+"] / ["+messeplan_x+"] = ["+start_zoom+"]" );
  var bounds  = Object.create([[0, 0],[ "-"+messeplan_y, messeplan_x]]); // Grenzen der Grafik

  var messe_obj = L.map('messe_div', {
    crs: L.CRS.Simple,
    zoom:     start_zoom,
    maxZoom:   1,
    minZoom:  -4,
    maxBounds: bounds
  });

Also: Grafik ist 3344 px breit, Anzeigefläche 865 px, das sind 26 %. Nun stelle ich den start_zoom auf 0.26, die Grafik ist größer als die Fläche.

Dann soll er natürlich zoombar und veschiebbar sein, aber so, dass er nicht komplett auswandert. Im Moment rutscht er immer wieder zur Mitte.

Linuchs

[Linuchs]

Bitte prüft auch, ob das Zoomen und Verschieben auf eurem Smartphone funktioniert.

Bei mir ist im FF auf dem Laptop alles prima.

Auf dem Smartphone (LG von 2011) diese Probleme:

• Plan hat zu Beginn die richtige Größe, aber nur linke obere Ecke zu sehen. Bein nächsten Laden ist er wieder größer als die Anzeigefläche …

• Verschieben geht gar nicht, springt zurück in die Startposition.

• Vergrößern geht nicht, springt nach dem Loslassen weg

• Verkleinern geht nicht, Teilplan wird in voller Größe gezeigt.

Ich hoffe, das ist dem alten Smartphone zuzuschreiben, ich brauche ja sonst keines.

Linuchs

[TS]

Hello KH,

Du scheinst dich ja zu einem Leaflet-Spezialisten zu entwickeln. Da freue ich mich zu wissen, wen ich demnächst fragen kann, wie es richtig geht ;-)

Ich kämpfe auch immer noch gegen diverse Smartphones und deren Browser. Lieber wäre mir zu wissen, wie man mit ihnen arbeiten könnte. :-O

Es erscheint mir daher wichtig, dass Du genauere Angaben machst:

• welches Smartphone
• mit welcher OS-Version
• mit welchem Browser nebst dessen Version

Du verwendest.

Und wie deren Verhalten im Mobile Mode und im Desktop-Mode sind.

Insbesondere scheinen etliche Smartphones (bzw. deren Browser) Probleme mit dem Resize bei Drehung der Orientierung und/oder mit dem Neuladen von CSS-Infomationen nach deren Änderung zu haben. Leider konnte ich darüber noch keine verlässliche Übersicht finden.

Liebe Grüße
Tom S.

[Linuchs]

Hallo Tom,

vorweg: Ich habe das Smartphone 2011 gekauft, um meine "normalen" Webseiten per WLAN zu testen. Damals stand leaflet nicht auf dem Programm.

Ich habe keinerlei innere Beziehung zu dem Teil. Als ich meine Vodafone Prepaid-SIM einlegte (ich dachte: Das Ding kann doch auch telefonieren), hat es ohne mein Zutun 10 € weggesaugt, ohne mich mit dem Internet zu verbinden.

"Ja, Sie müssen die Internetfähigkeit der Karte sperren lassen." Getan.

Es erscheint mir daher wichtig, dass Du genauere Angaben machst:

• welches Smartphone
• mit welcher OS-Version
• mit welchem Browser nebst dessen Version

Beim Hochfahren zeigt es die Buchstaben "LG" und zwitschert.

• Modellnummer LG-E400
• Android Version 2.3.6
• Typ und Version Browser nicht gefunden.

Linuchs

[Auge]

Hallo

Beim Hochfahren zeigt es die Buchstaben "LG" und zwitschert.

• Modellnummer LG-E400
• Android Version 2.3.6
• Typ und Version Browser nicht gefunden.

Ach herrje, nach heutigen Maßstäben ist das ein Museumsstück. 😀

Falls du keinen anderen Browser installiert haben solltest, handelt es sich um den Stockbrowser. Die Versionsangabe des Browsers entspricht der der Androidversion, ist hier also die 2.3.6.

Tschö, Auge

[TS]

Hello,

Es erscheint mir daher wichtig, dass Du genauere Angaben machst:

• welches Smartphone
• mit welcher OS-Version
• mit welchem Browser nebst dessen Version

Beim Hochfahren zeigt es die Buchstaben "LG" und zwitschert.

• Modellnummer LG-E400
• Android Version 2.3.6
• Typ und Version Browser nicht gefunden.

Generell bin ich ja auch für Nachhaltigkeit, also Benutzung von Geräten und Software, solange es sauber™️ läuft. Aber Android 2.3.6 schreit auf Geräten für den täglichen Bedarf wirklich nach Ugrade!

Selbst mein altes Galaxy-3 GT-I9300 hat "schon" Android 4.3 drauf. Und mit dem Chrome-Browser kann es "sogar" Websockets. Und Android ist inzwischen wohl bei 6.x angekommen...

Versteh mich deshalb bitte nicht falsch: ich teste auch grundsätzlich die Extreme, aber für die tägliche Anwendung eines Business Fair Visitors kommt dann doch wohl eher etwas Neueres in Frage.

Liebe Grüße
Tom S.

[Auge]

Hallo

• Android Version 2.3.6

Generell … Aber Android 2.3.6 schreit auf Geräten für den täglichen Bedarf wirklich nach Ugrade!

Dass das gerät nicht für den täglichen Gebrauch da ist, hat Linuchs hier irgendwo im Thread schon klargestellt, aber grundsätzlich hast du damit recht.

Selbst mein altes Galaxy-3 GT-I9300 hat "schon" Android 4.3 drauf. … Und Android ist inzwischen wohl bei 6.x angekommen...

Das Wort „schon“ steht aber nicht aus Versehen in Anführungszeichen, ne? :-) Android 4.3 gehört eigentlich auch schon ins Museum. Mit LineageOS (Nachfolger von Cyanogen Mod) kannst du für das Gerät auch Android 7.1 mit Stand vom 14.06.2017 haben. Aus der Gewährleistung und Garantie sollte das Gerät vermutlich raus sein, so dass dies dem Update nicht im Wege stehen sollte.

Tschö, Auge

[TS]

Hello,

Selbst mein altes Galaxy-3 GT-I9300 hat "schon" Android 4.3 drauf. … Und Android ist inzwischen wohl bei 6.x angekommen...

Das Wort „schon“ steht aber nicht aus Versehen in Anführungszeichen, ne? :-)

Nee, das war zufällig Absicht :-)

Android 4.3 gehört eigentlich auch schon ins Museum. Mit LineageOS (Nachfolger von Cyanogen Mod) kannst du für das Gerät auch Android 7.1 mit Stand vom 14.06.2017 haben. Aus der Gewährleistung und Garantie sollte das Gerät vermutlich raus sein, so dass dies dem Update nicht im Wege stehen sollte.

Guter Tipp. Werde ich mir mal überlegen und ggf. auch durchführen.

Liebe Grüße
Tom S.

[Linuchs]

Habe die Seite gerade auf dem Smartphone eines Bekannten getestet, das auch schon einige Jahre auf dem Buckel hat. Dort lief es wie gewünscht.

[Auge]

Hallo

Kann es sein, dass Leaflet Dinge tut, die der Browser auf deinem Museumsstück einfach noch nicht kann? Android 2.3.6 ist nicht nur asbachuralt, es ist laut den Zugriffstatistiken auf den PlayStore auch nicht mehr als relevant zu erachten. Die Versionen 2.3.3 bis 2.3.7 kommen zusammen auf 0.8% und selbst der Bereich 2.3.3 bis 4.3 kommt auf gerade einmal 10.4%, wobei der größte Einzelposten die Version 4.2 mit 4.4% ist. Erst die 4.4 kommt mit 18.1% auf einen wirklich relevanten Anteil.

Bei deinem Messepublikum solltest du auch davon ausgehen können, dass die keine Museumswärter sind. 😉

Tschö, Auge

[TS]

Hello,

noch ein allgemeiner Tipp zu deinen Daten von den Ständen:
Es ist nicht nur interessant, welche Koordinaten welcher Stand hat, sondern auch, welchem Gang er primär zuzuordnen ist. Das ist ja manchmal aus den Koordinaten (für die Software) nicht klar erkennbar.

Ich weiß jetzt leider nicht, wer und wann es war, aber da gab es schon einmal einen längeren Thread für die Berechnung der kürzesten/günstigsten Wege von einem Messestand zum anderen. Es kam die Graphentheorie zum Einsatz. Den solltest Du im Archiv eigentlich noch finden.

Vielleicht hilft es Dir bei deinen weiteren Convenience-Apps für deine Besucher und bei deinem Datenmodell. Wenn Du schon mal beim Datenerfassen bist, kannst Du das ja gleich miterledigen. ;-)

Liebe Grüße
Tom S.

[JürgenB]

Hallo

>   var messeplan_x         = 3344;
>   var messeplan_x         = 1436;

                  ^

sollte hier nicht ein y stehen?

Gruß
Jürgen

[Linuchs]

sollte hier nicht ein y stehen?

Klar, habe ich schon korrigiert. Danke für aufmerksames Lesen.

Linuchs

[1unitedpower]

Muss ich dafür per JS den Viewport ausmessen und den start_zoom ermitteln oder kann Leaflet das selber?

myMap.fitWorld() klingt nicht verkehrt.