advertisement

Power and Elegance - Leaflet + jQuery

50 %
50 %
advertisement
Information about Power and Elegance - Leaflet + jQuery
Technology

Published on November 27, 2013

Author: ranelpadon

Source: slideshare.net

Description

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

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!

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

GitHub - ranelpadon/leaflet-jquery: Leaflet-jQuery Mashup

leaflet-jquery - Leaflet-jQuery Mashup. Skip to content. ... it could be viewed/downloaded here: http://www.slideshare.net/ranelpadon/power-and-elegance ...
Read more

Leaflet | LinkedIn

Leaflet drops is one of ... Power and Elegance - Leaflet + jQuery. 2,769 Views. lesoirbe. Rep trak2012 leaflet. 2,261 Views. AdamBednarek. Fss leaflet en_2 ...
Read more

Elegance | LinkedIn

Elegance of children's innocence.How do we define an elegant person. ... Power and Elegance - Leaflet + jQuery. 2,769 Views. Judy1028. TASTE THE ELEGANCE 1 .
Read more

jQuery - Developer Training - NewCircle

Our Web Development with jQuery course teaches you how to tap into the power of jQuery to ... jQuery's controls, including ... the simplicity and elegance ...
Read more

ajax - Using JQuery to load JSON and use in leaflet ...

I have the following Leaflet code: < ... How can I incorporate JQuery in this leaflet script? ... how to calculate its power draw?
Read more

Web Design and Development Books and eBooks | PACKT Books

Packt Publishing provides technology eBooks, books and videos to help IT Developers and Administrators to put software and tools to work in new ways.
Read more