hexastack / hexamaps Goto Github PK

In order to export the svg as image using canvas, the height and width attribute are required

When embeding the map the user would like to resize the map so it fits well with the rest of the host content, the idea is allow the user to resize the parent element containing the map and the svg will follow. FYI, Hexamaps style can also be overwritten via css.

The resize must also alter the viewbox and the viewport (width/height) attributes of the svg element
http://tutorials.jenkov.com/svg/svg-viewport-view-box.html

Two mods would be available, keep aspect ratio and clip, this is to be set via a prop
Keep aspect ratio would resize the svg in a way where the view box keeps it's ratio
Clip would hide the overflown part

Users might want to disable the pan and zoom interactivity, add a props for theses.

on editor mod, both interactions are always enabled.

Currently the view box is identical to the whole svg element, separating it from the svg will allow the map editor to set the visible part of the map to later be embeded.

Add 2 props view-box-height and view-box-width to control the view box
Add 2 local state vars so the map can change the dimensions on editor mode