en ru Suggested plugins My Favorites ADD site under construction Turn off Demos Turn on Demos
Login using:

MapBox - zoom and pan map with several image layers

The plugin uses several images (from 2 or more) with different resolution. API for navigating the map (like Google Maps). MapBox - zoom and pan map with several image layers
Feautures: 3
Reliability: 3
Ease of use: 3
Documentation: 3
Average rating: 3

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 
category:
tags:
/mapbox
Reviews
Ayanindu Santra
Комментарий
"doubleClickZoom" is not working. Please help. Thank you.
A comparison of maps plugins

 

 licensezoomhighlighting region 
on the map
map
markers
full screen
mode
mouse
wheel
inertial
motion
visualization method
Gstatic mapFree
 
 
one marker
at the center
 
 
 
Google maps images:
map | satellite | hybrid
jVectorMapFree
 
 
 
 
 
 

special vector format 
in .js file. Render as SVG

MapBoxFree
 
 
poor
implemen-
tation
 
 
 
set of images with different resolution. Minimum - 2 images.
MapHilightFree
 
 
 
 
 
 
image + imagemap,
render as canvas
MobilyMapFree
 
 
 
 
 
 
any type of image
CraftMapFree for non commercial use. 49$ for commercial use
 
 
 
 
block
page
scroll
with
bugs
any type of image

 

Related plugins

This is an second version of the plugin MobilyMap.

The markers on the map with pop-up windows. Cookie to remember the position of viewing. Navigation, callbaks.

The map have effect of increasing and moving like in Google Maps. Maps of Europe, USA and Germany are attached

Card is easy to install. Size and type of card are configured. May be several cards on the page.

Areas can be defined in a different color. The color and thickness of a border adjustable. The effect of smooth appearance of the area zahoverennoy (fade in).

The script that implements a uniform filling of the site blocks with different heights

masonry
Masonry

To add reviews or comments please login

Sign in via:

×
Add a module for CMS
Add an example implementation this plugin
×
Your browser:
Description of the error: