-
Notifications
You must be signed in to change notification settings - Fork 4
JavaScript
GeoCommons provides a JavaScript API to maps for panning, zooming, and setting controls.
To use the API, Download the Maker Javasscript API.
We also support the Mapstraction API. You can find the Mapstraction GeoCommons wrapper at Mapstraction github project.
First, load f1_maker_map.js. Within your HTML page <head> and </head> place the following:
<script src="f1_maker_map.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...
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': 51.9, 'south': -4.3, 'east': 52.25, 'west': -3.75 })The result of what an entire HTML page may look like:
<html>
<head>
<title>GeoCommons Maker example</title>
<script src="http://maker.geocommons.com/javascript/f1_maker_map.js" type="text/javascript"></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>
Loading…
Zoom to Washington, D.C.