Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Power and Elegance - Leaflet + jQuery

4,161 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!

×