Open an SVG file
First I create a button to select the file to upload and an html element to show the file
After selecting the file I get something like this:
How to scale and move SVG maps
For some maps, an overall view is enough but in this case I am interested in being able to zoom in on some elements. And, of course, also being able to move around the map.
To do this I can use the repository luncheon/svg-pan-zoom-container. I install the package using:
npm i svg-pan-zoom-container
So I change my code:
data-zoom-on-wheel attribute enables
zoom with the mouse wheel. Set as minimum scale 0.3 and maximum scale 20. The
data-pan-on-drag attribute enables mouse movement. In this case I set that the movement is done using the combination
control key plus
left mouse button.
In addition to the mouse wheel it is also useful to have a button or something similar to manage the zoom. I can, for example, create an
input element of type
range, by binding its value to the
To pass the scale from the map to the element I add
Then I add a new event to the
input [range] element in order to dynamically change the zoom:
The result looks like this:
Finally, I can add a button to reset the scale and return to the original one:
The next step is to understand how to manage layers and selections. But I’ll talk about this in the next post.