Skip to content

JavaScript

Jump to bottom Edit New page
wonderchook edited this page Sep 13, 2010 · 31 revisions

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

How to add a map to a page using the Maker Javascript API

To use the API, Download the Maker JavaScript API.

We also support the Mapstraction API. You can find the Mapstraction GeoCommons wrapper at Mapstraction github project.

First, load embed.js. Within your HTML page <head> and </head> place the following:

<script src="http://maker.geocommons.com/javascripts/embed.js" type="text/javascript"></script>

Second, tell the GeoCommons Maker library where to find the public, or your GeoIQ servers, also within the <head> tags:

<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>

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.

<div id="example_map">
  <div class="loading">
    Loading...
  </div>
</div>

Last, tell Maker to load and replace the map:

Maker.load_map('example_map', maker_map_id, { onLoaded: function(map){my_map = map} } )

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:

my_map.setBounds({ 'north': 38.99, 'south': -38.82, 'east': -76.83, 'west': -77.22 })

An Entire Page with embedded Maker Map

The result of what an entire HTML page may look like:

<html>
<head>
  <title>GeoCommons Maker example</title>
  <script type="text/javascript" charset="utf-8" src="http://maker.geocommons.com/javascripts/embed.js"></script>
  <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';
  var my_map;
  function load_map(maker_map_id) {
    Maker.load_map('example_map', maker_map_id, { onLoaded: function(map){my_map = map} } )    
  }
  </script>
</head>
<body onload="load_map(5104)">
  <div id='example_map'>
    <div class='loading'>
      Loading...
    </div>
  </div>
  <a href="javascript:my_map.setBounds({ 'north': 38.99, 'south': -38.82, 'east': -76.83, 'west': -77.22 });">Zoom to Washington, D.C.</a>
</body>
</html>

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:

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

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);
Add a custom footer
Add a custom sidebar

Clone this wiki locally