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