SVGPan: a Javascript SVG (Viewer) Pan/Zoom/Drag library. Some time ago the need for a browser-compatible vectorial language pushed me to consider the SVG markup language (I won’t say anything about Internet Explorer – it’s just unsupported there).
The language itself is great, but, as a beginner, I was so disappointed about the fact that on the Internet I couldn’t find ANY library ready to use for panning and zooming features that I had to write one from scratch. The SVGPan library features: Panning (pan à la Google maps) (click on the white background and pan)Zooming (using the mouse wheel)Element dragging (click on a drawing element and drag it somewhere else)Combinations of the above like zooming while dragging The resulting javascript library is published here, in the hope that someone can find it useful.
The library itself is very small and easy to use; and it’s licensed under the BSD license. Maps API.
APIs. Zoomooz.js. Zoomooz is: 6KB gzipped and 18KB minified.
This includes everything but jQuery. Make any web page zoom. Latest version: 1.1.9 (Nov 11, 2013, hacky fix for the back and forward buttons #66) jQuery Wheelzoom. A plugin to zoom IMG elements on mousewheel or touchpad scroll.
Fork me on GitHub Demo Download Released under the MIT License. Compatible with: Chrome, Firefox 17+, Safari, Opera, Internet Explorer 9+. Make Your Images Interactive - ThingLink. Making an Interactive Picture with jQuery. In this tutorial I will be showing you how to piece together an interactive picture – aka an image that contains tooltips and popup boxes.
This can be useful for showing off a particular aspect of a photo (ie items or people). The original inspiration for this tutorial came from the IKEA website, which uses Flash to accomplish something similar, although admittedly with a few extra features. Tutorial Outline. Jquery mousewheel and drag zoom. jQuery-PanZoom. HTML/Elements/img - W3C Wiki. The <img> element represents an image.
Point The image given by the src attribute is the embedded content, and the value of the alt attribute is the img element's fallback content. Example of images: PNG JPEG GIF single-page PDF XML file with an SVG root elemet APNG animated GIF ... However, this also precludes SVG files with script, multipage PDF files, interactive MNG files, HTML documents, plain text documents, and so forth. HTML Attributes alt = normal character dataGives the fallback content for the image.The requirements on the alt attribute's value are described in the next section. src = URL potentially surrounded by spacesSpecifies a URL referencing a non-interactive, optionally animated, image that is neither paged nor scripted. usemap = hash-name referenceSpecifies a hash-name reference to a map element with which to associate the object.
Fast and beautiful maps. Maps API. New Release! Convert Any Image Into an Interactive Map. MapLib.net - Make your custom Google Maps out of any pictures. Draggable image map with zoom in jQuery. Let’s say you want to create some kind of ‘world map’ thingy where you have an image inside a viewport so that most of your ‘map’ overflows the viewport.
You want the user to be able to drag around the image to view other area’s on the map and to zoom into different levels. Also, you want to use the html <map> tag to be able to link certain area’s on the map to certain pages on your website. This could all be done relatively easy by using the jQuery UI library, some basic HTML + CSS and draggable(). Wax / Wax. We’d highly recommend you use a current version of MapBox.js rather than Wax for all future projects, and consider porting your code! Good news, everyone! MapBox has introduced MapBox.js v1, which features improved browser support, documentation, and access to a rich ecosystem of Leaflet plugins.
So please usher yourself to the new MapBox.js page and enjoy the future! ↓ Download Wax 6.4.0 BSD-licensed, ~16KB. A simple map. $.goMap - google maps jQuery plugin. 10 jQuery Google Map Plugins. Here are 10 very different jQuery Google Maps Plugins to make life as easy as a street map.
You might only want to display a simple map that displays directions to your clients address, or even an interactive map with more options as necessary. The plugins below offer not only an easier method to install a map, they also offer the option to add extra functionality, and should you choose to need them. Happy mapping! Related Posts: Premium – Google Maps Video Search Google maps video search and display script. A jQuery Plugin for Zoomable, Interactive Maps. What is it and why was it built?
A couple of months ago we launched a site about Marine Science in North Carolina with one of our design partners, Liaison Design Group. A key part of the project was an interactive map that allowed visitors to find important Marine Science resources in North Carolina. Each location on the map would be represented by a bullet. Clicking the bullet would bring up more information on the location. Welcome AlbanX.com. Real Ajax Uploader Modern HTML5 base multi file uploader.
Fast, parallel uploads, chunk upload and more. Read More Cube Slider 3D Cubes Image Slider base on css3. Map viewer jquery. jQuery Geo docs. Welcome!
jQuery Geo is an open-source, geospatial mapping jQuery plugin from Applied Geographics developed with the intention of making spatial web mapping significantly simpler than it may initially seem. We would like to point out the term "open-source" to explictly state that Google, Bing, & Esri are generally free but not open. Please read the following sections for more information and examples, and thank you for considering us!
If you have any questions feel free to ask the lead developer on Twitter. If you would like only release notifications, you can follow the project itself on Twitter. docs. Mapbox: the jQuery Map. Most Recent Blog Post:jQuery Mapbox Updated Click to toggle dark text on white Home » Plugins » Mapbox Get latest code here.