I'm using Snap.svg for the presentation of my svg on a webpage. This works fine and I already implemented a zoom and a pane modus of the map by using the scroll wheel and the "dragging" technique. In case of no availability of a mouse, I would like to integrate ui elements for zooming and panning.
As implementing them by using input-range elements and custom arrows seems not to be the best option, I would like to ask if someone knows a library or something else, where such map ui elements are provided. I only found those in combination of the use of the respective system (leaflet,mapbox,google, etc.), but not for general use cases.
You can actually use leaflet for svg presentation surprisingly easily. Take a look at this example:
http://kempe.net/blog/2014/06/14/leaflet-pan-zoom-image.html
Then replace the URL in that example to your local svg. Instant pan/zoom for your svg!
Related
I spent a lot of time looking for JS script for interactive svg maps.
I already found https://imagemappro.com/demo-mall/ and https://mapplic.com/maps/world?location=de. Those two look good and work well. But both of them are using JQ.
I don't want to include JQ to one page, one time use, If possible.
Basically I'm looking for a script that (does not matter if paid):
Have a good API that allows me to select SVG elements and zoom into it etc.
Allow to click into the element and display a popup on top of it with some content.
Responsive and mobile friendly.
Support Drag, zoom.
NO JQ dependency.
Have to support custom SVG.
Allow me to link into an area, or some API hook that allows it.
Thanks for any sugestions.
Mm, tough question. With D3.js library you can do all that but it will require some learning to properly script it.
If you have WordPress then probably easier map plugin than Mapplic (that I still like most) is MapSVG. They offer world maps for free (with named country shapes e.g they have IDs) that you can use without buying MapSVG etc.
Other than that Google and GitHub search would give you various options, this library appears to be widely used (and you can have links in the SVG):
https://github.com/bumbu/svg-pan-zoom
This website has an excellent animated map showing the migration patterns of wildebeest in the Serengeti. Unfortunately, they animated their map using Flash.
I wanted to know whether there were alternatives for doing something similar, perhaps with Javascript. I found a plugin called Two.js however the documentation isn't great and it seems to be a bit overkill for what I need.
Does anyone know of any good resources or examples they could kindly link me to?
I think you have two options:
Using HTML5 canvas and animate your objects using window.requestAnimationFrame();
Animate the dom, here you could use GSAP or Web Animation API.
With HTML5 canvas you work with raster image (pixels) instead using the DOM you could animate any HTML elements including also SVG which is vector.
I'm searching for a JS framework that is compatible with CreateJS and KineticJS to create tooltips on a canvas.
I'm making an app that uses both CreateJSs and KineticJS and I want to draw tooltips on both of them (without using two libraries).
Thank you.
There are dozens (if not hundreds) of tooltip scripts out there—just ask google!
I assume that since you want to support both createJS and kineticJS that you must have already coded the trigger that requests a tooltip.
With that in mind, here is one tooltip library: http://www.opentip.org/documentation.html
It’s open-source so you can use/modify it freely.
It’s controlled by javascript so you have createJS/kineticJS independence while still working in JS.
It uses html canvas to display the tip so customizations should be familiar to you.
The tip-canvas is temporary and it floats so it should not interfere with your main canvas.
It allows you to offset the tooltip, so your code can exactly position the tip as you need.
I'm searching for a little piece of javascript that can attach to a div (in data-x data-y attributes for example) the x,y coordinates of a draggable div. And then be able to draw arrows between them (using a data-targetid attribute?).
If the solution can look like a simple version of graphview, jsPlumb or vizster but without the complicated library, and only in javascript/html
There is a jQuery version of jsPlumb, looks like it's 14kb. What you're trying to do isn't default functionality, you're going to need a (somewhat complicated) library to accomplish it. If you're concerned with code bloat I'd start with the source code of jsPlumb and start pulling out what you don't need.
is there any library or component that allows photoshop or pdf style zooming where i have images that i want users to be able to click to zoom in and out and i want to support being able to zoom in a number of times and zoom out a number of times
i want the equivalent of every user having the ability to do stuff like this:
https://addons.mozilla.org/en-US/firefox/addon/139
Have a look at:
the jQuery gzoom plugin
shiftzoom (example here)
the jQuery MapBox plugin (works with scroll whell and I'm sure you can stick + / - buttons)
the MooZom plugin (works with scroll whell and I'm sure you can stick + / - buttons)
Anything Zoomer is also nice
Then, there is Zoomorama which is an alternative to Microsoft's Seadragon if you don't mind using flash.
You can use Google Maps API to do that. All you need to do is to generate custom map tiles. There is a nice tutorial here.
EDIT: Just found another site that uses the same technique.
I have also found some alternative solutions that are not based on Google Maps API (1st is the best in my opinion):
Microsoft's Seadragon
http://ditchnet.org/dhtmlgallery/slider.html
http://www.oneblackbear.com/zoom/index.html
http://www.rborn.info/moozoom.php
and other questions about this topic:
Image Zoom using javascript?
Javascript for zooming and panning an image
Javascript / jQuery image zoom plugin
EDIT: If you have really large images, you can upload the files to GigaPan(SM) and embed them in your website.
Have a look at GWT too...
here is a zoomer made in GWT:
http://gwtgallery.appspot.com/about_app?app_id=21025
Silverlight Deep Zoom is one cool way if your environment permits it.
Here's a kind of overkill example of it : http://memorabilia.hardrock.com/
Also from a Flash advocate. And some more stuff - and maybe most fun of all a 13 gigapixel image.