1. Lectures
2. Online tutorials
3. Practical(s)
4. Assignment(s)
5. Presentation(s)

1. Introduction: Definition, world wide web (www) & web cartography
2. Designing web services and web maps using Leaflet & Google Maps API
3. Reading Data from various Data source
4. Web mapping techniques; web design & development, hyperlinking, animations, web atlas, multimedia mapping
5. Construction & publishing Geospatial information using HTML, GML
6. Web mapping libraries and frameworks
7. In this course; Leaflet & Google Maps API

1. Understand the basics of client-server architecture
2. Understand the basics of client side technologies [HTML, CSS, JavaScript]
3. Understand the basics of server-side technologies [PHP, SQL, Databases]
4. Client and Server Communication - AJAX
5. Libraries and frameworks - JQuery
6. Tools for geospatial applications - [Leaflet, Google Maps, Turf, PostGIS, GeoJSON]

HTML & CSS syntax

• w3schools.com
• w3resources.com

Basic JavaScript programming skills

Map service; WMS, WMTS &am; TMS

QGIS or ArcGIS

Make Google your friend

Web continues to evolve

HTML - allows us to structure content for our web page. Our map will be contained in an element within an HTML file

CSS - gives us control of the style and visual presentation of our web page. We will use it in the placement and sizing of the map and to customize some Leaflet elements

JavaScript - gives us the ability to add interactivity to our web page. We will use it to pull in map tiles to our web page, add data (or content layers), and handle user interaction with the map

Google Map - Google Inc

Leaflet - CloudMade

Openlayers - OpenStreetMap

Bing Maps, Here Maps, ArcGIS Online, MapBox.

Registration needed You get an API key

• Identifies your application
• Used to monitor the usage of your service
• Reference the key in your JavaScript files

Base maps (4 options available)

Add your own data

• Big tables
• GeoJSON
• KML

Choose base maps

Add your own data & styles

Publish/share your map as an application

1. Application templates available
2. Available at GitHub

Edit the application with JavaScript API

Design maps with the MapBox Studio

Reference your design by id in your JavaScript file

Vector tiles

• Map is rendered in client side

Based on OpenSource APIs

Completely rewritten OL3

More features by default

• More options to customize without plugins

Simple & lightweight (it is only 28kb of code)

Mobile friendly

Simple API

Not many features included

• A lot of plugins

Easier to learn if you don't know JavaScript well

Considerations

• Your use case


• Features


• Licence


• Pricing


• Future

Free WMS/TMS/WMTS servers

• Click openstreetmap tiles

---

• Click leaflet

---

• Click web feature services

---

• Click list

Bootstrap framework (HTML, CSS, JS)

• Responsive
• A lot of ready building blocks
• Click bootstrap

Leaflet Plugin

• Click Leaflet Plugin

You should have some kind of interactivity in your map

• Filtering, style changes, search...
• Click jQuery

Easy-to-use API for event handling etc

Filtering with a slider: jQuery + noUiSlider

• Click noUiSlider

It's best to transform your data points to the same CRS as your base map in QGIS/ArcGIS

If you need CRS transformations in your JavaScript code, use proj4js

Click proj4js

Use browser tools

• Firebug for Firefox
• Chrome console

JavaScript code console.log(variable)

1. File-based data
• Shapefile, KML, GeoJSON, & TopoJSON, gpx, csv
2. Spatially-enabled database data
• Proprietary: Microsoft SQL Server, Oracle Spatial, & the Esri ArcSDE middleware
• Open equivalents: PostgreSQL with PostGIS extension, SQLite with SpatiaLite extension
3. Raster formats
• Open raster formats JPEG, PNG, TIFF, BMP, GIF

Included files

1. .shp


2. .shx


3. .dbf

Click me

XML, wherein data is maintained in a series of structured tags

Bitbucket: KML

Home: KML

Data is arranged in a hierarchical series of key-value pairs with Discrete geometries

GeoJSON Specifications

Bitbucket: GeoJSON

Home: GeoJSON

Encodes topology with Geometries that share sequences of positions called arcs

TopoJSON specifications

Bitbucket: topoJSON

Home: topoJSON

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