Power and Elegance - Leaflet + jQuery

3,640 views

Published on

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

Published in: Technology

Power and Elegance - Leaflet + jQuery

  1. 1. FOSS4G WORKSHOP 11.27.13 | UNIVERSITY OF THE PHILIPPINES POWER AND ELEGANCE: Leaflet + jQuery ENGR. RANEL O. PADON
  2. 2. The Objective: Mashup
  3. 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. 4. TOPICS HTML jQuery CSS Leaflet Mashup
  5. 5. Client-Server Model Client/Browser Server
  6. 6. Client-Server Model Client/Browser HTML CSS JavaScript Server PHP | Python | ROR MySQL | PostgreSQL Apache | NGINX
  7. 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. 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. 9. HTML | DOCTYPE TAG
  10. 10. HTML | SKELETONS
  11. 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. 12. HTML | BASIC ELEMENTS
  13. 13. HTML | CSS | INLINE
  14. 14. HTML | DOM  Document Object Model  Every web page could be viewed like a tree structure, with elements as nodes
  15. 15. HTML | DOM  Treats elements as objects.  Each object has attributes, methods, and associated events.
  16. 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. 17. HTML | DOM | ID
  18. 18. HTML | DOM | ID
  19. 19. HTML | DOM | CLASS
  20. 20. HTML | DOM | CLASS
  21. 21. HTML | DOM | JQUERY | #id
  22. 22. HTML | DOM | JQUERY | $()  $(document).ready( … ) could be just written simply as $( … )
  23. 23. HTML | DOM | JQUERY | .class
  24. 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. 25. jQuery | Versions
  26. 26. jQuery | Features  Multi-browser  DOM selection/traversal  DOM Manipulation/modification  Event Handling  Creating Effects/Animations  AJAX processing  Extensibility through plug-ins
  27. 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. 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. 29. jQuery | John Resig
  30. 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. 31. jQuery | Modern Influences Twitter Bootstrap JavaScript jQuery HTML5 Boilerplate Backbone.js
  32. 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. 33. Leaflet | Vladimir Agafonkin
  34. 34. Leaflet | Vladimir Agafonkin  He currently works at Mapbox
  35. 35. Leaflet | Map 1
  36. 36. Leaflet | Map 1
  37. 37. Leaflet | Map 2
  38. 38. Leaflet | Map 2 | Includes
  39. 39. Leaflet | Map 2 | Widgets
  40. 40. Leaflet | Map 2 | Handler
  41. 41. Leaflet | Map 2 | Will Not Work
  42. 42. Leaflet | Map 3
  43. 43. Leaflet | Map 3
  44. 44. Leaflet | Map 3 | Download  Download the custom Icons here  Download other useful plugins here
  45. 45. Leaflet | Map 3 | Directories  Download the Icons here
  46. 46. Leaflet | Map 3 | Button
  47. 47. Leaflet | Map 3 | Custom Icons
  48. 48. Leaflet | Map 3 | Handler
  49. 49. Leaflet | Map 4
  50. 50. Leaflet | Map 4 | Widgets
  51. 51. Leaflet | Map 4 | Handler
  52. 52. Leaflet | Map 5
  53. 53. Leaflet | Map 5 | Fonts
  54. 54. Leaflet | Map 5 | Includes
  55. 55. Leaflet | Map 5 | Leaflet Plugins
  56. 56. Leaflet | Map 5 | UI Theme
  57. 57. Github | Download Mashup  Download the complete zipped source codes and files here  just click/open the “leaflet-jquery5.html” file
  58. 58. Thank You!

×