Learn the fundamentals of the TerraFly® Maps JS-Flash API and get started creating your own maps. This guide contains these sections:
TerraFly® Maps JavaScript (JS)-Flash API provides the ability to embed TerraFly® Maps to websites. It allows you to use several powerful properties of TerraFly® Maps such as the displaying of maps, markers, managing the control panel, moving, zooming, and much more. In this JS-Flash version, the embedded maps are generated by TerraFly® servers and placed into a generic Flash SWF (ShockWave® Format) container that developers can manipulate using the JavaScript programming language.
A great highlight of TerraFly® Maps JS-Flash API is the geocoding and AJAX features, which are not provided by many online Map API vendors.
The TerraFly® Maps JS-Flash API is compatible with recent browsers such as Firefox, Internet Explorer, Opera, Safari, Chrome and their successive versions. Below are various demonstrations of the TerraFly® Maps JS-Flash API in action.
TerraFly® Maps API allows you to create TerraFly® Maps easliy for displaying on a website. Below is an example on how to create a TerraFly® Map using Javascript and Flash. TMap is a class that represents a a single map on the page. You can create different instances of that class, each representing a map. TMap constructor needs 9 parameters (more details please see Class Reference).
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;" />
<title>Lesson 1 - Hello TerraMap, the Simplest Map</title>
<script type="text/javascript" src="http://tfcore.cs.fiu.edu/api/8.5.0/default.aspx"></script>
</head>
<body>
<h1>Lesson 1 - Hello World</h1>
<div id="mapContainer0" style="width: 640px; height: 400px;"></div>
<script language="javascript" type="text/javascript">
var map0 = new TMap(mapContainer0, 25.75869, -80.37388, 15, "", 1, true, "", "hybrid");
</script>
</body>
</html>
The URL in the example above is the location of a JavaScript file that includes all of the symbols you need for placing TerraFly® Maps on a page. The page must contain a script tag pointing to that URL.
The map has to be placed in a DIV container, which is the first parameter of TMap constructor. Here, it's called mapContainer0. By default, the map will expand to fit the size of the div container. You should provide height and width to the mapContainer, to obtain the map of the corresponding size. In the following example, we create a DIV container mapContatiner0 and set its size as- width: 640px; height: 400px. As long as mapContainer0 was used as the first parameter of TMap constructor, the map will be of the size- width: 640px; height: 400px.
TerraFly® Maps API allows you to embed several maps in a single page. Each map represents one TMap instance and has its individual mapContainer.
In the following example, four maps are shown on a single page. These four maps are created by initiating four TMap instances, namely map0, map1, map2 and map3. By assigning different values to the left and top parameters of DIV container, maps are displayed on different positions of a page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lesson 2 - Multiple TerraMap in one page</title>
<!-- Load TerraFly API 8.5 -->
<script type="text/javascript" src="http://tfcore.cs.fiu.edu/api/8.5.0/default.aspx"></script>
</head>
<body>
<h1>
Lesson 2 - Multiple TerraMap in one page</h1>
<div id="mapContainer0"
style="width: 400px; height: 400px;position: absolute;top: 70px;left: 10px;"></div>
<div id="mapContainer1"
style="width: 400px; height: 200px;position: absolute;top: 70px;left: 410px;"></div>
<div id="mapContainer2"
style="width: 200px; height: 200px;position: absolute;top: 270px;left: 410px;"></div>
<div id="mapContainer3"
style="width: 200px; height: 200px;position: absolute;top: 270px;left: 610px;"></div>
<script type="text/javascript">
var map0 = new TMap(mapContainer0, 25.7590256665386, -80.3738769902151, 20, "", 1, true, "", "hybrid");
var map1 = new TMap(mapContainer1, 25.7590256665386, -80.3738769902151, 15, "", 1, true, "", "hybrid");
var map2 = new TMap(mapContainer2, 25.7590256665386, -80.3738769902151, 10, "", 1, true, "", "hybrid");
var map3 = new TMap(mapContainer3, 25.7590256665386, -80.3738769902151, 5, "", 1, true, "", "hybrid");
</script>
</body>
</html>
TerraFly® Maps API allows you use a CallBack function while loading a map. This function specifies what needs to be done after the map is loaded successfully.
In the present example we pass the function MainCallback as the fifth parameter to the TMap constructor. An alert box showing the text "TerraMap has Loaded." will be displayed after the terrafly map is initialized successfully.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lesson 3 - On_map_loaded Callback function</title>
<script type="text/javascript" src="http://tfcore.cs.fiu.edu/api/8.5.0/default.aspx"></script>
</head>
<body>
<h1>
Lesson 3 - On_map_loaded Callback function</h1>
<div id="mapContainer0" style="width: 640px; height: 400px;"></div>
<script type="text/javascript">
var map0 = new TMap(mapContainer0, 25.7590256665386, -80.3738769902151, 15, MainCallback, 1, true, "", "hybrid");
function MainCallback(){
alert("TerraMap has Loaded.");
}
</script>
</body>
</html>
TerraFly® Maps API allows you to manage the visibility of the control, mini map , and overview panels after the map is initialized. The control panel includes navigation panel which moves the map, the zoom panel which changes the resolution of the map, and the overview panel which provides a mini map of the area you are viewing. The control panel and the mini map panel will fade gradually as the mouse pointer moves off of it. (For details please see the class reference).
The example given here shows that the panels can be displayed or hidden by clicking on the corresponding button. This is done by assigning true or false values to the global parameter panelsVisible, which will be used in the function corresponding to each button. If the value of panelsVisible is true, then that button function will use this value to display the control panel or mini map panel. While the value of panelsVisible is false, then the control panel or mini map panel will be hidden.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lesson 4 - Show / hide control panels</title>
<script type="text/javascript" src="http://tfcore.cs.fiu.edu/api/8.5.0/default.aspx"></script>
</head>
<body>
<h1>Lesson 4 - Show / hide control panels</h1>
<p>Notice : The control panels will fade-out automatically when your mouse arrow moves out of them.</p>
<div id="mapContainer0" style="width: 640px; height: 400px;"></div>
<script type="text/javascript">
// Create a map with navigation panel and zoom panel shown.
var map0 = new TMap(mapContainer0, 25.7590256665386, -80.3738769902151, 18, ShowAllPanels, 1, true, "", "hybrid");
// Show/hide the panels by button clicks.
var flyVisible=true;
var zoomVisible=true;
var overviewVisible=true;
function ShowAllPanels(){
map0.SetPanelVisibility("FLY", "SHOW");
map0.SetPanelVisibility("ZOOM", "SHOW");
map0.SetPanelVisibility("OVERVIEW", "SHOW");
}
function Button1_onclick() {
flyVisible=!flyVisible;
Button1.value=(flyVisible==true)?"Hide Fly/Pan Panel":"Show Fly/Pan Panel";
if(flyVisible)
map0.SetPanelVisibility("FLY", "SHOW");
else
map0.SetPanelVisibility("FLY", "HIDDEN");
}
function Button2_onclick() {
zoomVisible=!zoomVisible;
Button2.value=(zoomVisible==true)?"Hide Zoom Panel":"Show Zoom Panel";
if(zoomVisible)
map0.SetPanelVisibility("ZOOM", "SHOW");
else
map0.SetPanelVisibility("ZOOM", "HIDDEN");
}
function Button3_onclick() {
overviewVisible=!overviewVisible;
Button3.value=(overviewVisible==true)?"Hide Overview Panel":"Show Overview Panel";
if(overviewVisible)
map0.SetPanelVisibility("OVERVIEW", "SHOW");
else
map0.SetPanelVisibility("OVERVIEW", "HIDDEN");
}
</script>
<input id="Button1" type="button" value="Hide Fly/Pan Panel" onclick="return Button1_onclick()" />
<input id="Button2" type="button" value="Hide Zoom Panel" onclick="return Button2_onclick()" />
<input id="Button3" type="button" value="Hide Overview Panel" onclick="return Button3_onclick()" />
</body>
</html>
TerraFly® Maps API allows you to adjust the control panel's position on the map. This is done by inputting X and Y values in the text area at the bottom of the map and passing these values, along with the name of the panel, as parameters to the SetPanelPosition() function.
The following example shows how to adjust the control panel's position on the map. The values of X and Y should be entered in screen pixels coordinate system, with the value of the left top corner being (0,0). The values of X and Y, as well as the panel's name, for the navigation panel will be passed as parameters to the SetPanelPosition() function, while the values of X and Y, as well as the panel's name, for the zoom panel will be passed as parameters to the SetPanelPostion() function. The values of X and Y, as well as the panel's name, for the overview panel will be passed as parameters to the SetPanelPostion() function. This function will set the position of the corresponding control panel on the map.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lesson 5 - Set panels' position</title>
<script type="text/javascript" src="http://tfcore.cs.fiu.edu/api/8.5.0/default.aspx"></script>
</head>
<body>
<h1>Lesson 5 - Set panels' initial positions</h1>
<p>Notice : The control panels fade-out automatically when your mouse arrow moves out of them.</p>
<div id="mapContainer0" style="width: 640px; height: 400px;"></div>
<script type="text/javascript">
// Create a map with navigation panel, zoom panel , and overview panel shown.
var map0 = new TMap(mapContainer0, 25.7590256665386, -80.3738769902151, 18, mapLoaded, 1, true, "", "hybrid");
function mapLoaded()
{
ShowPanels();
}
function ShowPanels(){
map0.SetPanelVisibility("FLY", "SHOW");
map0.SetPanelVisibility("ZOOM", "SHOW");
map0.SetPanelVisibility("OVERVIEW", "SHOW");
}
// Show/hide the panels by button clicks.
function Button1_onclick() {
map0.SetPanelPosition("ZOOM", zoomX.value ,zoomY.value);
map0.SetPanelPosition("NAV", navX.value, navY.value);
map0.SetPanelPosition("OVERVIEW", overX.value, overY.value);
//old style
//map0.SetNavigationPanelPosition(navX.value,navY.value);
//map0.SetZoomPanelPosition(zoomX.value ,zoomY.value);
}
</script>
Navigation Panel:<br />
x:<input id="navX" type="text" value="100" />y:<input id="navY" type="text" value="100"/><br />
Zoom Panel:<br />
x:<input id="zoomX" type="text" value="100"/>y:<input id="zoomY" type="text" value="10"/><br />
Overview Panel:
x:<input id="overX" type="text" value="100"/>y:<input id="overY" type="text" value="50"/><br />
<input id="Button1" type="button" value="Set Positions" onclick="return Button1_onclick()" /><br />
</body>
</html>
Displaying information windows on the TerraFly® Map is simple. TerraFly® Maps API supports two forms of information windows, one is a single information window without the tabs and the other is a information window with tabs. This is achieved by using the ShowInfoWindow() or ShowInfoWindowTabs() functions for displaying information windows with or without the tabs respecticely. (for more details of this function, please see Class Reference).
In the following example, a simple info window is shown when the process of loading the map is complete. The info window with tabs is displayed when a user clicks at any point on the map. This info window shows the latitude and longitude of the point where the user clicked. This functionality is achieved by calling ShowInfoWindow() in mapLoaded() function and ShowInfoWindowTabs() in the MapClicked() function. The simple info window (without the tabs) is set to point at the center of the map.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lesson 6 - Show a info window on the map</title>
<script type="text/javascript" src="http://tfcore.cs.fiu.edu/api/8.5.0/default.aspx"></script>
</head> <body>
<h1>Lesson 6 - Show a info window on the map</h1>
<div id="mapContainer0" style="width: 550px; height: 430px;"></div>
<script type="text/javascript">
map0 = new TMap(mapContainer0, 25.7590256665386, -80.3738769902151, 17, mapLoaded, 1, true, "", "hybrid");
var event0 = null;
function mapLoaded(){
//Set map on-click listener
//This listener gets the latitude/longtitude of point where you clicked.
map0.ShowInfoWindow(25.7590256665386, -80.3738769902151, "border=normal;width=200;height=100", "Info Window without Tabs", "This is a Simple info window without tabs"); event0 = map0.AddOnClickListener( MapClicked ); }
function MapClicked( latitude, longitute ){
var tabObj0 = new TTabObject("Latitude",latitude);
var tabObj1 = new TTabObject("Longitude",longitute);
var tabArr = new Array ();
tabArr[1] = tabObj0;
tabArr[0] = tabObj1;
map0.ShowInfoWindowTabs(latitude, longitute, "border=normal;width=200;height=100", "Info Window with Tabs", tabArr);
}
</script>
</body>
</html>
You can register event listener on a map by calling the related event-listener setting interface, SetOnXxxListener() where Xxx is the event name in general (e.g: use SetOnClickListener() for OnClick event listening and SetOnMoveEndListener() for OnMoveEnd event listening etc).
In the following example, the geographical information of the clicked point will be shown in an information window when the map click event is triggered. Dragging and dropping the map triggers the map move event which displays both the geographical location information of a drag-drop point and the boundary coordinates information of the map on an information window, categorized in two tabs.
In mapLoaded()(for callback function in TMap constructor, please see Class Reference), we add the two listener functions SetOnclickListener() for OnClick event listening and SetOnMoveEndListener() for OnMoveEnd event listening. Both SetOnClickListener() and SetOnMoveEndListener() should accept event handling function as a single argument.(more details please see Class Reference)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lesson 7 - Set on-map mouse action listeners (with simple and tabbed info window)</title>
<script type="text/javascript" src="http://tfcore.cs.fiu.edu/api/8.5.0/default.aspx"></script>
</head>
<body>
<h1>Lesson 7 - Set on-map mouse action listeners (with simple and tabbed info window)</h1>
<p>To test on_Click Listener : Click on the map ...<br/>
To test on_Move_End Listener : Drag/drop on the map ...</p>
<div id="mapContainer0" style="width: 640px; height: 400px;"></div>
<script type="text/javascript">
var map0 = new TMap(mapContainer0, 25.7590256665386, -80.3738769902151, 15, mapLoaded, 1, true, "", "hybrid");
var onClickEvent = null;
var onMovedEvent = null;
function mapLoaded(){
//Set map on_click listener
//This listener gets the latitude/longtitude of point where you clicked.
onClickEvent = map0.AddOnClickListener( MapClicked );
//Set map on_move_end listener
//This listener gets the latitude/longtitude of current view center.
onMovedEvent = map0.AddOnMoveEndListener( MapMoveEnded );
}
function MapClicked(lat, lng){
map0.ShowInfoWindow(lat, lng,"width=240;height=100", "You clicked on:", "Latitude=\t" + lat + "\nLongitude=\t" + lng);
}
function MapMoveEnded (lat, lng){
var boundary = map0.GetBounds();
var tab0 = new TTabObject("Center", "Latitude=\t" + lat + "\nLongitude=\t" + lng);
var tab1 = new TTabObject("Four Borders", "Top = "+boundary.latitude1+"\nBottom = "+boundary.latitude2
+"\nLeft = "+boundary.longitude1+"\nRight = "+boundary.longitude2);
var tabArray = new Array ();
tabArray[1] = tab0;
tabArray[0] = tab1;
map0.ShowInfoWindowTabs(lat, lng, "width=240;height=120", "Current Coordinates:", tabArray);
}
</script>
</body>
</html>
TerraFly® Maps API allows you to change the size of the terrafly maps embedded in the websites. The map resize functionality is achieved using the SetSize(mapWidth,mapHeight) function provided by the TerraFly® Maps API. (more details please see Class Reference)
In the below example we show how to change the size of the terrafly map using the SetSize (mapwidth, mapHeight) function. Two buttons "Smaller" and "Bigger" are provided clicking on which makes the map smaller or larger respectively. Each click on these buttons will increase/decrease the height of the terrafly map by a factor of 42.72 and width of the terrafly map by 40.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lesson 8 - Set map size</title>
<script type="text/javascript" src="http://tfcore.cs.fiu.edu/api/8.5.0/default.aspx"></script>
</head>
<body>
<h1>Lesson 8 - Set map size</h1>
<input id="Button1" type="button" value="Smaller" onclick="return Button1_onclick()" />
<input id="Button2" type="button" value="Bigger" onclick="return Button2_onclick()" />
<div id="mapContainer" style="width: 640px; height: 400px;"></div>
<script type="text/javascript">
var mapWidth = 640;
var mapHeight = mapWidth / 16 * 10;
var mapCreated = false;
var map0 = new TMap(mapContainer, 25.7590256665386, -80.3738769902151, 15, mapInit, 1, true, "", "hybrid");
function mapInit() {
mapCreated = true;
}
function Button1_onclick() {
mapWidth -= 40;
mapHeight = mapWidth / 16 * 10;
if(mapWidth <= 0){
mapWidth = 0;
}
if(mapCreated){
map0.SetSize(mapWidth,mapHeight);
}
}
function Button2_onclick() {
mapWidth += 40;
mapHeight = mapWidth * 0.618;
if(mapCreated){
map0.SetSize(mapWidth,mapHeight);
}
} </script> </body>
</html>
TerraFly® Maps API allows you to change the resolution of the terrafly maps embedded in the websites. The zoom in/out functionality is achieved using the ZoomTo(level) function provided by the TerraFly® Maps API. (more details please see Class Reference).
In the below example we show how to change the resolution of the terrafly map using the ZoomTo(level) function. Two buttons "Zoom In" and "Zoom Out" are provided clicking on which makes the zooms in or zooms out the terrafly map respectively. Each click on the "Zoom In" or "Zoom Out" button changes the resolution by a factor of one.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lesson 9 - Zoom in/out the map without a panel</title>
<script type="text/javascript" src="http://tfcore.cs.fiu.edu/api/8.5.0/default.aspx"></script>
</head>
<body>
<h1>Lesson 9 - Zoom in/out the map with scripts</h1>
<input id="Button1" type="button" value="Zoom In" onclick="return Button1_onclick()" />
<input id="Button2" type="button" value="Zoom Out" onclick="return Button2_onclick()" />
<div id="mapContainer" style="width: 640px; height: 400px;"></div>
<script type="text/javascript">
var map0 = new TMap(mapContainer, 25.7590256665386, -80.3738769902151, 15, "", 1, true, "", "hybrid");
function Button1_onclick() {
var level = map0.GetLevel();
level++;
map0.ZoomTo(level);
}
function Button2_onclick() {
var level = map0.GetLevel();
level--;
map0.ZoomTo(level);
}
</script> </body>
</html>
TerraFly® Maps API allows you to change the location displayed by the terrafly maps. This functionality is achieved using the PanTo(latitude,longitude) function provided by the TerraFly® Maps API. (more details please see Class Reference).
In the below example we show how to change the location displayed by the TerraFly® Map using the PanTo(latitude,longitude) function. Four buttons "Go North", "Go South", "Go East", "Go West" are provided clicking on which moves the terrafly map in the North, South, East or West directions respectively. Each click on a direction button will move the map towards the corresponding direction by a preset factor using the PanTo(latitude,longitude)(The factor is generated by function offset()).PanTo() takes the Longitude and Latitude as parameters. This movement can also be achieved using the control panels or by dragging/ dropping the map.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lesson 10 - Pan the map with scripts</title>
<script type="text/javascript" src="http://tfcore.cs.fiu.edu/api/8.5.0/default.aspx"></script>
</head>
<body>
<h1>Lesson 10 - Pan the map with scripts</h1>
<input id="Button1" type="button" value="Go North" onclick="return Button1_onclick()" />
<input id="Button2" type="button" value="Go South" onclick="return Button2_onclick()" />
<input id="Button3" type="button" value="Go East" onclick="return Button3_onclick()" />
<input id="Button4" type="button" value="Go West" onclick="return Button4_onclick()" />
<div id="mapContainer" style="width: 640px; height: 400px;"></div>
<script type="text/javascript">
var map0 = new TMap(mapContainer, 25.7590256665386, -80.3738769902151, 15, "", 1, true, "", "hybrid");
var latitude = 25.7590256665386;
var longitude = -80.3738769902151;
function getOffset(){
var level = map0.GetLevel();
var offset = 0.0005 * Math.pow(2,(17-level));
return offset;
}
function Button1_onclick() {
var boundary = map0.GetBounds();
latitude = (boundary.latitude1+boundary.latitude2)/2 + getOffset();
longitude = (boundary.longitude1+boundary.longitude2)/2;
map0.PanTo(latitude,longitude);
}
function Button2_onclick() {
var boundary = map0.GetBounds();
latitude = (boundary.latitude1+boundary.latitude2)/2 - getOffset();
longitude = (boundary.longitude1+boundary.longitude2)/2;
map0.PanTo(latitude,longitude);
}
function Button3_onclick() {
var boundary = map0.GetBounds();
latitude = (boundary.latitude1+boundary.latitude2)/2;
longitude = (boundary.longitude1+boundary.longitude2)/2 + getOffset();
map0.PanTo(latitude,longitude);
}
function Button4_onclick() {
var boundary = map0.GetBounds();
latitude = (boundary.latitude1+boundary.latitude2)/2;
longitude = (boundary.longitude1+boundary.longitude2)/2 - getOffset();
map0.PanTo(latitude,longitude);
}
</script>
</body>
</html>
TerraFly® Maps API allows you to add different layers to a map and place markers on these layers. AddLayer() and AddMarker(latitude,longitude,label) are the two functions which are used to add layers on to the map and place markers on these layer. (more details please see Class Reference).
In the below example we show how to add a layer to the map and place markers on this layer. The layers are containers of Markers. AddLayer() adds the layer0 to the map and AddMarker(latitude,longitude,label) places the markers on the layer0. The function AddMarker(latitude,longitude,label) accepts latitude, longitude and label as the input and places the marker at a location specified by the latitude and longitude with the specified label. SetOnClickListener() sets a OnClick event listener for the marker.A click on the marker will pop-up an information window, using the ShowInfoWindow() and ShowInfoWindowTabs() functions,(for more details please refer to Lesson 6 - Showing the information window on a map), at the point the marker points to.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lesson 11 - Add layers and markers to the map</title>
<script type="text/javascript" src="http://tfcore.cs.fiu.edu/api/8.5.0/default.aspx"></script>
</head>
<body>
<h1>Lesson 11 - Add layers and markers to the map</h1>
<div id="mapContainer" style="width: 640px; height: 400px;"></div>
<script type="text/javascript">
var map0 = new TMap(mapContainer, 25.7590256665386, -80.3738769902151, 15, mapLoaded, 1, true, "", "hybrid");
function mapLoaded(){
//Layers are containers of Markers, but not visible.
//You could add a group of Markers into one Layer
// and adjust the attributes of the Markers by group.
var layer0 = map0.AddLayer("Markers", "Markers", true, false);
var marker0=layer0.AddMarker( 25.7590256665386, -80.3738769902151, "Click me ...");
var marker1=layer0.AddMarker( 25.7590256665386, -80.37, "Show tabs");
//Set marker on click listener
marker0.SetOnClickListener(onClick_marker0);
marker1.SetOnClickListener(onClick_marker1);
function onClick_marker0(){
marker0.ShowInfoWindow("width=240;height=100", "Simple info window", "So simple, :)");
}
function onClick_marker1(){
var tab0 = new TTabObject("Hello", "This is tab0");
var tab1 = new TTabObject("Hello, again", "This is tab1");
var tabArray = new Array();
tabArray[0] = tab0;
tabArray[1] = tab1;
marker1.ShowInfoWindowTabs("width=240;height=100", "Simple info window", tabArray);
}
}
</script>
</body>
</html>
TerraFly® Maps API allows you to add interaction effects for layers and markers on a map. You can hide, show, remove one or remove all of the markers and layers on the map.
In the following example, several features of the
markers supported by TerraFly® Maps API are shown. Markers displaying the
text "Hide Layer0", "Hide Me", "Remove Layer0", "Remove Me" and "Show all"
are created to hide, remove or show the respective markers and layers containing
these
markers. These markers are created using the AddMarker(latitude,longitude,label)
function and the function SetVisible() manages the visibility (to Hide/Show) of the markers and
layers containing these markers upon a mouse-click.RemoveLayer, RemoveMarker() would remove the selected
layers and markers from the map respectively. Click event listeners are set for
all these markers
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lesson 12 - Show/Hide/Remove Layers and Markers</title>
<script type="text/javascript" src="http://tfcore.cs.fiu.edu/api/8.5.0/default.aspx"></script>
</head>
<body>
<h1>Lesson 12 - Show/Hide/Remove Layers and Markers</h1>
<div id="mapContainer" style="width: 640px; height: 400px;"></div>
<script type="text/javascript">
var map0 = new TMap(mapContainer, 25.7590256665386, -80.3738769902151, 18, mapLoaded, 1, true, "", "hybrid");
var layer0,layer1;
var marker0,marker1,marker2,marker3,marker4;
function mapLoaded(){
layer0 = map0.AddLayer("Markers", "Markers", true, false);
layer1 = map0.AddLayer("Markers", "Markers", true, false);
marker0 = layer0.AddMarker( 25.7593, -80.3735, "Hide Layer0");
marker1 = layer0.AddMarker( 25.7593, -80.3745, "Hide me");
marker2 = layer0.AddMarker( 25.7587, -80.3735, "Remove Layer0");
marker3 = layer0.AddMarker( 25.7587, -80.3745, "Remove me");
marker4 = layer1.AddMarker( 25.7590, -80.3740, "Show all");
//Click to hide layer0
marker0.SetOnClickListener(
function(){
layer0.SetVisible(false);
}
);
//Click to hide marker1
marker1.SetOnClickListener(
function(){
marker1.SetVisible(false);
}
);
//Click to remove layer0
marker2.SetOnClickListener(
function(){
map0.RemoveLayer(layer0);
}
);
//Click to remove marker3
marker3.SetOnClickListener(
function(){
layer0.RemoveMarker(marker3);
}
);
//Click to show all
marker4.SetOnClickListener(
function(){
layer0.SetVisible(true);
marker1.SetVisible(true);
}
);
}
</script>
</body>
</html>
TerraFly® Maps API allows you to customize the markers displayed on the map. You can change the label of the marker, size of the marker, font, font color and content of the marker using the functions provided by the TerraFly® Maps API .
This example demonstrates how to change the label, size, font and color of the marker. Markers displaying the text "Change my label and color", "Change my font", "Change layer0" and "Reset" are added to the layer0 of the map using the AddMarker(latitude,longitude,label) function. These markers are set as click listeners and when clicked change the label and color of the marker, change the font, change the layer and reset all the markers to the initial state respectively. The label of the marker can be changed by SetLabel(). SetLabel() takes the new label as the parameter. The Marker size, Marker color, font, and font colorcan be modified using the SetMarkerStyle() which takes the new style as the parameter. The content of the label can be changed using the SetContent() function.(for more details please see Class Reference).
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lesson 13 - Set/Change markers' properties</title>
<script type="text/javascript" src="http://tfcore.cs.fiu.edu/api/8.5.0/default.aspx"></script>
</head>
<body>
<h1>Lesson 13 - Set/Change markers' properties</h1>
<div id="mapContainer" style="width: 650px; height: 430px;"></div>
<script type="text/javascript">
var map0 = new TMap(mapContainer, 25.7590256665386, -80.3738769902151, 18, mapLoaded, 1, true, "", "hybrid");
var layer0;
var marker0,marker1,marker2,marker3;
function mapLoaded(){
layer0 = map0.AddLayer("Markers", "Markers", true, false);
layer1 = map0.AddLayer("Markers", "Markers", true, false);
marker0 = layer0.AddMarker( 25.7593,-80.3735, "Change my label and color");
marker1 = layer0.AddMarker( 25.7593,-80.3745, "Change my font");
marker2 = layer0.AddMarker( 25.7590,-80.3740, "Change layer0");
marker3 = layer1.AddMarker( 25.7585,-80.3740, "Reset");
//Click change the style of marker0
marker0.SetOnClickListener(
function(){
marker0.SetLabel("New Label");
marker0.SetMarkerStyle("MARKER_SIZE=30;MARKER_COLOR=0x00CCFF");
}
);
//Click to change the style of marker1
marker1.SetOnClickListener(
function(){
marker1.SetMarkerStyle("MARKER_COLOR=0xFFFFFF;FONT=Times New Roman");
marker1.ShowInfoWindow("", "Marker", "I'm changed.");
}
);
//Click change layer0
marker2.SetOnClickListener(
function(){
layer0.SetAllMarkersStyle("MARKER_SIZE=24;MARKER_COLOR=0xCCCCCC;FONT_COLOR=0x000000;FONT=Courier");
}
);
// Reset
marker3.SetOnClickListener(
function(){
layer0.SetAllMarkersStyle("MARKER_SIZE=16;MARKER_COLOR=0xFFCC00;FONT_COLOR=0x000000;FONT=Arial");
}
);
}
</script>
</body>
</html>
The markers shown on the TerraFly® Map can be customized by replacing them with the desired image. This functionality is achieved through the use of the AddImgMarker(latitude, longitude, _url, styleStr) function provided by the TerraFly® Maps API.
The following example shows how to add an image marker replacing the
TerraFly® API default marker. The image marker can be added by using the
AddImgMarker(latitude, longitude, _url, styleStr)
function instead of AddMarker(latitude, longitude, label) function.
AddImgMarker() takes the following parameters as input,
1. Latitude of the location of the place.
2. Longitude of the location of the place.
3. URL or path of the image you want to set as Marker.
4. A string to represent the style of the marker. It includes:
a. The offset parameter on the X plane.
b. The offset parameter on the Y plane.
c. The border color for the image.
d. The border width for the image.
Click event is set for the image marker which displays a simple information window with the text "Hello,This is an Image Marker." Note that you cannot set a label for an image marker.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lesson 14 - Add Image Markers to the map</title>
<script type="text/javascript" src="http://tfcore.cs.fiu.edu/api/8.5.0/default.aspx"></script>
</head>
<body>
<h1>Lesson 14 - Add Image markers to the map</h1>
<div id="mapContainer" style="width: 650px; height: 430px;"></div>
<script type="text/javascript">
var map0 = new TMap(mapContainer, 25.7590256665386, -80.3738769902151, 15, mapLoaded, 1, true, "", "hybrid");
function mapLoaded(){
var layer0 = map0.AddLayer("Markers", "Markers", true, false);
var marker0=layer0.AddMarker(25.759025666538, -80.3708769902151, "Text Marker");
var marker1=layer0.AddImgMarker(25.759025666538,-80.3738769902151, "http://maps.cs.fiu.edu/API_doc_stage/Terrafly_API_Prod/images/star.gif", "X_OFFSET=8;Y_OFFSET=8;BORDER_COLOR=0xFFFFFF;BORDER_WIDTH=2"); //Set marker on click listener
marker0.SetOnClickListener(onClick_marker0);
marker1.SetOnClickListener(onClick_marker1);
function onClick_marker0(){
marker0.ShowInfoWindow("width=240;height=100", "Normal Terrafly Marker", "Hello, This is a <b>Text Marker.</b>");
}
function onClick_marker1(){
marker1.ShowInfoWindow("width=240;height=100", "Image Marker", "Hello, This is an <b>Image Marker.</b>");
}
}
</script> </body>
</html>
TerraFly® Maps API allows you to add customized user interface buttons to serve different purposes such as navigating across the map,panning to a particular location, zooming in/out the map etc. This functionality is provided by the TerraFly® Maps API through the AddCustomizedButton(xPosition,yPosition,URL_of_Icon) function .
In the following example we show how to add customized navigation and zoom
panels instead of the default provided by the TerraFly® API. This is achieved
with the help of the AddCustomizedButton(xPosition,yPosition,URL_of_Icon) function provided by the TerraFly®
API. The function AddCustomizedButton() takes the following three parameters as
input,
1. xPosition: The X coordinate of the point on the map where the customized
button is to be positioned.
2. yPosition: The Y coordinate of the point on the map where the customized
button is to be positioned.
3. URL_of_Icon: The url of the customized button which is to be embedded on the
map.
After the customized buttons are added on the map, behaviors can be set to these buttons with the help of the button on click event listeners. These customized buttons can be used to navigate across the map or zoom in /out the map. The visibility of the default Navigation and Zoom Panels provided by the Terrafly API is set to false, thereby hiding them.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lesson 15 - Customize UI Buttons</title>
<script type="text/javascript" src="http://tfcore.cs.fiu.edu/api/8.5.0/default.aspx"></script>
</head>
<body>
<h1>Lesson 15 - Customize UI Buttons</h1>
<p>This time we'd like to customized the GUI with following icons ...</p>
<p>
<img src="images/Example_15/GoNorth.png" style="width: 32px;height: 32px" />
<img src="images/Example_15/GoSouth.png" style="width: 32px;height: 32px" />
<img src="images/Example_15/GoWest.png" style="width: 32px;height: 32px" />
<img src="images/Example_15/GoEast.png" style="width: 32px;height: 32px" />
<img src="images/Example_15/ZoomIn.png" style="width: 32px;height: 32px" />
<img src="images/Example_15/ZoomOut.png" style="width: 32px;height: 32px" />
</p>
<div id="mapContainer" style="width: 800px; height: 500px;"></div>
<script type="text/javascript">
var map0 = new TMap(mapContainer, 25.7590256665386, -80.3738769902151, 15, mapLoaded, 1, true, "", "hybrid");
function getOffset(){
var level = map0.GetLevel();
var offset = 0.001 * Math.pow(2,(17-level));
return offset;
}
function mapLoaded(){
map0.SetPanelVisibility("FLY", "HIDDEN");
map0.SetPanelVisibility("ZOOM", "HIDDEN");
// 1. Add your buttons to the map by using:
// [mapObject].AddCustomizedButton(xPosition, yPosition, URL_of_Icon);
butGoNorth = map0.AddCustomizedButton(24,8,"images/example_15/goNorth.png");
butGoSouth = map0.AddCustomizedButton(24,72,"images/example_15/goSouth.png");
butGoWest = map0.AddCustomizedButton(8,40,"images/example_15/goWest.png");
butGoEast = map0.AddCustomizedButton(40,40,"images/example_15/goEast.png");
butZoomIn = map0.AddCustomizedButton(8,104,"images/example_15/ZoomIn.png");
butZoomOut = map0.AddCustomizedButton(40,104,"images/example_15/ZoomOut.png");
// 2. Add behaviors to your buttons.
butGoNorth.SetOnClickListener(
function(){
var boundary = map0.GetBounds();
var latitude = (boundary.latitude1+boundary.latitude2)/2 + getOffset();
var longitude = (boundary.longitude1+boundary.longitude2)/2;
map0.PanTo(latitude,longitude);
}
);
butGoSouth.SetOnClickListener(
function(){
var boundary = map0.GetBounds();
var latitude = (boundary.latitude1+boundary.latitude2)/2 - getOffset();
var longitude = (boundary.longitude1+boundary.longitude2)/2;
map0.PanTo(latitude,longitude);
}
);
butGoWest.SetOnClickListener(
function(){
var boundary = map0.GetBounds();
var latitude = (boundary.latitude1+boundary.latitude2)/2;
var longitude = (boundary.longitude1+boundary.longitude2)/2 - getOffset();
map0.PanTo(latitude,longitude);
}
);
butGoEast.SetOnClickListener(
function(){
var boundary = map0.GetBounds();
var latitude = (boundary.latitude1+boundary.latitude2)/2;
var longitude = (boundary.longitude1+boundary.longitude2)/2 + getOffset();
map0.PanTo(latitude,longitude);
}
);
butZoomIn.SetOnClickListener(
function(){
var level = map0.GetLevel();
level++;
map0.ZoomTo(level);
}
);
butZoomOut.SetOnClickListener(
function(){
var level = map0.GetLevel();
level--;
map0.ZoomTo(level);
}
);
}
</script>
</body>
</html>
TerraFly® Maps API allows you to create polygons and a polyline on the map. A polygon is used for defining a region within a closed-end line. You can customize the color and width of the edge line and the opacity and color of the filling areas. As for polyline, it is used for representing paths. You can customize the color and width of the polyline.
Here, we give an example in which we create three polygons with different colors, opacity values, and one polyline on the map.The AddPolygon(strPoints,strStyle) function provided by the TerraFly® Maps API allows you to create the polygons and polylines on the map.The AddPolygon(strPoints,strStyle) takes the following parameters as the input,
1.strPoints: This specifies the list of latitude and longitude values for
drawing the polygon. Each set of latitude and longitude values constitute a
vertex of the polygon. The number of these sets specifies the sides of the
polygon if it is a closed polygon. Each set of latitude and longitude values
should be separated by a ; and note that the last vertex should not end with a
;.
2.strStyle : this is a string that specifies how the polygon/polyline will look like. It may include any of the following: (note: seperate each value you want to include by ; except for the last value)
a.FILL_COLOR: This specifies the fill in color of the polygon.
b.FILL_ALPHA: This specifies the alpha value (0~100) of the polygon.
c.LINE_WIDTH: This specifies the width of the lines of the polygon.
d.LINE_COLOR: This specifies the color of the lines of the polygon.
e.LINE_ALPHA: This specifies the alpha value (0~100) of the lines of the polygon.
f.ENCLOSURE : This is a boolean value which specifies whether it is a polygon or a
polyline. i.e. whether it is a closed polygon or just a line.
(more details
please see Class Reference).
The polygons and polylines are set as click listeners and when clicked display alert boxes showing that they are clicked.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lesson 16 - Polygons and their mouse actions</title>
<script type="text/javascript" src="http://tfcore.cs.fiu.edu/api/8.5.0/default.aspx"></script>
</head>
<body>
<h1>Lesson 16 - Polygons and their mouse actions</h1>
<p>Click on the polygons or lines to test the callback functions.</p>
<div id="mapContainer" style="width: 800px; height: 600px;"></div>
<script type="text/javascript">
var map0 = new TMap(mapContainer, 25.7509383818561, -80.3683491200502, 15, mapLoaded, 1, true, "", "hybrid");
function mapLoaded(){
//Layers are containers of Polygons, but not visible.
//You could add a group of Polygons into one Layer.
//and adjust the attributes of the Markers by group.
var layer0 = map0.AddLayer("Polygon", "Polygon Layer", true, false);
////////////////////////////////////////////////////
// Filled polygon with border
polygon0=layer0.AddPolygon("25.7609634245936,-80.3810464518457;" + //You need to add the vertexes of
"25.7611702422549,-80.3686484471929;" + //the polygon in a string.
"25.7469942429429,-80.3680055121408;" +
"25.7464559403514,-80.3839931698344;" +
"25.7574231613382,-80.3843195004342", //Notice! DO NOT add a ";" for the last vertex.
"FILL_COLOR=0xAACCFF;FILL_ALPHA=50;LINE_COLOR=0xFFFFFF;LINE_WIDTH=2;LINE_ALPHA=100");
//Set polygon on click listener
polygon0.SetOnClickListener(
function(){
alert("polygon0 clicked.");
}
);
////////////////////////////////////////////////////
// Filled polygon without border
polygon1=layer0.AddPolygon("25.7610924216021,-80.3681939752504;" +
"25.7612746422651,-80.3602953543229;" +
"25.7544682554001,-80.3599489283299;" +
"25.7542435337844,-80.3680387710066" ,
"FILL_COLOR=0xFF00FF;FILL_ALPHA=50;LINE_COLOR=NULL"); //Set marker on click listener
polygon1.SetOnClickListener(
function(){
alert("polygon1 clicked.");
}
);
////////////////////////////////////////////////////
// Closed polygon without fill
polygon2=layer0.AddPolygon("25.7603733766681,-80.3574045117136;" +
"25.7604295620502,-80.3529648053516;" +
"25.7589227896106,-80.3528293812824;" +
"25.7587743885618,-80.3535720702808;" +
"25.7581242584964,-80.3535755904768;" +
"25.7580074308498,-80.3565557085603;" +
"25.7590376500905,-80.3567416105982;" +
"25.7591272933233,-80.3574112191289",
"LINE_COLOR=0x00FFFF;LINE_WIDTH=4;LINE_ALPHA=100;ENCLOSURE=TRUE");
//Set marker on click listener
polygon2.SetOnClickListener(
function(){
alert("polygon2 clicked.");
}
);
////////////////////////////////////////////////////
// Enclosed polygon, lines only.
polygon3=layer0.AddPolygon("25.7471576246021,-80.365707418545;" +
"25.7507987832735,-80.3659280700996;" +
"25.7511440609737,-80.3653035966407;" +
"25.7514360406572,-80.3530016342919;" +
"25.7508264863456,-80.3523827523488;" +
"25.7485724871036,-80.35234711503;" +
"25.7484261063136,-80.3535443339429;" +
"25.7475382312027,-80.3536927164353",
"LINE_COLOR=0x00FF00;LINE_WIDTH=5;LINE_ALPHA=100;ENCLOSURE=FALSE");
//Set marker on click listener
polygon3.SetOnClickListener(
function(){
alert("polygon3 clicked.");
}
);
}
</script>
</body>
</html>
TerraFly® Maps API allows you to create a map at a specific street address using the geocoding process.Geocoding is the process of converting addresses into geographic coordinates. You can use these coordinates to place the markers on the map based on street addresses.
Here, we give an example in which we create a map based on a specific street address with the help of Geo-coding services provided by the TerraFly® Maps API. Firstly, the street address is converted in to geographical coordinates (latitude and longitude) using the TGetLatLngByAddress(address, geoCode)function. It takes two parameters as the input, the address and the callback function. The address is a string which specifies the street address of the location to be displayed on the map and the geocode function is written which moves/pans the map to the particular address represented by the geographical coordinates.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lesson17:To create a map at a specific street address using geocoding service</title>
<script type="text/javascript" src="http://tfcore.cs.fiu.edu/api/8.5.0/default.aspx"></script>
</head>
<body>
<h1> Lesson17:To create a map at a specific street address using geocoding service </h1>
Address:
<input id="Text_Street" type="text" value="11200 S.W. 8th Street Miami Fl 33199" />
<input id="Button_Goto" type="button" value=" Go " onclick="return Button_Goto_onclick()" />
<br><br>
<div id="mapContainer0" style="width: 550px; height: 420px; margin-right:100px; float:left"></div>
<script type="text/javascript">
var map0 = new TMap(mapContainer0, 25.760807274063, -80.376427038444, 17 , MapLoaded, 1,true, "", "hybrid");
function MapLoaded() {
map0.SetPanelVisibility("FLY", "SHOW");
map0.SetPanelVisibility("ZOOM", "SHOW");
map0.SetPanelVisibility("OVERVIEW", "SHOW");
}
function Button_Goto_onclick(){
var address = Text_Street.value;
TGetLatLngByAddress(address, geoCode);
} function geoCode(Lat, Lon){
if ( Lat == 0.0 || Lon == 0.0 ){
alert("Could not find the location!");
}
else {
map0.PanTo(Lat, Lon);
}
}
</script>
</body>
</html>
The process of translating a point (like latitude 25.794849 and longitude -80.264198) into a human-readable address (like “4130 NW 21 ST MIAMI FLORIDA 33142") is known as reverse geocoding. The TGetAddressByLatLng(lat,lng, CallBackFunctor) method supports reverse geocoding. If you pass this method a latitude and longitude as parameter of lat and lng, the method will perform a reverse lookup and return a structured object of the closest addressable location in to the CallBackFunctor which user can implement discretionarily. See Class Reference for more details about the TGetAddressByLatLng (lat, lng, CallBackFunctor)and ReverseGeoCode (Address, ErrorMsg) function.
This function shows how to get streets address by geographic coordinates with the help of Reverse Geocoding services provided by the TerraFly® Maps API.
Get Address by Coordinate. The geographical coordinates (latitude and longitude) is converted in to the street address using the TGetAddressByLatLng(lat,lng, CallBackFunctor) function. It takes three parameters as the input, the latitude, longitude and the callback function. Finally, display the returned value of address on the screen.
Note:
1. ReverseGeoCode is an example of CallBackFunctor. The closest addressable location may be some distance from the original latitude and longitude values of the query, if the supplied latitude and longitude is not an exact match for any addressable locations.
2. Reverse geocoding is not an exact science. The reverse geocoder will attempt to find the closest addressable location within a certain tolerance; if no match is found, the reverse geocoder will usually return ErrorMsg = "No streets found".
3. The Reverse Geocoding task is a time and resource intensive task. So, try to reduce the calling numbers and store the results whenever it is possible.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo: Get Address By Coordinate Compact</title>
<script type="text/javascript" src="http://maps.cs.fiu.edu/AddByCoordinate/JScript.js"></script>
<script type="text/javascript" src="http://tfcore.cs.fiu.edu/api/8.5.0/default.aspx"></script>
</head>
<body>
<h1>
Demo:Get Address by Coordinate Compact
</h1>
Latitude:
<input id="Text_Lng" type="text" value=" -80.1225" />
<input id="Button_Goto" type="button" value=" Convert " onclick="return Button_Goto_onclick()" />
Address:
<textarea id="TextArea" name="S1" style="font-size: medium" readonly="readonly"></testarea>
<h1 style="font-size: small">
Examples :</h1>
<script type="text/javascript">
function Button_Goto_onclick(){ var lat = Text_Lat.value;
var lng = Text_Lng.value;
TGetAddressByLatLng(lat,lng, ReverseGeoCode);
}
function ReverseGeoCode(Address, ErrorMsg){
TextArea.value="";
if(ErrorMsg!="")
TextArea.value="";
else
{
TextArea.value += Address + "\n" + "Distance from center of map to the nearest point in the street segment: " + Address.distance + "m\n" + "Address Accuracy Level: " + Address.GGeoAddressAccuracy + "\n" + "Address Accuracy Descriptioin: " + Address.GetAccuracyDescriptioin(Address.GGeoAddressAccuracy)+"\n"; }
} </script> </body>
</html>
TerraFly® Maps API allows you to display animations on the terrafly map. We could fly across the map between the source and destination points using the PanToAni(latitude, longitude, speed, callbackFunction) and ZoomToAni(level, callbackFunction) functions provided by the TerraFly® Maps API.
The following example shows how to combine animations on the TerraFly® Map. This can be achieved through the use of the PanToAni() and ZoomToAni() functions.Clicking on the start button begins the animation from the latitude and longitude values specified in the TMap() constructor. A number of functions are then written to fly across the map from one point to another. These functions use the PanToAni()and ZoomToAni()methods to move/pan from one location to another and to zoom in on a particular location.
The PanToAni(latitude, longitude, speed, callbackFunction) function takes the following four parameters:
1. latitude- latitude of the location to which you want to move/pan.
2. longitude- longitude of the location to which you want to move/pan.
3. speed- The speed at which you want to move/pan.
4. callbackFunction- This function specifies what is to be done after moving/panning to the specified location.
The ZoomToAni(level, callbackFunction) function takes the following parameters:
1. level- This specifies the level to which you want to zoom.
2. callbackFunction- This function specifies what is to be done after zooming at the specified location.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lesson 19 - Combine Animation</title>
<script type="text/javascript" src="http://tfcore.cs.fiu.edu/api/8.5.0/default.aspx"></script>
</head>
<body>
<h1>Lesson 19 - Combine Animation</h1>
<input id="Button1" type="button" value="Start!" onclick="return Button1_onclick()" />
<div id="mapContainer" style="width: 640px; height: 400px;"></div>
<script type="text/javascript">
var map0 = new TMap(mapContainer, 25.7590256665386, -80.3738769902151, 15, "", 1, true, "", "hybrid");
function Button1_onclick()
{
gotoPoint0();
}
function gotoPoint0()
{
map0.PanToAni(25.7609808676688, -80.3851627147711, 100, gotoPoint1);
}
function gotoPoint1()
{
map0.ZoomToAni(17 , gotoPoint2);
}
function gotoPoint2()
{
map0.PanToAni(25.7610837655947, -80.3686967690976, 200, gotoPoint3);
}
function gotoPoint3()
{
map0.ZoomToAni(15, gotoPoint4);
}
function gotoPoint4()
{
map0.PanToAni(25.7590256665386, -80.3738769902151, 200, flyEnd);
}
function flyEnd()
{
alert("Demo Ended.")
}
</script> </body>
</html>
TerraFly® Maps API supports the TDownloadRequest function which provides a convenient way to asynchronously retrieve a resource identified by a URL. The TDownloadRequest function creates a TDowndloadRequest object and retrieves the resource from the given URL; calling the onload function with the w3c http request object as first argument and a callback function as the second.
It provides two methods,Send() and Abort(), both of which have no return value. The Send() method makes a GET request for the URL which is provided to the constructor TDownloadRequest () as the first argument and the Abort() method stops the current request. The following example shows how to use the TDownloadRequest function to retrieve the marker information from the xml source and place it on the map. The function TDownloadRequest( urlToDownload, onAsynLoadedcallbackFunction ), requires the following two parameters as input,parameters (url, OnDataLoaded) are passed to the TDownloadRequest function. The parameter url, is the path where the XML document is located. This path is used to retrieve the marker information. The second parameter which, is a callback function, represents what is to be done with the retrieved information. In the present example, the TDownloadRequest function is called via Button1_onclick(); creating markers on the map from the xml source(markers.xml) . The two parameters (url, OnDataLoaded) are passed to the TDownloadRequest function. The parameter url, is the path where the XML document is located. This path is used to retrieve the marker information. The second parameter which, is a callback function, represents what is to be done with the retrieved information. In the present example the callback function creates the markers on the map. (more details please see Class Reference).
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo using the TDownloadRequest Function</title>
<script type="text/javascript" src="http://tfcore.cs.fiu.edu/api/8.5.0/default.aspx"></script>
</head>
<body>
<style type="text/css">
#Text_Street {
width: 350px;
}
</style>
<h1>Demo using the TDownloadRequest Function </h1>
<p>
<input id="Button1" type="button" value="Use the TDownloadRequest() to create markers from a XML source" onclick="return Button1_onclick()" />
</p>
<div id="mapContainer0" style="width: 550px; height: 420px; margin-right:100px"></div>
<script type="text/javascript">
var map0 = new TMap(mapContainer0,25.7580813324453,-80.373651773578, 17, Load,1,true, "", "hybrid");
var layer0;
var marker = new Array();
var Content = new Array();
var downloadObj = null ;
function Load() {
map0.SetPanelVisibility("FLY", "SHOW");
map0.SetPanelVisibility("ZOOM", "SHOW");
map0.SetPanelVisibility("OVERVIEW", "SHOW");
layer0 = map0.AddLayer("Markers", "Markers", true, false);
}
function OnDataLoaded( http_request, status ) {
if (http_request.status == 200)
{
var xmldoc = http_request.responseXML;
var doc = http_request.responseText;
var markers = xmldoc.documentElement.getElementsByTagName("marker");
if ( markers == null ){
return;
}
for (var i = 0; i < markers.length; i++) {
var latValue=parseFloat(markers[i].getAttribute("lat"));
var lonValue=parseFloat(markers[i].getAttribute("lng"));
var label=String(markers[i].getAttribute("label"));
var description=String(markers[i].getAttribute("description"));
marker[i] = layer0.AddMarker(latValue, lonValue,label);
}
}
else if( http_request.status != 0)
{
alert("server is current busy or the number of results exceeds 3,000 in this area." + "\n Request to server Error code:" + status );
}
downloadObj = null;
}
function Button1_onclick() {
if(downloadObj != null ){
downloadObj.Abort();
downloadObj = null;
}
downloadObj =new TDownloadRequest("http://tf-pub.cs.fiu.edu/api_doc/markers.xml", OnDataLoaded);
downloadObj.Send();
}
</script>
</body>
</html>
The TerraFly® Maps JS-Flash API Realtor enterprise demo uses of the terrafly Maps to show structured information about houses and lets you refine the search results by price, number of bedrooms, area in Sq Ft or Acres. The demo is built around the idea of showing information about the houses all over the United States on the map which makes it easy for any realtor who searches for this information.The primary focus areas of this demo are,
1. The features offered by this demo.
2. How the demo is built using the TerraFly® Maps JS-Flash API?
(1) The features offered by this demo.
The demo allows you to view the property details all over the United States on the map along with the images of some of these assets. It provides us with features like searching and sorting the assets according to lot, price, number of bedrooms, and area in square feet. You can view the assets in the area of your interest just by entering the street address or pin code in the address bar and clicking the GoMap button (Button with the Map of US over it).The GoDB button gives takes you to the GeoQuery page which gives you detailed reports and queries for the address that you have provided. Towards the right of the map will be the list of all the assets that are displayed on the map. Moving the mouse over the assets shown on the list highlights the assets and locates them on the map. Clicking the labels of these assets takes you to the respective GeoQuery pages. Pointing the mouse at a particular asset provides you with the following links on the popup window,
Detail: Clicking on the Detail link takes you to the GeoQuery page showing detailed information about the asset.
Nearby: Clicking on the Nearby link takes you to the GeoQuery page showing detailed information about the asset along with the information of the nearby assets.
Location: Clicking on the Location link takes you to the PointData page showing detailed information about the current location of the asset, lists the objects nearby and links to object detail and queries.
Pro: Clicking on the Pro link takes you to a GeoQuery page, where you need to login to view the MLS Real Estate Professional page.
The asset list table can be sorted based on the four options provided at the top of the list, i.e. Lot, Price, Bed, and Sq Ft. Also, we can refine our search for assets using the following options,
Number of bedrooms
Area in Sq Ft or Acres
Type of the asset (a dropdown list consisting of five values All types, Condo, House, Townhouse, and Mobile) with the default value being All types
The map can be extended to full length, thus minimizing the side data table by clicking on the arrow provided over expand bar, present between the map and the side data table. Clicking on the arrow again shortens the maps, thus maximizing the side data table. A Help button (Question mark symbol) is provided to help users understand how to use the TerraFly® Maps JS-Flash API Realtor. The Help feature can also be used by single clicking on the map at any point, other than on the markers.
These features, which cover a broad range of HTML and JavaScript technologies, are sufficiently complex to illustrate the primary focus areas.
(2) How the demo is built using the TerraFly® Maps JS-Flash API?
The TerraFly® Maps JS-Flash API allows the developers to add maps to their web sites using DHTML and JavaScript®. These Maps can be fully implanted in to the websites and scripted using the JavaScript programming language. TerraFly® Maps JS-Flash API provides the developers with functionalities such as adding the layers and markers to the map, geocoding service (converting addresses into geographic coordinates i.e. latitude and longitude values), etc.
It allows you not only to search address or coordinates but also to customize the search specifically within your neighborhood. This search data is then mashed up with a Terrafly Maps service to provide detailed results that can be customized according to the needs of the user.
The demo provides a text box for entering the address of the area of your interest. Clicking the GoMap button (Button with the Map of US over it) after entering the address refreshes the page, displaying the assets for the new location provided. Towards the right of the map will be the table of links (containing images) of all the assets that correspond to specific points on the map. The user can click on the map points or use the links to select a specific asset. When the user points over these links, a pop-up window displays details about the asset. The details of the popup window include the assets photo, address along with the Detail, Nearby, Location and Pro links. A link for each asset sends the user to that specific asset on the GeoQuery page, showing detailed information about the asset.
The TerraFly® Maps JS-Flash API uses of the TDownloadRequest (), described in Lesson17 of this document, to retrieve and display the dataset on the map as well as the side data table. This function makes use of the AJAX technology to refresh the map as well as the side data table, when either the map is moved or the user searches for new addresses by clicking on the GoMap button. Clicking the GoMap button calls the geocoding service (TGetLatLngByAddress() method), described in Lesson14, to geocode the address provided by the user in the address box and clicking the Search button takes the input values entered by the users in the selection criterion boxes (type of house, lot, price, number of bedrooms, and area in square feet) and constructs the query string accordingly. This query string is sent to the server for retrieving and displaying the dataset on the map and the side data table in proper format.
As mentioned, the results that are displayed in the side data table can be sorted in ascending or descending order of the price, lot, number of bedrooms or area in square feet just by clicking the Blue/Grey arrow embedded in the sort bar present in the side data table. The Blue arrow indicates that the sorting is done in ascending order and the Grey arrow indicates that the sorting is done in the descending order of the selected sort parameter (Lot, Price, Bed or Sq Ft). The sorting is done at the client side via the inbuilt JavaScript sort functionality.
The URLs for the Detail, Nearby, Location and Pro links are constructed dynamically using the latitude, longitude and the property id values retrieved from the dataset. These URLs are further encoded and used to request the data to be displayed (GeoQuery and PointData pages) from the server.
The two functions AddMarker () and AddImgMarker (), described in Lessons 11 and 16 of this document, are used to place the markers on the map. The input parameters (i.e. the latitude and longitude) for these functions are obtained from the dataset retrieved from the server using the TDownloadRequest (), described in Lesson17 of this document. Marker listeners are set using the SetMarkerListener () function. Rolling over the image markers opens a popup window with the enlarged image of the asset and clicking the image marker opens the GeoQuery page which show the high-res photos of all the assets present in the database. Clicking the marker with the price in $ as the label over it highlights the asset in the side data table and opens a popup window which displays the details about the asset. As mentioned above, this popup window includes the assets photo (if available), address and the Detail, Nearby, Location and Pro links.
Event listeners such as MapMoved, MapClicked and MapDoubleClicked have also been set on the map to capture the user click events and functions are written to handle these events. Single clicking on the map at any point, other than on the markers, displays the help information window. Double clicking on the map at any point, other than on the markers, takes you to the GeoQuery page showing detailed information of the area along with the information of the nearby assets. Moving the map to a new location or area of your interest makes use of the TDownloadRequest () to asynchronously refresh the map as well as the side data table and display the assets covered in the new area.