TerraFly Project

• High Performance Database Research Center High Performance Database Research Center • NASA Regional Applications CenterNASA Regional Applications Center• High Performance Database Research Center High Performance Database Research Center • NASA Regional Applications CenterNASA Regional Applications Center

Jump to TerraFly Map API !Jump to TerraFly Map API !Steps to migrate from Google Map API to TerraFly Map APISteps to migrate from Google Map API to TerraFly Map API

Demonstrated on MiamiHerald.com

Maintain Legacy

• Keep almost everything as it is

• Simple and easy steps to migrate

• Done in 30 minutes!

Step 1

• Import TerraFly API symbolReplace

• <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAAdCG0NsaJLJ7kX05ZbrA9xQdeX1_Sd37VkkQgB3Mh7OoyTacpRRjvTAEpvJ3vKlaXcE7GjGkFp1r5g" type="text/javascript"> </script>

With• <script src="http://map.cs.fiu.edu/terrafly_api/Scripts/TerraFly_API_5_0.js"

type="text/javascript"></script>

Step 2• Add global variables

• Where • map0 represents the TMap object• layer0 represents a layer to which all markers

belong

var map0 = null; var layer0 = null;

Step 3 CreateMarker• Change

• To

function createMarker(point, html, icon) {

var marker = new GMarker(point); GEvent.addListener(marker, "click", function() {

marker.openInfoWindowHtml(html); }); return marker;}

function createMarker(lat, lon, html, label) { var marker = layer0.AddMarker( lat, lon,"", label, html); marker.SetOnClickListener( function(){ marker.ShowInfoWindow(); } ); return marker; }

Marker label supported by TerraFly, not by Google

Step 4 Sidebar

function click_sidebar(idx) {

marker[idx].openInfoWindowHtml(marker_html[idx]);

document.location = "#top"; }

function click_sidebar(idx) {

marker[idx].ShowInfoWindow(); document.location = "#top";

}

• Change

• To

InfowindowContent is attached to the Marker; therefore, the globalarray marker_html is not needed!

function onMapLoaded() { map0.SetNavigationPanelVisibility( true ); map0.SetZoomPanelVisibility( true ); map0.PanTo(25.760475, -80.417381); map0.ZoomTo(map0.GetBoundsZoomLevel( new TLatLng(25.759935, -80.418449), new TLatLng(25.762465, -80.416023))); 

layer0 = map0.AddLayer(); marker[0] = createMarker(25.760475, -80.417381, "<div id=\"popupAddress\"> …/div>", " ");

}

Step 5 Create Mapfunction createMap(lat, lon) { if (GBrowserIsCompatible()) {var map = new GMap2(document.getElementById("map"));map.addControl(new GSmallMapControl());map.addControl(new GMapTypeControl());var point = new GLatLng(lat, lon);var baseIcon = new GIcon();baseIcon.image = "http://www.miamifly.net/dev/proptax/img/marker.png";baseIcon.iconSize = new GSize(30, 30);baseIcon.iconAnchor = new GPoint(10, 17);baseIcon.infoWindowAnchor = new GPoint(9, 2);var centerPoint = new GLatLng(25.760475, -80.417381);map.setCenter(centerPoint, 17, G_HYBRID_MAP);var bds = new GLatLngBounds(new GLatLng(25.759935, -80.418449), new GLatLng(25.762465, -80.416023));map.setZoom(map.getBoundsZoomLevel(bds));

var point = new GLatLng(25.760475, -80.417381);marker[0] = createMarker(point, “<div id=\”popupAddress\“> … </div>", baseIcon);map.addOverlay(marker[0]);marker_html[0] = "<div id=\"popupAddress\">…</div>";…

function createMap(lat, lon) { if (TBrowserIsCompatible()) { map0 = new TMap(mapContainer,25.760475, -80.417381, 17, onMapLoaded); } else { alert ("Mapping capabilities are not available with this browser."); } }

Substituting TerraFly for Google is simple!

Part 3

Part 2

Part 1

…var point = new GLatLng(25.760475, -80.417381);marker[1] = createMarker(point, "<div id=\"popupAddress\"> … </div>", baseIcon);map.addOverlay(marker[1]);marker_html[1] = "<div id=\"popupAddress\">… </div>";var point = new GLatLng(25.760469, -80.417915);marker[2] = createMarker(point, "<div id=\"popupAddress\">…</div>", baseIcon);map.addOverlay(marker[2]);marker_html[2] = "<div id=\"popupAddress\">…</div>";var point = new GLatLng(25.759935, -80.417358);marker[3] = createMarker(point, "<div id=\"popupAddress\">… </div>", baseIcon);map.addOverlay(marker[3]);marker_html[3] = "<div id=\"popupAddress\">…</div>";…

layer0 = map0.AddLayer(); marker[0] = createMarker(25.760475, -80.417381, "<div id=\"popupAddress\"> …/div>", " ");

Step 5 Create Map (cont.)

Part 3Part 3

• Part 3 should be within a loop in Part 3 should be within a loop in

““results.php”results.php”

In Server side PHPIn Server side PHP

Done!

• Less than 20 lines of code to change

• Within 30 minutes

• No learning curve

• It’s easy!

• KeepKeep almostalmost everything as it iseverything as it is

• SimpleSimple and easy steps to migrate and easy steps to migrate

• DoneDone in 30 minutes !in 30 minutes !

Better Solution• Jump to AJAX tech, discard the traditional way

– Continual Web GUI experience, background data transformation. Page refresh not needed

– TerraFly AJAX TDownloadURL() provides a simple wrapper for asynchronous data transformation and page refresh, using our asynchronous Geocoding service

– more …

Advantages (TerraFly vs Google)(1) Imagery resolution down to 3inch/pixel (presently

black&white and in October it will be fresh full color)

(2) No advertisements

(3) Customized Features for you

(4) Easy to migrate

(5) Full support from the TerraFly API Team

(6) Get a better Solution from TerraFly!

more…

TerraFly Map API

• Leverage TerraFly Map API, with minimal changes

• Get a better solution

• Enrich your customers’ web experience

TerraFly Map API

• http://map.cs.fiu.edu/Terrafly_API/doc/

– Demo for Hotels http://map.cs.fiu.edu/Terrafly_API/User_Guide/example/TerraflyAPI_Hotel_2_0.htm

– Demo for Realtorshttp://map.cs.fiu.edu/Terrafly_API/User_Guide/example/TerraflyAPI_Realtor_2_0.htm

Thank you • High Performance Database Research Center High Performance Database Research Center • NASA Regional Applications CenterNASA Regional Applications Center• High Performance Database Research Center High Performance Database Research Center • NASA Regional Applications CenterNASA Regional Applications Center

Thank you Thank you for for

choosing choosing TerraFlyTerraFly