svgPanZoom | R htmlwidget for svg-pan-zoom.js | Data Visualization library

I'm using a pan-zoom library for zooming SVG elements. When I try adding a new path after zoom it displays improperly according to the old coordinates. Here is the code - JSFIDDLE. The problem may occur because the new element is not placed in the pan-zoom HTML tag. How to add the new object to place it at the correct pan-zoom coordinates?

Here is a fiddle of what actually have. https://jsfiddle.net/Lofdujwr/

I'm using a library for zoom and pan an SVG svgpanzoom. I have a button when clicked it zooms on spain for example, so I put the coordinates in:

I've got some simple html like below, and I need to access the SVG object in a JS script, and I'm having a horrible time of it.

I am using SVGPanZoom to manage the zooming of an SVG image in my hybrid Android (for all intents and purposes the same behavior as in Chrome) app. While zooming works well I have found a strange issue. My original inline SVG element goes like this

I'm trying to design a new way of creating a variable number of plots into a shiny page, and so far it's heading in the right direction, but when I reduce the number of plots, I keep getting the following error printed in the console

Warning: Error in [[: subscript out of bounds [No stack trace available]

It is related to something going wrong for plots that are now no longer called for, but I can't find out how to get rid of this error.

design is based on: SO question

I'm trying to keep my app from printing any errors, and I wonder (to learn as well) how to get rid of the out of bounds error in this following app:

Currently just using dummy plots before I insert my actual plots for testing purposes

DELIBERATELY not using grid arrange solutions because: I plan to add buttons above each plot for options, removing, saving etc - I want to make each plot zoomable with svgpanzoom (not possible with grid.arrange ggplot2 as far as I know

require(shiny)

I draw a picture using R with packages svgPanZoom,svglite,ggplot2 and shiny. However, it can display correctly on Rstudio but not on Web. Are there any options to solve it? Please run the following code for detail.

Svg auto-resizes to fill it's column container. After it completely loads svgPanZoom is applied and I end of with a smaller image:

If I apply a height to the container it will resize leaving me with blank spaces on each side.

Problem is that when I zoom in and zoom out again the image is not centered anymore:

I think there are two approaches to solve this: 1. Recenter the image on zoomOut. 2. Use viewBox preserveAspect to make the image resize correctly without applying the size via CSS.

Both for me are a bit confusing and after several hours trying I can't make it work. This is my code:

HTML:

I draw a picture using ggplot2 and want to display it in shinyApp with svgPanZoom packages. But the sactters is disappear. Anybody know why? You can run the following code for detail:

I would like to implement a zoom feature on my website which has a SVG image displayed.

I saw this library github.com/ariutta/svg-pan-zoom which provides the exact features i need,

However i can't seem to get it to work with angular2, window is not reachable.

after some research i figured i have to shim window into the webpack export for svg-pan-zoom. Maybe i'm not looking for the right thing but i think it is quite amazing there is so much work that needs to be done just to import a 3rd party javascript. best clue i could find is this : https://github.com/ariutta/svg-pan-zoom/issues/207 EDIT: See answer.

I used this angular 2 aspnet core starting project: https://damienbod.com/2017/01/01/building-production-ready-angular-apps-with-visual-studio-and-asp-net-core/

EDIT: actually it was this one https://github.com/MarkPieszak/aspnetcore-angular2-universal but the branch got updated at the time i made this post which got me confused

svg-pan-zoom.service.ts