|
— |
v.2:bundle:javascript:basics 2010/03/18 02:38 current |
| | + | ====== Controlling maps with JavaScript ====== |
| | | | |
| | + | You can use JavaScript commands to control the map. This allows you to create a way for your viewers to manipulate the map from the web page, as well as to retrieve some information from the map, so you can synchronize another element of the page with the map. |
| | + | |
| | + | For example when you change the selected period on the map, the JavaScript function amSetZoomInfo(map_id, x, y, level) is called. Alternatively you can call setZoom(zoom_level,zoom_x,zoom_y) function on a map object to set zoom information right from your page's JavaScript. You will see that you can do various things, such as reload data or settings, set and get data, or separate settings. In amMap package's examples folder you will find the "javascript_control" folder, which contains examples for all available JS functions. |
| | + | |
| | + | Please Note: Javascript controls will only work once you have uploaded the files to your web server - they will not work if you are viewing the map on your hard drive. |
| | + | |
| | + | JS functions are cued. You may call several JS functions at a time, without waiting for the previous one to finish. All called functions will be executed in turn. |
| | + | |
| | + | ===== Finding when the map is initialized ===== |
| | + | Before you can start controlling the map with JavaScript, the SWF, settings and data files must be fully loaded. When the map is loaded, it calls a JavaScript function: |
| | + | |
| | + | <code>amMapCompleted(map_id)</code> |
| | + | |
| | + | The map_id is useful only if you have more than one map instance on a page and need to know which one is initialized. This map_id variable must be set in the HTML, by adding the following line to the source (somewhere above the so.write(flashcontent) line): |
| | + | |
| | + | <code javascript> |
| | + | so.addVariable("map_id", "map1"); |
| | + | </code> |
| | + | |
| | + | The "map1" is an ID, which can be any number/letter combination, and must be unique for every map instance on the page. When the amMapCompleted function is called, it receives this map_id variable. To reduce confusion, you can use the same ID as your Flash object's. The Flash object ID is set in the following line, the second parameter: |
| | + | <code> |
| | + | var so = new SWFObject("../ammap/ammap.swf", "map1", "1250", "700", "8", "#FFFFFF"); |
| | + | </code> |
| | + | |
| | + | When this function is called, you could get the Flash object into a global variable, so you can use it to call functions when controlling the map. Here is the function to do it: |
| | + | |
| | + | <code javascript> |
| | + | var flashMovie; |
| | + | function amMapComplete(map_id){ |
| | + | flashMovie = document.getElementById(map_id); |
| | + | } |
| | + | </code> |
| | + | |
| | + | Note that if your Flash object ID is not the same as your map_id variable, this won't work, and you will have to use the getElementById function with the real Flash object ID. |
| | + | |
| | + | In order to be sure that you got the Flash object, try to alert the flashMovie variable, by adding alert(flashMovie) into this function. Now, the message with the text [object] should pop up when you refresh your browser. |
| | + | |
| | + | |
| | + | **For advanced users:** |
| | + | If you have more than one map instance on a page, you should get every Flash object into a separate variable. You can create an object and assign instances to its properties: |
| | + | |
| | + | <code javascript> |
| | + | var flashMovie = new Object(); |
| | + | |
| | + | function amMapComplete(map_id){ |
| | + | flashMovie[map_id] = document.getElementById(map_id); |
| | + | } |
| | + | </code> |