JavaScript

GeoCommons provides a JavaScript API to maps for panning, zooming, and setting controls.

How to add a map to a page

First, load f1_maker_map.js. Within

and place the following:
<pre> <script src="f1_maker_map.js" type="text/javascript"></script> </pre>

Second, Tell maker where to find the servers, also within the

tags:
<pre> <script type='text/javascript'> Maker.maker_host='http://maker.geocommons.com'; Maker.finder_host='http://finder.geocommons.com'; Maker.core_host='http://core.geocommons.com'; </script> </pre>

Third, add a placeholder for your map on your page. This is a good place to specify a ‘Loading…’ notice. In the following ‘example_map’ and its contents, the loading message in this case, will be replaced with a map.
<pre> <div id='example_map'> <div class='loading'> Loading...

Last, tell Maker to load and replace the map:
<pre> Maker.load_map('example_map', 5, { onLoaded: function(map){my_map = map} } ) </pre>

This instructs Maker to load the map and assign it to the my_map variable when it’s done loading. While it’s possible to access your map without the callback we don’t recommend it since it takes a few moments for the map to load.

Once your map is loaded, use any of the Maker Methods (see below) to interact with it. For example, if your map is assigned to ‘my_map’, the following would set the map’s bounds to Washington DC:
<pre> my_map.setBounds({ 'north': 51.9, 'south': -4.3, 'east': 52.25, 'west': -3.75 }) </pre>

Searching for Maps via JavaScript
To retrieve a list of maps from Maker, follow the first two steps above to setup the Maker object. Then try something like this:

<pre> MyClass = { searchCallback: function(results) { MyClass.results = results; Maker.load_map('my_map', results[0].pk) } } Maker.find_maps('economy', 'MyClass.searchCallback') </pre>

In this example we’ve created a class to hold the call back and the results for future reference. You don’t have to use a class but it’s a good idea to keep your code organized and avoid global variables. When Maker.find_maps is called it will use JSONP to add a script tag to your page which then calls Maker and assigns the results to your callback. In this example we then tell Maker to load the first map into the div with the id of ‘my_map’.

Methods

MakerMap Method	Internal Flash API Method	Return value
resizeTo	setSize(600, 500);
addControls	showControl(“Zoom”, true); showControl(“Zoom”, false); showControl(“Layers”, true); showControl(“Layers”, false); showControl(“Styles”, true); showControl(“Styles”, false); showControl(“Basemap”, true); showControl(“Basemap”, false); showControl(“Legend”, true, “open”); showControl(“Legend”, true, “close”); showControl(“Legend”, false);
addSmallControls
addLargeControls
addMapTypeControls	showControl(“BaseMap”, true);
dragging	setDraggable(true); setDraggable(false);
getCenter	getCenterZoom();	[Object lon=-77.08585 lat=38.891142999999985, 15]
setCenter	setCenter(38.891143, -77.08585);
setCenterAndZoom	setCenterZoom(38.891143, -77.08585, 15);
setZoom	setZoom(10);
getZoom	getZoom();	10
setMapType	setMapProvider(“Yahoo Aerial”);
x	getMapProviderList();	Array [“Google Aerial”, “Google Hybrid”, “Google Road”, “Google Terrain”, “Historic Map”, “Microsoft Aerial”, “Microsoft Hybrid”, “Microsoft Road”, “NASA Blue Marble”, “OpenStreetMap (Road)”, “Yahoo Aerial”, “Yahoo Hybrid”, “Yahoo Road”]
getMapType	getMapProvider();	[Object displayName=OpenStreetMap (Road) tileSchema=http://tile.openstreetmap.org/{Z}/{X}/{Y}.png tileHeight=256 tileWidth=256]
getBounds	getExtent();	[Object northWest=[Object lat=39.52367858860299 lon=-77.90582198404641] southEast=[Object lat=39.37627930774779 lon=-77.49417801595357] east=-77.49417801595357 west=-77.90582198404641 north=39.52367858860299 south=39.37627930774779]
setBounds	setExtent(north, south, east, west); setExtent(40, 35, -75, -80);
addOverlay	showLayer(finderID, true); showLayer(finderID, false);
toggleTileLayer	showLayer(finderID, true); showLayer(finderID, false);