senior project at usf - mapping with adobe flex and google maps (dec 2010)
DESCRIPTION
My senior project presentation concept of presenting dynamic historical maps as layers over current google maps using open source technologies like Adobe Flex 3.0, Google Maps Flex API, with a PHP and MySQL back end.TRANSCRIPT
![Page 1: Senior Project at USF - Mapping with Adobe Flex and Google Maps (Dec 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052905/558421ffd8b42a86478b4766/html5/thumbnails/1.jpg)
Hillsborough County Historic Maps
Matthew King
![Page 2: Senior Project at USF - Mapping with Adobe Flex and Google Maps (Dec 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052905/558421ffd8b42a86478b4766/html5/thumbnails/2.jpg)
Hillsborough County Historic Maps
• About the project
– Create historical interactive Google® maps of Hillsborough County
– Provide overlays for year 1852
• Currently only section 29, range 19, maps 1-33
– Place various historical objects on Google® maps
• Field Notes
• Points of Interest
• Images/Photos
![Page 3: Senior Project at USF - Mapping with Adobe Flex and Google Maps (Dec 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052905/558421ffd8b42a86478b4766/html5/thumbnails/3.jpg)
About Hillsborough County Historical Maps
“The Fort King Road Then and Now”
Jeff Hough
“A mile-by-mile survey of the original military trail that extended from Fort Brooke at Tampa Bay to Fort King in what is now Ocala. The authors have used original surveys from the 1840s opposite aerial photographs from the 1940s, showing the original Fort King Road and overlaid with modern roads.” – Seminole Wars Foundation
![Page 4: Senior Project at USF - Mapping with Adobe Flex and Google Maps (Dec 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052905/558421ffd8b42a86478b4766/html5/thumbnails/4.jpg)
Web 2.0 Technology Options
• AJAX – Asynchronous Java Script and XML – HTML/XHTML/CSS – XML/XSLT – JavaScript
• Silverlight – HTML/XHTML/CSS – XML – ASP/.NET
• Flex – HTML/CSS – XML/MXML – Action Script
![Page 5: Senior Project at USF - Mapping with Adobe Flex and Google Maps (Dec 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052905/558421ffd8b42a86478b4766/html5/thumbnails/5.jpg)
Other Technologies
• MySQL™ database (http://mysql.com/)
• Google® Maps API (http://code.google.com/apis/maps/index.html)
• WordPress® Web Log (http://wordpress.org/)
• Apache Web Server (http://httpd.apache.org/)
![Page 6: Senior Project at USF - Mapping with Adobe Flex and Google Maps (Dec 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052905/558421ffd8b42a86478b4766/html5/thumbnails/6.jpg)
Tools
• Ajax – Eclipse
(http://www.eclipse.org/)
– Aptana (http://aptana.com/)
– Net Beans (http://netbeans.org/)
• Flex – Adobe® Flex/Flash Builder (http://www.adobe.com)
• Silverlight – Microsoft ® Expression Web
– Visual Studio® 2008/2010
![Page 7: Senior Project at USF - Mapping with Adobe Flex and Google Maps (Dec 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052905/558421ffd8b42a86478b4766/html5/thumbnails/7.jpg)
Adobe® Web Premium
• Adobe® Flash Professional
• Adobe® Flash Catalyst
• Adobe® Illustrator
• Adobe® Photoshop
• Adobe® Flash Builder
![Page 8: Senior Project at USF - Mapping with Adobe Flex and Google Maps (Dec 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052905/558421ffd8b42a86478b4766/html5/thumbnails/8.jpg)
Why Adobe Web Premium?
• Multi-Browser compatible with Flash plug-in
• Learn newer technology/multi-platform
• Google® API compatible with Flash
![Page 9: Senior Project at USF - Mapping with Adobe Flex and Google Maps (Dec 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052905/558421ffd8b42a86478b4766/html5/thumbnails/9.jpg)
Alternatives
• Adobe® Flex plug-in for Eclipse (http://adobe.com)
• InkScape vs. Adobe® Illustrator (http://inkscape.org/)
• GIMP vs. Adobe® Photoshop (http://www.gimp.org/)
![Page 10: Senior Project at USF - Mapping with Adobe Flex and Google Maps (Dec 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052905/558421ffd8b42a86478b4766/html5/thumbnails/10.jpg)
My Responsibilities
• Research Requirements
– Design requirements
– Database requirements
• Design
– Designed website using Adobe ® Flash Catalyst, Illustrator and Photoshop
– Create database and tables using MySQL
• Import data into MySQL databases
![Page 11: Senior Project at USF - Mapping with Adobe Flex and Google Maps (Dec 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052905/558421ffd8b42a86478b4766/html5/thumbnails/11.jpg)
My Responsibilities (cont.…)
• Development – Code MXML/Action Script for user interface – Code client side Action Script to interact with user – Code Google Maps (KML) to interact with user – Create server side PHP scripts to interact with user
and MySQL database – Create server side PHP scripts to interact with Google
Maps API and MySQL database – Create PHP scripts to pull data from MySQL database
and convert to XML for XMLHttpRequest for WordPress® Blog
![Page 12: Senior Project at USF - Mapping with Adobe Flex and Google Maps (Dec 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052905/558421ffd8b42a86478b4766/html5/thumbnails/12.jpg)
Home Page
![Page 13: Senior Project at USF - Mapping with Adobe Flex and Google Maps (Dec 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052905/558421ffd8b42a86478b4766/html5/thumbnails/13.jpg)
Maps Page
![Page 14: Senior Project at USF - Mapping with Adobe Flex and Google Maps (Dec 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052905/558421ffd8b42a86478b4766/html5/thumbnails/14.jpg)
Maps Database
• MySQL
– Maps Database
![Page 15: Senior Project at USF - Mapping with Adobe Flex and Google Maps (Dec 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052905/558421ffd8b42a86478b4766/html5/thumbnails/15.jpg)
Maps Page Maps
Apache
MySql
PHP
PHP
Maps API
User Selects Year
Req
ues
ts
Fro
m
Places o
n
![Page 16: Senior Project at USF - Mapping with Adobe Flex and Google Maps (Dec 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052905/558421ffd8b42a86478b4766/html5/thumbnails/16.jpg)
Blog Page
![Page 17: Senior Project at USF - Mapping with Adobe Flex and Google Maps (Dec 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052905/558421ffd8b42a86478b4766/html5/thumbnails/17.jpg)
Blog (WordPress) Database
• MySQL
– Blog Database
wp_posts
PK post_author
post_date
post_date_gmt
post_content
post_title
post_excerpt
post_status
comment_status
ping_status
post_password
post_name
to_ping
pinged
post_modified
post_modified_gmt
post_content_filtered
post_parent
guid
menu_order
post_type
post_mime_type
comment_count
ID
wp_users
PK,FK1 ID
PK user_login
user_pass
user_nicename
user_email
user_url
user_registered
user_activation_key
user_status
display_name
post_author
![Page 18: Senior Project at USF - Mapping with Adobe Flex and Google Maps (Dec 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052905/558421ffd8b42a86478b4766/html5/thumbnails/18.jpg)
Maps Page User Selects B
log
Req
ues
ts
Fro
m
Places o
n
![Page 19: Senior Project at USF - Mapping with Adobe Flex and Google Maps (Dec 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052905/558421ffd8b42a86478b4766/html5/thumbnails/19.jpg)
External WordPress® Page
![Page 20: Senior Project at USF - Mapping with Adobe Flex and Google Maps (Dec 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052905/558421ffd8b42a86478b4766/html5/thumbnails/20.jpg)
Book Page
![Page 21: Senior Project at USF - Mapping with Adobe Flex and Google Maps (Dec 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052905/558421ffd8b42a86478b4766/html5/thumbnails/21.jpg)
Purchase Book
• “The Fort King Road Then and Now”
• Jeffrey A. Hough • Jerry C. Morris
![Page 22: Senior Project at USF - Mapping with Adobe Flex and Google Maps (Dec 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052905/558421ffd8b42a86478b4766/html5/thumbnails/22.jpg)
About Us
• Developer
– Matthew King
• GIS Analyst/Author
– Jeff Hough
![Page 23: Senior Project at USF - Mapping with Adobe Flex and Google Maps (Dec 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052905/558421ffd8b42a86478b4766/html5/thumbnails/23.jpg)
Most Challenging Aspects
• Design – My most challenging aspect was design
• I am not a web designer
• Not familiar with photo programs
• Difficult time deciding on a design and sticking to it
• Waste too much time on design
– I addressed these issues by • Use online tutorials
• Code and worry about design later
• Hire a designer – in the real world
![Page 24: Senior Project at USF - Mapping with Adobe Flex and Google Maps (Dec 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052905/558421ffd8b42a86478b4766/html5/thumbnails/24.jpg)
Other challenges
• Learning new technologies
– Action Script
– Adobe Flex/Flash Builder
– Google Maps/KML/GIS
![Page 25: Senior Project at USF - Mapping with Adobe Flex and Google Maps (Dec 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052905/558421ffd8b42a86478b4766/html5/thumbnails/25.jpg)
Flex Positives/Negatives
• Positives
– Platform/Browser independent
– Development/Design easier than AJAX
• Negatives
– Some mobile devices do not support Adobe Flash®
![Page 26: Senior Project at USF - Mapping with Adobe Flex and Google Maps (Dec 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052905/558421ffd8b42a86478b4766/html5/thumbnails/26.jpg)
Results
• What did I learn? – Flex Technologies
• Action Script • MXML
– Adobe tools • Flash Catalyst • Illustrator • Photoshop • Flash Builder
– XHTML/HTML 5.0 – CSS – Google Maps API/KML – Server Side Scripting
• PHP
– Requirements gathering is most important
![Page 27: Senior Project at USF - Mapping with Adobe Flex and Google Maps (Dec 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052905/558421ffd8b42a86478b4766/html5/thumbnails/27.jpg)
Changes
• What would I do different?
– Less time on design, more time on coding
– Separate MXML from Action Code
– Label names of components
![Page 28: Senior Project at USF - Mapping with Adobe Flex and Google Maps (Dec 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052905/558421ffd8b42a86478b4766/html5/thumbnails/28.jpg)
Advise
• Choose your project carefully
– Don’t get in over your head
• Research requirements extensively
– Helps organize your project plan
– Minimize surprises
• Do documentation first
– Helps keep you on track
– Can always update later