Jump to content

pure javascript svg help


carlfaulkner

Recommended Posts

I am looking for a way to implement a pure Javascript svg map. I have created an svg but I am looking for a very clean pan zoom, tool tip on Hover that works on mobiles as well. I would like to have the mouse wheel to zoom as well as a plus and minus button. Pan around by clicking and dragging and panning on mobile with finger. I have tried plugins etc but no luck. I know it's possible with pure Javascript but I don't know js well enough. Any help would be very appreciated.

Link to comment
Share on other sites

If you're manipulating SVG elements then the Javascript will have to be embedded into the SVG file, as well as the buttons. You could probably use a <g> element for each button. Pan would be done using the translate() function and zoom would be done with the scale() which can be put into the tranform attribute.

Link to comment
Share on other sites

You would use the XML DOM to add a transform attribute to the <g> element when the touchmove event fires on mobile devices. You would use mousedown / mousemove / mouseup events on ordinary computers for panning.

 

For zoom, you need to draw the zoom in and zoom out buttons in the SVG document and put a click event on them.

 

I would create a "camera" object in Javascript that contains x, y and zoom factor properties which I would use to calculate how much to translate and scale the map.

 

I'll just say that this task isn't trivial, it takes more than just a couple of lines of code.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...