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 = "example_map";
  function load_map(maker_map_id) {
    Maker.load_map(my_map, maker_map_id)
  }
  </script>
</head>
<body onload="load_map(5104)">
  <div id='example_map'>
    <div class='loading'>
      Loading...
    </div>
  </div>
  <a href="javascript:example_map.setExtent(38.99, 38.82, -77.02, -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

The embedded map has a JavaScript interface that you can use for controlling the map view, layers, and controls. To access the map object, you currently need to get the correct instance of the SWF (Flash) object. This will be made simpler in the future.

The object is located in an array: F1.Maker.Map.instances where the index into this array is the DOM ID you used in the load_map call. So for example, if you have a map div maker_map_10024 then the call to set the zoom level is:

F1.Maker.Map.instances['maker_map_10024'].swf.setZoom(11)

Alternatively you can use the onLoad response to get the swf object and use directly.


Maker.load_map('example_map', maker_map_id, { onLoaded: function(map){ map.setZoom(11); } } )

The entire list of functions for the JavaScript interface:

Internal Flash API Method Return value
showControl(“Zoom”, true); showControl(“Zoom”, false); showControl(“Layers”, true); showControl(“Layers”, false); showControl(“Legend”, true, “open”); showControl(“Legend”, true, “close”); showControl(“Legend”, false);
addSmallControls
addLargeControls
showControl(“BaseMap”, true);
getCenterZoom(); [Object lon=-77.08585 lat=38.891142999999985, 15]
setCenter(38.891143, -77.08585);
setCenterZoom(38.891143, -77.08585, 15);
setZoom(10);
getZoom(); 10
setMapProvider(“Yahoo Aerial”);
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”]
getMapProvider(); [Object name=OpenStreetMap (Road) templates=http://tile.openstreetmap.org/{Z}/{X}/{Y}.png tileHeight=256 tileWidth=256]
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]
setExtent(40, 35, -75, -80);
Add a custom footer
Add a custom sidebar

Clone this wiki locally