1. JQuery - introduction, selections and methods
2. Geospatial data on the web: GeoJSON

jQuery is a tiny JavaScript library that transforms the web into an entertaining experience

JavaScript is the language of the web, it is used to make the web look alive by adding motion to it

Features of JavaScript

• It makes web pages more interactive by adding motions and graphics
• It is an Interpreted language which means that you don't require a compiler to run JavaScript
• JavaScript is mainly a client-side scripting language

Features

• DOM manipulation - web developers manipulate the DOM using jQuery to make a web app more interactive
• Large community - most diverse JavaScript library, with detailed documentation
• AJAX support - jQuery has 1000s of plugins available, to improve the user experience. One such example is the AJAX (Asynchronous JavaScript And XML)
• Cross browser - browser independent

jQuery is a fast, small, and feature-rich JavaScript library

It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers

• Simplifies JavaScript - simplifies DOM manipulation and event handling for rapid web development
• Event handling - offers a wide variety of events, such as a user clicking on a link
• Lightweight - Only 30kB minified and gzipped
• Animations - has plenty of built-in animation effects

There are two ways to install jQuery

• Local Installation - download jQuery library and include it in your HTML code
• Link to a CDN - add jQuery library in your HTML code from Content Delivery Network

Bitbucket: jQuery

Home: jQuery

DOM is a tree structure of the various HTML elements

DOM {Document Object Model} and is a mechanism for representing and interacting with your HTML, XHTML or XML documents

It allows you to navigate and manipulate your documents through a programming language, which in the browser will almost always be JavaScript

jQuery comes with a bunch of DOM related methods to manipulate DOM

DOM manipulation; getting and setting content text(), html() and val()

jQuery Selectors - used to select, manipulate HTML elements by using the $() function & elements, ID's & classes

jQuery the $() function replaces JavaScript functions such as

• document.getElementById, querySelectorAll & getElementByClass

Bitbucket: Install jQuery

Home: Install jQuery

Bitbucket: jQuery Selectors

Home: jQuery Selectors

• jQuery Methods - before(), after(), text(), html(), css(), attr(), val(), addClass(), removeClass(), toggleClass() etc.
• jQuery Events - click(), on(), keypress() etc.
• jQuery Effects - hide(), show(), toggle(), fadeOut(), fadeIn(), fadeToggle(), slideDown(), slideUp(), slideToggle() etc.
• jQuery UI - draggable(), droppable(), datepicker() etc.

AJAX,- Asynchronous JavaScript And XML, allows you to load data in the background and display it on your webpage, without refreshing the page

Pros of using AJAX

1. More pleasant to use
2. Save bandwidth - no refresh

Cons of using AJAX

1. No use of navigation buttons - Because the updates are done by JavaScript on the client, the state will not register in the browsers history
2. A specific state can't be bookmarked by the user
3. Data loaded through AJAX won't be indexed by any of the major search engines
4. Browsers without JavaScript support, or with JavaScript disabled - No AJAX

One of the simplest and yet still powerful methods for loading data asynchronously is the load() method

You use it by selecting an element where you want the content loaded to and then call the load() method on it

It takes the URL that you wish to load, as a parameter

The jQuery get() and post() methods allows you to easily send a HTTP request to a page and get the result back

When you post a form, it's usually either a GET or a POST request, and with jQuery you can mimic that, since both a get() and a post() method exists

Bitbucket: jQuery AJAX

Home: jQuery AJAX

Same Origin Policy, which prevents us from making AJAX requests to a different domain or subdomain than the one currently executing the script

JSONP is a good solution to this

Bitbucket: jQuery AJAX

Home: jQuery AJAX

You can use GeoJSON within your main JavaScript code file, but, to keep your things looking simple, it's most common to maintain the GeoJSON in its own separate file

With Leaflet you have to define the GeoJSON as a JavaScript variable

L.geoJSON(...) expects all coordinates in the GeoJSON file to be WGS84 coordinates

If working with a GeoJSON file that uses a different projection (so without first reprojecting it to EPSG:4326), you can use the Proj4js Javascript library together with the Proj4Leaflet extension to enable support for coordinate reference systems not built into Leaflet

Bitbucket: GeoJSON

Home: GeoJSON

Bitbucket: Leaflet - GeoJSON

Home: Leaflet - GeoJSON

Bitbucket: Leaflet - Marker

Home: Leaflet - Marker

Queries about this Lesson, please send them to: jmwaura@jkuat.ac.ke

*References*

• Google Maps; Power Tools for Maximizing the API, 2014 Evangelos Petroutsos
• D3 Tips and Tricks; Interactive Data Visualization in a Web Browser, 2013 Malcolm Maclean
• Interactive Data Visualization for the Web, 2013 Scott Murray
• Web Programming with HTML5, CSS, and JavaScript, 2019 John Dean
• Leaflet Documentation Leaflet Team
• Google Documentation for developers Google Team