Web Maps Lite API Examples

Map Controls

Get ready to take control

Javascript Level: Beginner

In Example 1 we created a plain simple map. Now lets add some controls for the user to have more ways to control the map.

Here's the JavaScript for this example:

var cloudmade = new CM.Tiles.CloudMade.Web({key: 'BC9A493B41014CAABB98F0471D759707'});
var map = new CM.Map('cm-example', cloudmade);

map.setCenter(new CM.LatLng(51.514, -0.137), 15);
      
map.addControl(new CM.LargeMapControl());
map.addControl(new CM.ScaleControl());
map.addControl(new CM.OverviewMapControl());

Lets look at it in a little more detail.

1. The first three lines are the same as the previous example, so we can skip them.

2. The next line uses the CM.Map class's addControl function to add 3 different controls to the map - LargeMapControl, ScaleControl and OverviewMapControl:

map.addControl(new CM.LargeMapControl());
map.addControl(new CM.ScaleControl());
map.addControl(new CM.OverviewMapControl());

Now your users can navigate around your map using navigation and overview map controls and see the scale of the current map view. In the next example we'll see how to change the position that a control appears in.

JS-docs | View example