1. TerraFly Project High Performance Database Research CenterHigh Performance Database Research Center NASA Regional Applications CenterNASA Regional Applications Center High Performance Database Research CenterHigh Performance Database Research Center NASA Regional Applications CenterNASA Regional Applications Center Jump to TerraFly Map API ! Steps to migrate from Google Map API to TerraFly Map API

2. Demonstrated on MiamiHerald.com

3. Maintain Legacy Keep almost everything as it is Simple and easy steps to migrate Done in 30 minutes!

4. Step 1 Import TerraFly API symbol Replace With

5. 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;

6. 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

7. 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 global array marker_html is not needed!

8. 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>", " "); } Step 5 Create Map function 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, “ … ", baseIcon); map.addOverlay(marker[0]); marker_html[0] = " … "; … 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

9. … var point = new GLatLng(25.760475, -80.417381); marker[1] = createMarker(point, " … ", baseIcon ); map.addOverlay(marker[1]); marker_html[1] = " … "; var point = new GLatLng(25.760469, -80.417915); marker[2] = createMarker(point, " … ", baseIcon); map.addOverlay(marker[2]); marker_html[2] = " … "; var point = new GLatLng(25.759935, -80.417358); marker[3] = createMarker(point, " … ", baseIcon); map.addOverlay(marker[3]); marker_html[3] = " … "; … layer0 = map0.AddLayer(); marker[0] = createMarker(25.760475, - 80.417381, " … /div>", " "); Step 5 Create Map (cont.) Part 3 Part 3 should be within a loop inPart 3 should be within a loop in “results.php” “results.php” In Server side PHP In Server side PHP

10. Done! Less than 20 lines of code to change Within 30 minutes No learning curve It’s easy! Keep almost everything as it is Keep almost everything as it is Simple and easy steps to migrate Simple and easy steps to migrate Done in 30 minutes ! Done in 30 minutes !

11. 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 …

12. 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 …

13. TerraFly Map API Leverage TerraFly Map API, with minimal changes Get a better solution Enrich your customers’ web experience

14. TerraFly Map API http://map.cs.fiu.edu/Terrafly_API/doc/ –Demo for Hotels http://map.cs.fiu.edu/Terrafly_API/User_Gu ide/example/TerraflyAPI_Hotel_2_0.htm http://map.cs.fiu.edu/Terrafly_API/User_Gu ide/example/TerraflyAPI_Hotel_2_0.htm –Demo for Realtors http://map.cs.fiu.edu/Terrafly_API/User_Gu ide/example/TerraflyAPI_Realtor_2_0.htm http://map.cs.fiu.edu/Terrafly_API/User_Gu ide/example/TerraflyAPI_Realtor_2_0.htm

15. Thank you High Performance Database Research CenterHigh Performance Database Research Center NASA Regional Applications CenterNASA Regional Applications Center High Performance Database Research CenterHigh Performance Database Research Center NASA Regional Applications CenterNASA Regional Applications Center Thank you for choosing TerraFly