Web Maps Lite API Examples

Sidebars

Dark Left side of the moon map

Javascript Level: Beginner

Web Maps Lite supports a special control type: the sidebar. In this example we will show what it looks like and how to use it.

Toggle Sidebar

Lets see how the sidebar works by adding a Search Sidebar to our map:

var APIKEY = 'BC9A493B41014CAABB98F0471D759707';
var map = new CM.Map('cm-example', new CM.Tiles.CloudMade.Web({key: APIKEY}));
map.setCenter(new CM.LatLng(51.514, -0.137), 15);

var sidebar = new CM.SearchSidebar({key: APIKEY});
map.setSidebar(sidebar);
map.openSidebar();

The code is so simple that it's almost embarrassing to explain:

1. We set up a new CloudMade map as usual.

2. Next we create a new CM.SearchSidebar object, passing our API key:

var sidebar = new CM.SearchSidebar({key: APIKEY});

3. Next we set it as the map's sidebar by calling the CM.Map's setSidebar method and show it with the openSidebar method:

map.setSidebar(sidebar);
map.openSidebar();

Note that you can have only one sidebar at a particular moment, but you can also change them on the fly.

4. Finally we add a button somewhere on the page that toggles the sidebar on and off with toggleSidebar method:

<button onclick="map.toggleSidebar();">Toggle Search Sidebar<button>

Now we have a sidebar on the map which we can toggle with a button. Nice! Lets try another great sidebar by replacing CM.SearchSidebar with CM.StyleSidebar:

You can find out a list of sidebars you can use on your maps by checking out the Sidebar section of our documentation. Now lets try something different - making Google Maps code work like it's for Web Maps Lite: Google Wrapper

JS-docs | View example