map SVG is broken after panning - panes are blank

[jameshadfield]

The map SVG comprises two parts - the saving of the background map panes as a base64 PNG inside the SVG, and the demes & transmissions (SVG paths etc). This works well for the default view, and zooming appears to be ok. Hovever, panning brakes both of these parts.

This issue:
Map panes which have been panned into view do not save and there are 404s in the console

UPDATE: I suggest any work towards this issue continues on top of PR #925

[CameronDevine]

I am not able to reproduce this issue. It appears this should have been closed by #587.

[jameshadfield]

@CameronDevine are you able to reproduce this?

[CameronDevine]

@jameshadfield Yes, I am able to reproduce this. It appears there is an issue with the mapbox/leaflet-image library (See mapbox/leaflet-image#89 and mapbox/leaflet-image#117). When a map image is requested that spans the "anti meridian" (The line of 180 degree longitude) the result is incorrect. Areas of the map with a longitude less than -180 degrees are blank, while areas greater than +180 degrees seem to have a portion of the map incorrectly placed in the remaining area.

[rleir]

@CameronDevine But Japan is about 138E longitude, and the line of cutoff in the example seems to go through Japan. Roughly the anti-meridian of Boston (funny coincidence, location of MIT). I had a similar problem with the anti-meridian of Ottawa, Canada in this leaflet map: https://leirtech.com/example/conn/

and solved it by making sure the longitudes values were within the range [Ottawa+180 .. Ottawa-180] with the 3 lines of code at or about
https://github.com/rleir/connection-map/blob/3821a0aad443b2f63b8099af00000abe3d0e0988/src/info2geojson.py#L327
@jameshadfield Where in the Auspice code do you create the SVG map? cheers -- Rick

[CameronDevine]

I believe this issue should have been closed when #925 was merged in. However, I think the changes in that pull request, specifically the change to dom-to-image, caused #1066. The image generation happens in the window.L.getMapTiles function of src/components/map/map.js.

Note, this is only an issue when downloading an SVG of the data displayed.

[rleir]

@CameronDevine thanks for that. You gave lots of info in just a few words. I think that you are saying that the SVG download used to work correctly? And it sounds as if several issues are interrelated.

[CameronDevine]

@rleir There are multiple interrelated issues here. Before #925 leaflet-image was used to generate an image of the background map to include in the downloaded SVG. This library had issues with generating an image of the map when the displayed area crossed the anti-meridian. To get around that issue we changed to dom-to-image to generate the map image, which fixed the issues with the anti-meridian. However, this was likely the cause of #1066 as this library liberally uses forignObject SVG tags which I expect Inkscape does not adequately support for this application. If leaflet-image was able to handle a map spanning the anti-meridian correctly I think it would be the best approach as it should allow editing in Inkscape (which I haven't tested), but I will let @jameshadfield decide what approach we should take.