Creating a Map

Using an OSCAR-js map is easy. Create a div tag, and give it an id. "map" is usually an appropriate choice.

    <div id="map" class="mediumMap"></div>
All OSCAR-js objects can't be created until after OSCAR-js has been loaded into the page. For this reason, any code that is using OSCAR-js must be placed inside a function that will be called by the Loader. The Loader will run the script after OSCAR-js has finished loading.
	oscar.onReady(initCodeInAction);	
	map = new OpenLayers.Map("map",options);
The options object is used to set properties on the map. Refer to the API Reference guide for a complete list of properties that can be added to the options object.

Adding Map Controls

Since a map with no controls is boring, you will most likely want to add controls like a Pan/Zoom bar, the mouse position, or a scale line. To do this, set the controls property of the options object to an array containing the controls you want.

	var options = {
            controls:[new oscar.Control.PanZoomBar,  new OpenLayers.Control.MousePosition, 
			new OpenLayers.Control.ScaleLine]
        };
For a list of controls available in OSCAR-js, see the API Reference guide. Some controls may require additional configuration before they can be added to the map. In this case, create the control, set its parameters, then use the map.addControl method to add the control to the map.
    var configUrl = "data/simple.xml";
    var ts = new oscar.Control.ThemeSwitcher();
    map.addControl(ts);
    ts.getThemeManager().autoDraw=true;
    ts.getConfigManager().load(configUrl);
In this example, this method is used to a Theme Manager to the map. The Theme Manager is used to display Themes on the map. An OSCAR-js theme is a group of layers that are displayed on the map together. The Theme Manager allows you to switch between Themes and thus change which groups of layers are shown on the map. You tell the ThemeSwitcher where to find its themes by providing it with the location of a configuration file. This file can be in either JSON or XML. For instructions on how to create this file, see OSCAR-js configuraion with XML. The sample data used for this example is located in data/simple.xml.

After you have added a basic map and controls, your page source should like this

    <html>
    <head>
    <title>Basic OSCAR-js Map</title>
    <script src="/scripts/oscar/Loader.js"></script>
    <script>
	   var configUrl = "data/simple.xml";
	   var map;
	   function initCodeInAction() {
	       OpenLayers.ProxyHost = "/proxy?url=";
		   var options = {
	                controls:[new oscar.Control.PanZoomBar,  new OpenLayers.Control.MousePosition, 
					new OpenLayers.Control.ScaleLine]
	            };
	        map = new oscar.Map('map',options);
	        var ts = new oscar.Control.ThemeSwitcher();
	        map.addControl(ts);
	        ts.getThemeManager().autoDraw=true;
	        ts.getConfigManager().load(configUrl);
	    }
	    _OscarLoader.onReady(initCodeInAction);
    </script>
    </head>
    <body>
        <div id="map" class="mediumMap"></div>
    </body>	
    </html>