The MapView Control

The MapView is the Control that renders a map. It requires and HTMLElement to be associated with and this is normally a <DIV> with an id that we declare in the web page. You create a MapView like this:

JavaScript Copy Code
// create a new instance of the mapView
view = new m.MapView(document.getElementById("mapView"));

The MapView can render two useful controllers - zoom and layer. You can show/hide them by using the respective properties:

JavaScript Copy Code
// create a new instance of the mapView view = new m.MapView(document.getElementById("mapView"));

Copy Code
view.showZoomController = true;
view.showLayerController = true;
view.zoomStep = 1;

The zoomStep proeprty lets you manipulate the step with which maps will be zoomed in/out. You can further specify how maps will be zoomed with the minZoomLevel and maxZoomLevel properties - they restrict the level of zoom the user is allowed to apply.

Copy Code
view.showZoomController = true; view.showLayerController = true; view.zoomStep = 1;

A map with the zoom controller (on the left) and the layer controller (on the right).

MapView has several collections which are defined by the decorations, overlays and mapLayers properties.

The decorations property holds all Decoration-s that are defined for this MapView. These are Bubble and Marker instances.

The mapLayers holds all MapLayer instances. MapLayer-s are responsible for rendering tile images that are returned by the TMS (tile map server).

The overlays property holds all DecorationLayer instances. These are the layers that hold Marker-s and Bubble-s.

Events

The layerLoad is raised when the MapLayer that renders the chosen map by the TMS has loaded completely. The viewLoad event is raised when all DecorationLayer-s have been loaded.

When the user clicks on the map or hovers over it the click and hover event are respectively raised. Here is how you handle the click event:

JavaScript Copy Code
view.click.addEventListener(mapViewClickHandler);
function mapViewClickHandler( sender, args )
{
view.scrollTo( args.position );
}

This event handling code is applicable to all events raised by the library. Other events of interest are decorationClick and decorationHover which are raised when the user clicks on a Decoration instance or moves the mouse over it.

JavaScript Copy Code
view.click.addEventListener(mapViewClickHandler); function mapViewClickHandler( sender, args ) { view.scrollTo( args.position ); }

Navigation

The panTo method pans the map to a new center location, specified by a LatLong instance. The scrollTo method scrolls the client area of the map to a new center point, specified by a Point instance, and the scrollBy method scrolls the client area by the specified amount.

Each map works in geographical coordinates while the mapView control has client coordinates. You can convert between the two with the latLongToClient and clientToLatLong methods.