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.

1. Hillsborough County Historic
Maps
Matthew King

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

3. About Hillsborough County
Historical Maps
“The Fort King Road
Then and Now”
“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
Jeff Hough

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

5. 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/)

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

7. Adobe® Web Premium
• Adobe® Flash Professional
• Adobe® Flash Catalyst
• Adobe® Illustrator
• Adobe® Photoshop
• Adobe® Flash Builder

8. Why Adobe Web Premium?
• Multi-Browser compatible with Flash plug-in
• Learn newer technology/multi-platform
• Google® API compatible with Flash

9. 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/)

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

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

12. Home Page

13. Maps Page

14. Maps Database
• MySQL
– Maps Database

15. Maps
Maps Page
PHP User
Google
Selects Year
Requests
Maps API
From
Apache
PHP
MySql
Places
on

16. Blog Page

17. Blog (WordPress) Database
• MySQL
– Blog Database
wp_posts wp_users
PK post_author PK,FK1 ID
PK user_login
post_date
post_date_gmt user_pass
post_content user_nicename
post_title user_email
post_excerpt user_url
post_status user_registered
comment_status user_activation_key
ping_status user_status
post_password display_name
post_name post_author
to_ping
pinged
post_modified
post_modified_gmt
post_content_filtered
post_parent
guid
menu_order
post_type
post_mime_type
comment_count
ID

18. Places
on
Maps Page
From
Requests
Selects Blog
User

19. External WordPress® Page

20. Book Page

21. Purchase Book
• “The Fort King Road
Then and Now”
• Jeffrey A. Hough
• Jerry C. Morris

22. About Us
• Developer
– Matthew King
• GIS Analyst/Author
– Jeff Hough

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

24. Other challenges
• Learning new technologies
– Action Script
– Adobe Flex/Flash Builder
– Google Maps/KML/GIS

25. Flex Positives/Negatives
• Positives
– Platform/Browser independent
– Development/Design easier than AJAX
• Negatives
– Some mobile devices do not support Adobe
Flash®

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

27. Changes
• What would I do different?
– Less time on design, more time on coding
– Separate MXML from Action Code
– Label names of components

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