Web Maps Lite API Examples

Map Control Positioning

Its you at the controls

Javascript Level: Beginner

In Example 3 we added some controls to the map. Now lets see how we can choose their exact location.

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(53.4, -3.8), 6);
        
var topRight = new CM.ControlPosition(CM.TOP_RIGHT, new CM.Size(50, 20));
map.addControl(new CM.SmallMapControl(), topRight);

1. The first three lines are the standard CloudMade Map setup stuff. We've been getting a bit fed up with central London, so we've zoomed out a bit 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(53.4, -3.8), 6);

2. Next we create a new control position object and pass it an anchor position object and a Size object. The "Anchor" tells the ControlPosition which corner of the map the controls should be offset from. The "Size" object tells the control how far it should be offset from the corner of the map. All of this information is held in a variable called "topRight".

var topRight = new CM.ControlPosition(CM.TOP_RIGHT, new CM.Size(50, 20));

3. The next step is to add a control to the map. We add a small map control and pass it the information about its position that is held in topRight:

map.addControl(new CM.SmallMapControl(), topRight);

That's it - you've put the controls exactly where you wanted them.

In the next example we'll see how to create your own control and put it on your map.

JS-docs | View example