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 Page
If 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
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:
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 programming
4. What it is all about
The 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.
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.
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.
The line above starts the map to begin obtaining image tiles from various servers.
5. Obtaining a SceneID
The 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 Map
There 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.
There 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 Calls
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.
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 Calls
You 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.
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 Calls
The following calls are used by advanced developers and IBIS staff.
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.
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 4/24/2018