[Bug]: imageOverlay causes map to offset strangely

[OfficialTomPG]

Check for existing bug reports before submitting.

• [X] I searched for existing Bug Reports and found no similar reports.

Expected Behavior

When adding an SVG as an imageOverlay, the image should overlay on the existing leaflet map without distorting the positioning of the map itself when previewing the map.

Current behaviour

The initial map configuration works as expected:

id: Test-Map
image: [[Test_1.svg|Base]]
bounds: [[0,0], [1656,3200]]
height: 925px
width: min(95%, 1840px)
coordinates: [828,1600]
minZoom: -0.8
maxZoom: -0.8
defaultZoom: -0.8
unit: miles
scale: 1
recenter: true
draw: false
darkMode: false
#imageOverlay:
#- [ [[Test_2.svg|Test]] ]

However, when uncommmenting the imageOverlay lines, the image offset behavior changes:

Using the Reset Zoom button fixes the positioning but the initial preview is incorrect when using imageOverlay.

Reproduction

1. Create a leaflet map using an SVG:

   id: Test-Map
   image: [[Test_1.svg|Base]]
   bounds: [[0,0], [1656,3200]]
   height: 925px
   width: min(95%, 1840px)
   coordinates: [828,1600]
   minZoom: -0.8
   maxZoom: -0.8
   defaultZoom: -0.8
   unit: miles
   scale: 1
   recenter: true
   draw: false
   darkMode: false
   #imageOverlay:
   #- [ [[Test_2.svg|Test]] ]

2. Uncomment the imageOverlay lines

   id: Test-Map
   image: [[Test_1.svg|Base]]
   bounds: [[0,0], [1656,3200]]
   height: 925px
   width: min(95%, 1840px)
   coordinates: [828,1600]
   minZoom: -0.8
   maxZoom: -0.8
   defaultZoom: -0.8
   unit: miles
   scale: 1
   recenter: true
   draw: false
   darkMode: false
   imageOverlay:
   - [ [[Test_2.svg|Test]] ]

Which Operating Systems are you using?

• [ ] Android
• [ ] iPhone/iPad
• [ ] Linux
• [ ] macOS
• [X] Windows

Obsidian Version Check

Current version: v1.3.7 (Installer version: v1.3.5)

Plugin Version

Version 5.7.2

Confirmation

• [X] I have disabled all other plugins and the issue still persists.

Possible solution

No response

[NilsKrause]

I have observed a similar/same behavior when adding geojson to my map.

These are the setting for the map without geojson added:

When adding geojson it somehow centers the bottom right corner of the image map:

Configuration:

id: drahst-map
image: [[Assets/drahst.jpg]]
height: 600px
lat: 18
long: 20
minZoom: 3
maxZoom: 8
defaultZoom: 4
unit: meters
scale: 1
bounds:
  - [0, 0]
  - [37, 40]
darkMode: false
markerFolder: Games/Pen and Paper/D&D/Regeln/Places/Auroboros/Drahst
geojson: igno_travel.json

I have never done any obsidian plugin work. But maybe I'll try to get a fix going tomorrow, anyways.

EDIT: Obsidian Version: 1.4.4 Obsidian Leaflet Version: 5.7.2

[NilsKrause]

After hours of debugging and reading the code, I am still unsure what exactly causes the bug.

But I have found a solution that should not affect anything else and works around the issue with my geojson - and I strongly suspect it also does so for your (@OfficialTomPG) issue.

If you could check out the PR #417 and tell me if that also fixes the issue for you we could merge the PR and close this issue.

[valentine195]

I actually cannot recreate this at all, unfortunately. But I don't see any issue with invalidating the size.

[NilsKrause]

I also noticed, while debugging, that it only happens when you move the cursor out of the inline code box. When obsidian is started (or force a reload) and your cursor focuses somewhere else, it loads fine.