The plugin uses several images (from 2 or more) with different resolution. API for navigating the map (like Google Maps).

MapBox can show a picture of a specific territory. When moving the card to the edge of the picture, it ceases to move, and limited by edge.
All plugin settings:
$("#viewport").mapbox({ zoom: true, // does map zoom? pan: true, // does map move side to side and up to down? defaultLayer: 0, // starting at 0, which layer shows up first layerSplit: 4, // how many times to split each layer as a zoom level mapContent: ".mapcontent", // the name of the class on the content inner layer defaultX: null, // default positioning on X-axis defaultY: null, // default positioning on Y-axis zoomToCursor: true, // if true, position on the map where the cursor is set will stay the same relative distance from the edge when zooming doubleClickZoom: false, // if true, double clicking zooms to mouse position clickZoom: false, // if true, clicking zooms to mouse position doubleClickZoomOut: false, // if true, double clicking zooms out to mouse position clickZoomOut: false, // if true, clicking zooms out to mouse position doubleClickMove: false, // if true, double clicking moves the map to the cursor position clickMove: false, // if true, clicking moves the map to the cursor position doubleClickDistance: 1, // number of positions (determined by layerSplit) to move on a double-click zoom event clickDistance: 1, // number of positions (determined by layerSplit) to move on a click zoom event callBefore: function(layer, xcoord, ycoord, viewport) {}, // this callback happens before dragging of map starts callAfter: function(layer, xcoord, ycoord, viewport) {}, // this callback happens at end of drag after map is released "mouseup" beforeZoom: function(layer, xcoord, ycoord, viewport) {}, // callback before a zoom happens afterZoom: function(layer, xcoord, ycoord, viewport) {}, // callback after zoom has completed mousewheel: false /* requires mousewheel event plugin: http://plugins.jquery.com/project/mousewheel*/ });
API methods:
$("#viewport").mapbox("zoom");//zooms in 1 level (determined by layerSplit option) $("#viewport").mapbox("zoom", 2);//zooms in 2 levels $("#viewport").mapbox("back");//zooms out 1 level $("#viewport").mapbox("back", 2);//zooms out 2 levels $("#viewport").mapbox("zoomTo", 2);//zooms to the default size of the third layer (0 being the first) $("#viewport").mapbox("left");//move the current layer left 10 pixels $("#viewport").mapbox("right");//move the current layer right 10 pixels $("#viewport").mapbox("up");//move the current layer up 10 pixels $("#viewport").mapbox("down");//move the current layer down 10 pixels $("#viewport").mapbox("left", 20);//move the current layer left 20 pixels $("#viewport").mapbox("right", 20);//move the current layer right 20 pixels $("#viewport").mapbox("up", 20);//move the current layer up 20 pixels $("#viewport").mapbox("down", 20);//move the current layer down 20 pixels $("#viewport").mapbox("center");//centers current layer $("#viewport").mapbox("center", { x: 200, y: 400 });//centers current layer at positions 200px, 400px on the x and y axis
Reviews
Ayanindu Santra
Комментарий
"doubleClickZoom" is not working. Please help. Thank you.
комментировать
A comparison of maps plugins
license | zoom | highlighting region on the map | map markers | full screen mode | mouse wheel | inertial motion | visualization method | |
Gstatic map | Free | one marker at the center | Google maps images: map | satellite | hybrid | |||||
jVectorMap | Free | special vector format | ||||||
MapBox | Free | poor implemen- tation | set of images with different resolution. Minimum - 2 images. | |||||
MapHilight | Free | image + imagemap, render as canvas | ||||||
MobilyMap | Free | any type of image | ||||||
CraftMap | Free for non commercial use. 49$ for commercial use | block page scroll | with bugs | any type of image |
Related plugins