Zooming

By adding the MQA.LargeZoom to your map, you can use the slider to change the zoom level.

MQA.withModule('largezoom', function() {
	
  map.addControl(
    new MQA.LargeZoom(), 
    new MQA.MapCornerPlacement(MQA.MapCorner.TOP_LEFT, new MQA.Size(5,5))
  );

});

The above code adds a MQA.LargeZoom to the map. The control contains a slider you can use to change the zoom level of the map.

Show me the code

Play with the code

By adding the MQA.SmallZoom to your map you can use the + and - to change the zoom level of the map.

MQA.withModule('smallzoom', function() {
	
  map.addControl(
    new MQA.SmallZoom(), 
    new MQA.MapCornerPlacement(MQA.MapCorner.TOP_LEFT, new MQA.Size(5,5))
  );

});

The above code adds a MQA.SmallZoom to the map. The control contains the + and - to change the zoom level of the map.

Show me the code

Play with the code

You can also programmatically zoom the map with the following calls where map is a reference to an MQA.TileMap object.

	
	map.setZoomLevel(10);
	
	map.setZoomLevel(5);
	

The following map is an example using an anchor tag to call the MQA.TileMap.setZoomLevel function.

Zoom Level 1 | Zoom Level 2 | Zoom Level 3 | Zoom Level 4 | Zoom Level 5 | Zoom Level 6 | Zoom Level 7 | Zoom Level 8 | Zoom Level 9 | Zoom Level 10

Show me the code

Play with the code

You can also use the mouse wheel to zoom the map with the following code.

	
MQA.withModule('mousewheel', function() {
    
  map.enableMouseWheelZoom();

});
	

Use your mouse wheel to scroll this map.

Show me the code

Play with the code