search

2Abendsegler / GClh

GC little helper II - Some little things to make life easy (on www.geocaching.com). Powerful, configurable tool to improve and expand the geocaching pages.
GNU General Public License v2.0
58 stars 38 forks source link

[TB map] Resizable TB-Map does not work. #1287

Closed capoaira closed 4 years ago

capoaira commented 4 years ago

To Reproduce Steps to reproduce the behavior:

  1. Go to 'https://www.geocaching.com/track/map_gm.aspx?ID=6136406'
  2. There is nothing to resize the map

Screenshots grafik

Desktop (please complete the following information):

The Error messages is ReferenceError: map is not defined

2Abendsegler commented 4 years ago

Danke, gut beschrieben.

Doku: https://api.jqueryui.com/resizable

GS hat kein jQuery UI auf der Seite geladen. Deshalb kann man das nicht per injectPageScript abbilden, glaube ich. Mache ich es direkt, also ohne injectPageScript, dann kann ich die Karte beispielsweise größer machen, zumindest zu Begin.

Ich bin am WE nicht verfügbar, wenn also jemand ran möchte ... 😂 wohl eher nicht. Ich hasse maps, ich träum nachts schon davon.

Also hiermit geht etwas:

$('#map_canvas').append('<div class="ui-resizable-handle ui-resizable-s" id="sgrip" style="width: 100px;height: 100px;background-color: green;border-top: 1px solid black;border-bottom: 1px solid black;bottom: 0px;left: 98%;transform: rotate(-45deg);"></div>');
appendCssStyle('#map_canvas{ height: 450px;} .leaflet-bottom.leaflet-right {margin-right: 20px;}');
$('#map_canvas').resizable({handles: {'s': '#sgrip'}, minHeight: 300, maxHeight: 5000});
Ruko2010 commented 4 years ago

@2Abendsegler möchtest du das machen, oder soll ich mich drum kümmern?

2Abendsegler commented 4 years ago

@Ruko2010 Wenn du das übernehmen könntest wäre das super, danke.

Ruko2010 commented 4 years ago

Ich hab das Feature ja damals implementier 😉. Gehört also mir...^^

2Abendsegler commented 4 years ago

Gehört also mir...^^

Genau! 😂

Ruko2010 commented 4 years ago

@2Abendsegler Dank deines Codes läuft nun der Resize des Containers wieder. Ich hab aber kein Plan wie ich den Zoom wieder aktivieren soll. Vielleicht willst du noch einen Blick drauf werfen? Hier mein aktuelles Coding: https://github.com/Ruko2010/GClh/blob/issue/1287-resize-tb-map/gc_little_helper_II.user.js

2Abendsegler commented 4 years ago

Hab mir das Coding angesehen und hab noch etwas rumgespielt. Cursor angepaßt, Position des Schiebers angepaßt, auch in der Breite veränderbar, Startgröße soweit reduziert dass keine grauen Stellen unten und rechts stehen bleiben.

Letzteres ist auch das Problem beim [New Map] Hide header #1117. Trifft uns hier halt auch.

Coding:

            $('#map_canvas').append('<div class="ui-resizable-handle ui-resizable-se" id="xgrip" style="position: absolute; width: 24px;height: 5px;background-color: transparent;border-top: 1px solid black;border-bottom: 1px solid black;bottom: 0px;right: -8px;cursor: se-resize;transform: rotate(-45deg); z-index: 1;"></div>');
            appendCssStyle('#map_canvas {height: 350px; width: 815px} .leaflet-bottom.leaflet-right {margin-right: 16px;}');
            $('#map_canvas').resizable();

Probiers mal mit meinen Änderungen.

Zum Zoom per Mausrad habe ich nichts gefunden. Wenn niemandem mehr etwas einfällt, dann müssen die plus, minus Buttons eben reichen.

2Abendsegler commented 4 years ago

Die wichtigsten Neuerungen sind:

  1. map.invalidateSize(): Damit werden die grauen Stellen insbesondere am Anfang wieder als Karte aufgebaut. map ist dabei das Kartenobjekt. (Ohne die Kenntnis des Objektnamens könnten wir hier nichts tun. Siehe dazu auch der Kommentar beim #1117.)
  2. map.scrollWheelZoom.enable(): Maus Zoom
2Abendsegler commented 4 years ago

merged