Feel free to download the material for offline viewing later, better images' resolutions, and crispier fonts.

1. FOSS4G WORKSHOP
11.27.13 | UNIVERSITY OF THE PHILIPPINES
POWER AND ELEGANCE:
Leaflet + jQuery
ENGR. RANEL O. PADON

2. The Objective: Mashup

3. ranel.padon@gmail.com

Senior Software Engineer @ Kite Systems, Ltd.

Current project involvement: CNN Travel

Lecturer, UP DGE (Java/Python OOP Undergrad Courses)

Lecturer, UP NEC (Web GIS Training Course)

UP MS Computer Science (25/30 units)

Geodetic Engineer

Involved in computational/numerical Java and Python
projects before.

4. TOPICS
HTML
jQuery
CSS
Leaflet
Mashup

5. Client-Server Model
Client/Browser
Server

6. Client-Server Model
Client/Browser
HTML
CSS
JavaScript
Server
PHP | Python | ROR
MySQL | PostgreSQL
Apache | NGINX

7. HTML | CSS | JS

HTML for content and structure of the web page.

CSS for the fonts, color, alignment, styling, etc.

JavaScript for the interactivity or real-time modifications of
HTML and CSS.

8. JavaScript: Ruler of the World
HTML
CSS
JavaScript
Dojo
Dojo Toolkit
ExtJS
ExtJS UI
jQuery
jQuery UI
…
…
Google Maps
OpenLayers
Leaflet
…
Other JS
Utilities

9. HTML | DOCTYPE TAG

10. HTML | SKELETONS

11. HTML | HEAD SECTION
Typical Usages:

Title of the document or browser tab.

JavaScript files insertion

CSS files insertions

SEO mechanisms (to increase your search engine rankings)

12. HTML | BASIC ELEMENTS

13. HTML | CSS | INLINE

14. HTML | DOM

Document Object Model

Every web page could be viewed like a tree structure, with
elements as nodes

15. HTML | DOM

Treats elements as objects.

Each object has attributes, methods, and associated
events.

16. HTML | DOM

DOM is needed by JavaScript to communicate with the
HTML elements.

DOM supports navigation in any direction (e.g., parent
and previous sibling)

17. HTML | DOM | ID

18. HTML | DOM | ID

19. HTML | DOM | CLASS

20. HTML | DOM | CLASS

21. HTML | DOM | JQUERY | #id

22. HTML | DOM | JQUERY | $()

$(document).ready( … ) could be just written simply as $( … )

23. HTML | DOM | JQUERY | .class

24. jQuery

Released in 2006 by John Resig.

Free and open-source software

Around 30KB only (gzipped version)

simplified the Client-Side Scripting of HTML

Most popular JS library (65% of top 10,000 websites)

25. jQuery | Versions

26. jQuery | Features

Multi-browser

DOM selection/traversal

DOM Manipulation/modification

Event Handling

Creating Effects/Animations

AJAX processing

Extensibility through plug-ins

27. jQuery | UI Widgets

Autocomplete – Auto-complete boxes based on what the user types

Button – Enhanced button appearance, turn radio buttons and
checkboxes into pushbuttons

Datepicker – Advanced date-picker

Dialog – Show dialog boxes on top of other content, easily and robustly

Menu – Show a Menu

Progressbar – Progress bars, both animated and not

Slider – Fully customizable sliders with various features:

Spinner – Show a Number Spinner

Tabs – Tabbed user interface handling, with both inline and demandloaded content

Tooltip – Show a Tooltip

…

28. jQuery | Effects

Color Animation – Animate the transition from one color to another

Toggle Class, Add Class, Remove Class, Switch Class – Animate the
transition from one set of styles to another

Effect – A variety of effects (appear, slide-down, explode, fade-in,
etc.)

Toggle – Toggle an effect on and off

Hide, Show - Using the effects above

29. jQuery | John Resig

30. jQuery | John Resig | Current

“A free world-class education for anyone anywhere.”

changing education for the better by providing a free
world-class education for anyone anywhere.

over 300 million lessons delivered

31. jQuery | Modern Influences
Twitter Bootstrap
JavaScript
jQuery
HTML5 Boilerplate
Backbone.js

32. Leaflet

“Simplicity, performance, and usability.”

Released in 2011 by Vladimir Agafonkin

Consistent and readable source code.

Well-documented API and huge repository of plugins

33. Leaflet | Vladimir Agafonkin

34. Leaflet | Vladimir Agafonkin

He currently works at Mapbox

35. Leaflet | Map 1

36. Leaflet | Map 1

37. Leaflet | Map 2

38. Leaflet | Map 2 | Includes

39. Leaflet | Map 2 | Widgets

40. Leaflet | Map 2 | Handler

41. Leaflet | Map 2 | Will Not Work

42. Leaflet | Map 3

43. Leaflet | Map 3

44. Leaflet | Map 3 | Download

Download the custom Icons here

Download other useful plugins here

45. Leaflet | Map 3 | Directories

Download the Icons here

46. Leaflet | Map 3 | Button

47. Leaflet | Map 3 | Custom Icons

48. Leaflet | Map 3 | Handler

49. Leaflet | Map 4

50. Leaflet | Map 4 | Widgets

51. Leaflet | Map 4 | Handler

52. Leaflet | Map 5

53. Leaflet | Map 5 | Fonts

54. Leaflet | Map 5 | Includes

55. Leaflet | Map 5 | Leaflet
Plugins

56. Leaflet | Map 5 | UI Theme

57. Github | Download Mashup

Download the complete zipped source codes and files here

just click/open the “leaflet-jquery5.html” file

58. Thank You!