Power and Elegance - Leaflet + jQuery
Upcoming SlideShare
Loading in...5
×
 

Power and Elegance - Leaflet + jQuery

on

  • 1,762 views

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

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

Statistics

Views

Total Views
1,762
Views on SlideShare
1,762
Embed Views
0

Actions

Likes
3
Downloads
35
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Power and Elegance - Leaflet + jQuery Power and Elegance - Leaflet + jQuery Presentation Transcript

  • FOSS4G WORKSHOP 11.27.13 | UNIVERSITY OF THE PHILIPPINES POWER AND ELEGANCE: Leaflet + jQuery ENGR. RANEL O. PADON
  • The Objective: Mashup
  • 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.
  • TOPICS HTML jQuery CSS Leaflet Mashup
  • Client-Server Model Client/Browser Server
  • Client-Server Model Client/Browser HTML CSS JavaScript Server PHP | Python | ROR MySQL | PostgreSQL Apache | NGINX
  • 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.
  • JavaScript: Ruler of the World HTML CSS JavaScript Dojo Dojo Toolkit ExtJS ExtJS UI jQuery jQuery UI … … Google Maps OpenLayers Leaflet … Other JS Utilities
  • HTML | DOCTYPE TAG
  • HTML | SKELETONS
  • 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)
  • HTML | BASIC ELEMENTS
  • HTML | CSS | INLINE
  • HTML | DOM  Document Object Model  Every web page could be viewed like a tree structure, with elements as nodes
  • HTML | DOM  Treats elements as objects.  Each object has attributes, methods, and associated events.
  • 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)
  • HTML | DOM | ID
  • HTML | DOM | ID
  • HTML | DOM | CLASS
  • HTML | DOM | CLASS
  • HTML | DOM | JQUERY | #id
  • HTML | DOM | JQUERY | $()  $(document).ready( … ) could be just written simply as $( … )
  • HTML | DOM | JQUERY | .class
  • 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)
  • jQuery | Versions
  • jQuery | Features  Multi-browser  DOM selection/traversal  DOM Manipulation/modification  Event Handling  Creating Effects/Animations  AJAX processing  Extensibility through plug-ins
  • 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  …
  • 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
  • jQuery | John Resig
  • 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
  • jQuery | Modern Influences Twitter Bootstrap JavaScript jQuery HTML5 Boilerplate Backbone.js
  • Leaflet  “Simplicity, performance, and usability.”  Released in 2011 by Vladimir Agafonkin  Consistent and readable source code.  Well-documented API and huge repository of plugins
  • Leaflet | Vladimir Agafonkin
  • Leaflet | Vladimir Agafonkin  He currently works at Mapbox
  • Leaflet | Map 1
  • Leaflet | Map 1
  • Leaflet | Map 2
  • Leaflet | Map 2 | Includes
  • Leaflet | Map 2 | Widgets
  • Leaflet | Map 2 | Handler
  • Leaflet | Map 2 | Will Not Work
  • Leaflet | Map 3
  • Leaflet | Map 3
  • Leaflet | Map 3 | Download  Download the custom Icons here  Download other useful plugins here
  • Leaflet | Map 3 | Directories  Download the Icons here
  • Leaflet | Map 3 | Button
  • Leaflet | Map 3 | Custom Icons
  • Leaflet | Map 3 | Handler
  • Leaflet | Map 4
  • Leaflet | Map 4 | Widgets
  • Leaflet | Map 4 | Handler
  • Leaflet | Map 5
  • Leaflet | Map 5 | Fonts
  • Leaflet | Map 5 | Includes
  • Leaflet | Map 5 | Leaflet Plugins
  • Leaflet | Map 5 | UI Theme
  • Github | Download Mashup  Download the complete zipped source codes and files here  just click/open the “leaflet-jquery5.html” file
  • Thank You!