SC-InteractiveMap
SC-InteractiveMap copied to clipboard
Add a button to the minimap to export the current view as an image (#219)
This contains what's essentially a rewrite of the leaflet-image
plugin. That plugin mostly worked, but didn't handle fractional zooms and some of the transforms that (newer versions of?) Leaflet
uses.
Note that this only exports the map tile layer and the overlay layer. Markers are not exported. They're html markers that contain svg
elements, which don't seem to be easy to render to a canvas. I can probably figure out how to include them in the future, but this seemed like a good start.
- Extends
TileLayer
to provide the ability to render to a canvas - Extends
Map
to composite any tile layers and overlays as canvases - Add a control that uses
map.exportToCanvas
to get an canvas representation of the current viewport. This will save asexport.png
when no save is loaded, or as<save name>.png
if there is a save- This is a little janky at the moment, and could probably be improved somewhat. The only thing that has knowledge of both the map and the save game is the global
SCIM
object, which seems strange to access from a control installed byGameMap
- This is a little janky at the moment, and could probably be improved somewhat. The only thing that has knowledge of both the map and the save game is the global
This addresses the core functionality of #219. There's a lot more I could do here to enable automation of multiple save games, etc, but I figured this was a good starting point.
A screenshot (captured with the OS screenshot tool) of the test map with some random zooms/pans applied after loading:

Note the new button!
The exported image of the same viewport, created by clicking the new button:
Note about the above images: I captured the first screenshot on a Mac with a retina display, so it's "upscaled" . The display size of both images is actually identical on the device itself.