|
Welcome guest
Login
|
My Profile
| June 18th 2013
|
|
|
 |
IBIS MapsIntroductionIBIS Maps allows you to include maps of field data directly in your web site. This can be done with only a few lines of HTML and JavaScript code. For a sample click on the link below: You should see a map very similar to those in the NIISS, CitSci, and TamarixMap web sites. These web sites all run on the Global Organism Detection and Monitoring (GODM) System. GODM is a powerful data warehouse holding large numbers of field data entries on species in the United States and across the globe. What is more exciting is that you can add your field data to GODM through any of the web sites mentioned above and then view your data on GODM maps and even add these maps to your own web site. Adding IBIS Maps to Your Web PageIf you have experience with GoogleMaps, you will find adding IBIS Maps fast and easy. If you are new to web mapping just follow the steps below and you'll have a working IBIS map in your web site in no time. 1. Copying the sample code.Copy the code below into a new HTML web page and paste it into a web page on your web site. This can be on a server at your location or any server you have access to. Go ahead and save the page and then access it in a web browser. You should immediately see an IBIS Map but you will receive an error from GoogleMaps indicating you need an authorization key. Don't worry about this as we will get it in the next step
<html>
<head>
<link rel='stylesheet' type='text/css'
href='http://hurricane.nrel.colostate.edu/cwis438/StyleSheets/3.css'>
<!-- include file of global variables -->
<script type="text/javascript" LANGUAGE="JavaScript"
SRC="/cwis438/Browse/TiledMap/IBIS_Config.js"></script>
<!-- override desired global variables -->
<script type="text/javascript" LANGUAGE="JavaScript">
IBIS_Config.SetSceneID(9720); // from an IBIS web site
IBIS_Config.SetPosition(-120,40,8,-1);
</script>
<!-- include the scene consolde (loads layers, etc. based on global variables) -->
<script type="text/javascript" LANGUAGE="JavaScript"
SRC="/cwis438/Browse/TiledMap/IBIS_Console.js"></script>
<!-- define googlemaps key if needed -->
<script type="text/javascript"
src=&http://ibis-live.nrel.colostate.edu/webcontent/IBIS/quot;http://maps.google.com/maps?file=api&v=2&
key=ABQIAAAAQPvB0ts8qmQXUh8cm-AArBSS6e5mNHY3w0spL4apgLPIwRKjlxRWUmWM0uEk28yMSSuby1Q3JIJDuw"
></script>
</head>
<body>
<div id='IBIS_Console' class='Map_Panel'
style='position:absolute;left:10px;top:10px;width:500px;height:500px' ></div>
</body>
</html>
<SCRIPT LANGUAGE="JavaScript">
var TheConsole=new IBIS_Console('IBIS_Console'); // Initialize the scene console
TheConsole.Start();
</SCRIPT>
2. Adding a GoogleMaps authorization key.Visit the GoogleMaps API web site at code.google.com/apis/maps/ and click on 'Maps API Developer's Guide'. Then click on 'Sign up for an API key' and follow the instructions to obtain a GoogleMaps key. Replace the text in the sample: key=ABQIAAAAQPvB0ts8qmQXUh8cm-AArBSS6e5mNHY3w0spL4apgLPIwRKjlxRWUmWM0uEk28yMSSuby1Q3JIJDuw with 'key=Your new key from Google' and refresh the page. You should see a map with a GoogleMaps background. GoogleMaps backgrounds are great but they are not required and can be turned off if desired. 3. About client-side programmingIf you are reading this you are probably familiar with HTML. If not we recommend reviewing an HTML tutorial before proceeding. W3Schools.com offers some excellent tutorials online. If you are familiary with client-side programming in JavaScript you may want to skip to the next section. Client side programming is where you add programming to a web page right inside the HTML page! This allows you to create exicting, dynamic, web sites with popup menus, popup windows, and dynamic maps. This programming is done in JavaScript which is a language that is built into every commonly-used browser on the Internet. IBIS Maps, like GoogleMaps, makes extensive use of JavaScript to present high-quality, high performance maps of field data. The user can interact with and customize these maps through our web sites. After making our map completely JavaScript-based you can now integrate our maps directly into your web site. To add your own data to your maps, and to create a map to present in your web site, you will need to visit one of the IBIS web sites. Then you can view the data in an IBIS web site or your own web site. 4. What it is all aboutThe code above may look a little cryptic if you are new to client-side programming but it is really simple and we will walk through it step by step. The code starts with a standard HTML tag and an HTML header with a 'title' and the definition for a style sheet in the 'link' tag. This style sheet can be used to customize the look of the map and will be discussed a little later. The first'SCRIPT' tag includes the "IBIS_Config.js" file that defines how you want to map to appear. It must appear before you specify the SceneID for the map. Within the next 'SCRIPT' tag you will see a function call to set the SceneID and the Position within the map. IBIS_Config.SetSceneID(9561); This line sets the map to use a predefined scene from one of the IBIS web sites. The ID can be obtained from the web site and we'll describe how just below. IBIS_Config.SetPosition(-120,40,8,-1); This line sets the center of the map in geographic coordinates, sets the zoom level, and sets the coordinate reference system. The center of the map is always set in geographic coordinates also referred to as Longitude and Latitude. Ye, Longitude and Latitude, not Latitude and Longitude, this was done to keep all coordinates in a format of X,Y where X is the east-west coordinate and Y is the north-south coordinate. The Zoom levels are defined from 1 to 15 where 1 will put the entire earth in a map that is 512 x 512 pixels and 15 will have about 4 meters per pixel resolution. The coordinate reference system contains a projection and datum and is defined by an EPSG code. If you are not familiar with these just set the value to -1 which will use a GoogleMaps projection. This is currently the only projection supported by IBIS Maps. Within the 'body' tags you will see a 'div' tag that has an attribute 'id=IBIS_Console'. This is a div, or 'division', tag that you create to position the map in your web site. IBIS will use the position information in this tag to place the map and resize it relative to a browser window. IBIS maps cannot be placed in 'div' tags that do not contain the 'position:absolute' style setting. After the 'body' tag you will see another 'SCRIPT' tag where you will initialize the IBIS Map and customize it to your liking. var TheConsole=new IBIS_Console() The line above creates a new IBIS_Console() object and initializes it. TheConsole.Start() The line above starts the map to begin obtaining image tiles from various servers. 5. Obtaining a SceneIDThe easiest way to obtain a scene id currently is to go to an IBIS web site such as CitSci, our citzen science web site. If you are not a registered user click on 'Register' and proceed through the registration process. Once you are registered, click on 'By Map' in the left menu and zoom to the area you are interested in. You can cutomize your scene with field data for a specific species or a project by clicking on 'Edit' above the legend. When you like your map just click on the save icon above the map. Here you will see the 'SceneID' value for this map. Write down this number and then save the map. We will maintain this map for you until you delete it from your saved list. Now relace the number in the SetSceneID() function call in the sample code and your should see your map appear in the sample. 6. Customizing the MapThere are a variety of function calls defined below for you to customize the map. IBIS maps is new and we are always looking for feedback on the features we should provide. Please feel free to contact us with your needs and ideas. Function CallsThere are a number of function calls that allow you to control IBIS Maps. Most of these calls go to the IBIS_Console object before you create your IBIS_Console object. The IBIS_Console object has some addtional, advanced features. 1. IBIS_Config Function CallsThese calls can be made after the inclusion of the IBIS_Config javascript file and before including the IBIS_Console javascript file. IBIS_Config.SetPosition(EastWestCoordinate,NorthSourthCoordinate,ZoomLevel,EPSGNumber) This function call sets the center of the map based on a geographic coordinate. Notice that the longitude (east-west, or 'X') coordinate is first, followed by the latitude (nroth-south or 'Y') coordinate. The zoom levels are integers from 1 for the entire world in a 512 by 512 pixel map to 15 where each pixel represents about 4 meters on the earth. The EPSGNumber is from the European Petrolum Group's database on coordinate reference systems but for now just use '-1' for GoogleMaps. IBIS_Config.SetScene(SceneID) This function sets the content of the map and legend based on an existing IBIS map scene that was created in one of our web sites. See ' Obtaining a SceneID' above to find out how to obtain a SceneID. By default, the IBIS_Console() contains a map, a legend, a regional map, navigation controls, tools, and some options. You can turn some of these off with the function calls below. IBIS_Config.SetShowNavigation(false); IBIS_Config.SetShowTools(false); IBIS_Config.SetShowLegend(false); IBIS_Config.SetShowOptions(false); IBIS_Config.SetShowRegional(false); IBIS_Config.SetShowInfoPanel(false); IBIS_Config.SetShowScaleBar(false); These functions turn off some of the panels in the IBIS_Map console. Just call the functions you desire with 'false' to turn off a panel. If you turn off all the panels in a column of the console, the map will resize to take up the avaialble space. 2. IBIS_Console Function CallsYou will want to create a new IBIS_Console object first and then make several calls to set the position of the map and further customize it. Then call 'StartItUp()' to actually start the map. var TheConsole=new IBIS_Console(); This function creates the IBIS map object and returns a reference to the object. IBIS_Config.StartItUp(); This function will start the map by accessing the IBIS web servers to obtain maps of the area you specified. It will also start up the GoogleMaps background layers if requested. 2.1 Advanced Function CallsThe following calls are used by advanced developers and IBIS staff. IBIS_Config.SetServiceEnabled(true); This function will turn on HTTP messages back to the source server. This can only be done when the map originated from the same server that it is sending messages to. IBIS_Config.SetServerPath('http://hurricane');
This function sets the server path to a specific computer. This is used when the map is launched from a test machine and the developers want the requests for communication to go to a specified computer. Note: Need to add resize info Note: need to add info to turn off GoogleMaps |
|
|
|
An IBIS website
Updated 5/31/2013
|
|