Web Maps Lite API Examples

Custom Map Controls

We're really pushing at the controls

Javascript Level: Intermediate

So far we've learnt how to add a map to a web-page, enable mouse controls, add control buttons and set the position of the buttons. Now we're going to learn how to add custom controls to your map. Click on the links in the top right of the map below to be taken to the city named - its like a tour of the world without leaving your bedroom.

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(0, 0), 1);

var MyCustomControl = function() {};
MyCustomControl.prototype = {
	initialize: function(map, position) {
		var control = document.createElement('div');
		
		control.style.background = 'white';
		control.style.padding = '5px';
		control.style.border = '1px solid #ccc';
		
		function createMapLink(location, zoom, name) {
			var link = document.createElement('a');
			link.href = '';
			link.innerHTML = "Go to " + name;
			link.onclick = function() {
				map.setCenter(location, zoom);
				return false;
			}
			control.appendChild(link);
			control.appendChild(document.createElement('br'));
		}
		
		createMapLink(new CM.LatLng(51.5084, -0.1255), 11, 'London');
		createMapLink(new CM.LatLng(52.516, 13.398), 11, 'Berlin');
		createMapLink(new CM.LatLng(37.7533,-122.4293), 12, 'San Francisco');
		createMapLink(new CM.LatLng(0,0), 1, 'World View');
		
		map.getContainer().appendChild(control);
		return control;
	},
	
	getDefaultPosition: function() {
		return new CM.ControlPosition(CM.TOP_RIGHT, new CM.Size(10, 10));
	}
}
		
map.addControl(new MyCustomControl());

That's a whole load of Javascript! Don't worry, we'll step through it bit by bit.

1. Set up the map in the usual way:

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

2. Next we create an empty function to act as a constructor for the class we will create:

var MyCustomControl = function() {};

The constructor will be called when we use the "new" keyword later on in the code

3. Next we use the "prototype" function to create "initialise" and "getDefaultPosition" methods. When we initialize our "MyCustomControl" class it will be passed a CM.Map object:

MyCustomControl.prototype = {
  initialize: function(map) {

4. Next we create a variable to hold an HTML div that will into which we will insert links to our custom controls:

var control = document.createElement('div');

5. Next we apply some styling to the HTML div that holds our custom control links:

control.style.background = 'white';
control.style.padding = '5px';
control.style.border = '1px solid #ccc';

6. Next we create a handy little helper function that we'll use later on to create links to each of the locations on the map. The functions takes a CM.LatLng class, a zoom level and a name string as arguments and then creates an HTML link on the page. When the link is clicked, the function moves the maps to the position specifid by the CM.LatLng object and zooms to the desired zoom level. Finally the createMapLink function appends the link its just created to the HTML div which holds the map controls:

function createMapLink(location, zoom, name) {
			var link = document.createElement('a');
			link.href = '';
			link.innerHTML = "Go to " + name;
			link.onclick = function() {
				map.setCenter(location, zoom);
				return false;
			}
			control.appendChild(link);
			control.appendChild(document.createElement('br'));
    }

7. The helper function we just created is going to come in really useful now, as we use it to create a series of links to different places on the map at different zoom levels:

		createMapLink(new CM.LatLng(51.5084, -0.1255), 11, 'London');
		createMapLink(new CM.LatLng(52.516, 13.398), 11, 'Berlin');
		createMapLink(new CM.LatLng(37.7533,-122.4293), 12, 'San Francisco');
		createMapLink(new CM.LatLng(0,0), 1, 'World View');

You can set as many links to different places as you like - be creative.

8. Now we use the getContainer() method of the CM.Map class to append our custom control to the map and return the control div so the map can position it on the map view:

map.getContainer().appendChild(control);
  return control;

9. Next we define the "getDefaultPosition" method for our control to set the position where the control resides by default:

getDefaultPosition: function() {
	return new CM.ControlPosition(CM.TOP_RIGHT, new CM.Size(10, 10));
}

10. The last line of code passes the MyCustomControl object we've just created to the map and the CM.Map object does all the magic:

map.addControl(new MyCustomControl());

To find out more about how our Web Maps Lite API works, take a look at the documentation.

If you're not fed up with maps yet, lets go onto the next example.

JS-docs | View example