Hello i am developing my map from raster to vector

i have managed to embed the SVG Map File into the XHTML page and i am using AMPLE SDK Library it is great works on all browsers.

but how can i use this library to zoom and pan into the map? i am using AMPLE SDK because the Raphael Converter from SVG To Raphael not working in good way. RAPHAEL CONVERTER

Hello i am developing my map from raster to vector

i have managed to embed the SVG Map File into the XHTML page and i am using AMPLE SDK Library it is great works on all browsers.

but how can i use this library to zoom and pan into the map? i am using AMPLE SDK because the Raphael Converter from SVG To Raphael not working in good way. RAPHAEL CONVERTER

• javascript
• svg
• raphael
• vector-graphics

2 Answers 2

You can implement zoom and pan on SVG fragment by manipulating viewBox attribute on svg element as echo-flow suggested. However you should be using setAttribute to get the change reflected:

ample.getElementById("mysvg").setAttribute("viewBox", "500 500 1000 1000");

or

ample.query("#mysvg").attr("viewBox", "500 500 1000 1000");

Study the format of viewBox attribute and it will not be difficult to find out how it should be manipulated.

If Ample SDK supports dynamic SVG (and it looks like it does), then you can add this functionality by scripting the SVG root element's viewbox property in response to mouse events. For example.

var newX = 100;
var svg = document.documentElement;
svg.viewBox.baseVal.x = newX;

You would still need to hook up this code to respond to mouse events.

If you want library support, you can look into using the jQuery SVG library (although, again, I'm not sure how well this will play with Ample): http://keith-wood.name/svg.html

A demo of jquery SVG being used to perform an animated zoom using viewbox can be found here: http://keith-wood.name/svg.html#anim