ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

GIS_Day_2016

•
•
Joseph Kariuki
Joseph Kariuki

This document introduces building a web GIS application using GeoDjango and Leaflet. It discusses prerequisites like Python, PostgreSQL with PostGIS, Django, and Leaflet. It describes using GDAL to generate Django models from spatial data and LayerMapping to load the data. It shows configuring the Django project and creating an application to handle the spatial data. Finally, it demonstrates serving the spatial data via GeoJSON to Leaflet maps in the web application's frontend.

1 of 26
Downloaded 16 times
INTRO:WEB GISWITH GEODJANGO AND LEAFLETJS GIS DAY 2016 PRESENTATION BY JOSEPH KARIUKI Theme: GIS For Sustainable Development
PREAMBLE • Why FOSS? • Embracing FOSS role in GIS/GIT and education domains. • Sustainable Development Goals (SDGs) and Geospatial technology. joehene@gmail.com GIS Day 2016
PREREQUISITES • Python with pip or easy_install. • PostgreSQL with PostGIS support. • Django, django-leaflet, django-geojson, psycopg2, gdal (installed into virtual environment using pip or easy_install). • Code editor (Notepad++ or SublimeText preferred) joehene@gmail.com GIS Day 2016
WHAT IS DJANGO? • Free an Open Source (FOSS) web application framework, written in Python programming language. • Django grew from real-world applications developed in Lawrence, Kansas City in 2003, growing popular in 2005 and released publicly in 2005. • 1.0 version released in 2008, current version ==1.10 joehene@gmail.com GIS Day 2016
DJANGO CONCEPT • HTTP in, HTTP out HTTP Request HTTP Response URLs VIEWS Models Templates joehene@gmail.com GIS Day 2016
DJANGO MVC / MVT ARCHITECTURE • Django is designed to enhance loose-coupling and strict separation between a web application constituents promoting easy customization of web application part(s) without affecting others. • M – Model • V –View • C – Controller / T -Template joehene@gmail.com GIS Day 2016
WHAT IS LEAFLET? • LEAFLET is an Open Source JavaScript Library for interactive maps. • Supports mobile mapping and can be extended through use of plugins. • It takes advantage of HTML5 and CSS3 on browsers. • Source code can be obtained from http://github.com/Leaflet/Leaflet • Leaflet API has ‘Map’ as the central class and is used to create a map on a page and manipulate it. joehene@gmail.com GIS Day 2016
APPLICATION ARCHITECTURE joehene@gmail.com GIS Day 2016 Model View & Template Spatial Dataset Back-End JavascriptAPI Basemap Front-End django-leaflet GDAL/OGR
BASIC STEPS • Downloading Python (version 2.7.12 used in this) • Installing virtualenv / easy_install • Creating a virtualenv, activating it and installing required packages (previously listed) • Starting Django project named ‘webgis’ • Creating ‘onyeshamap’ application within ‘webgis’ project • Configure webgis project with postGIS support • Create GIS-enabled Django Models, admin using GDAL LayerMapping joehene@gmail.com GIS Day 2016
PARENT DIRECTORY webgis • onyeshamap • mywebgis • db.sqlite (removed) • manage.py joehene@gmail.com GIS Day 2016
PROJECT DIRECTORY webgis/webgis • __init__.py • settings.py • urls.py • wsgi.py joehene@gmail.com GIS Day 2016
SETTINGS.PY • DEBUG is a boolean that turns on/off the debug mode of the project. If set to True, Django will display detailed error pages when an uncaught exception is thrown by your application. • ALLOWED_HOSTS is not applied while debug mode is on or when running tests • INSTALLED_APPS is a setting you will have to edit in all projects.This setting tells Django which applications are active for this site. By default, Django includes the following applications: joehene@gmail.com GIS Day 2016
SETTINGS.PY (CONT…) • django.contrib.admin:This is an administration site. • django.contrib.auth:This is an authentication framework. • django.contrib.contenttypes:This is a framework for content types. • django.contrib.sessions:This is a session framework. • django.contrib.messages:This is a messaging framework. • django.contrib.staticfiles:This is a framework for managing static files. • leaflet: Allows use of leaflet in our Django project. • djgeojson: allows (de)serialization (Geo)django objects into GeoJSON. • onyeshamap: This is application created for purposes of this project. joehene@gmail.com GIS Day 2016
APPS DIRECTORY webgis/onyshamap • __init__.py • admin.py • apps.py • models.py • tests.py • urls.py • views.py joehene@gmail.com GIS Day 2016
SPATIAL DATABASE Postgresql with postGIS • Database Name: • Owner: • Host: • Port: 54… joehene@gmail.com GIS Day 2016
PROJECT SETTING CONFIGURATION joehene@gmail.com GIS Day 2016
GDAL (LAYER MAPPING) • Inspects the given OGR-compatible data source (e.g., a shapefile) and outputs a GeoDjango model with the given model name. In this example: ./manage.py ogrinspect onyeshamap/data/CCTV_locations.shp CCTV ---srid=32737 –mapping –multi • Makes use of positional arguments which are ~ data_source – path to the data source ~ model_name – name of the model to be created ~ SRID – Spatial Reference Identifier ~ mapping - Generate mapping dictionary for use with `LayerMapping` joehene@gmail.com GIS Day 2016
GDAL (LAYER MAPPING) joehene@gmail.com GIS Day 2016
DATA IN QGIS joehene@gmail.com GIS Day 2016
ONYESHAMAP DATA MODELS (BACKEND) joehene@gmail.com GIS Day 2016
DATAVIEW AS GEOJSON joehene@gmail.com GIS Day 2016
GEODJANGO WEB APPLICATION (FRONTEND) joehene@gmail.com GIS Day 2016
DJANGO USERS • RCMRD apps portal – apps.rcmrd.org/ • Instagram – www.Instagram.com • Bitbucket – https://bitbucket.org • NASA Website – www.nasa.gov • PinterestWebsite – www.pinterest.com • Eventbrite – www.eventbrite.com joehene@gmail.com GIS Day 2016
REFERENCE LINKS • https://docs.djangoproject.com/en/1.10/ref/contrib/gis/ • https://tutorial.djangogirls.org/en/ • https://www.imagespace.com/blog/2011/09/21/geo-django-quickstart • https://github.com/joehene/djangoleaflet/ - GitHub Repository joehene@gmail.com GIS Day 2016
DEMO • Performed in Ubuntu Linux Desktop 14.04LTS operating system • DataVisualization in Q-GIS • Django production server start • Django-Leaflet web application showcase joehene@gmail.com GIS Day 2016
Q & A joehene@gmail.com

More Related Content

GIS_Day_2016

  • 1. INTRO:WEB GISWITH GEODJANGO AND LEAFLETJS GIS DAY 2016 PRESENTATION BY JOSEPH KARIUKI Theme: GIS For Sustainable Development
  • 2. PREAMBLE • Why FOSS? • Embracing FOSS role in GIS/GIT and education domains. • Sustainable Development Goals (SDGs) and Geospatial technology. joehene@gmail.com GIS Day 2016
  • 3. PREREQUISITES • Python with pip or easy_install. • PostgreSQL with PostGIS support. • Django, django-leaflet, django-geojson, psycopg2, gdal (installed into virtual environment using pip or easy_install). • Code editor (Notepad++ or SublimeText preferred) joehene@gmail.com GIS Day 2016
  • 4. WHAT IS DJANGO? • Free an Open Source (FOSS) web application framework, written in Python programming language. • Django grew from real-world applications developed in Lawrence, Kansas City in 2003, growing popular in 2005 and released publicly in 2005. • 1.0 version released in 2008, current version ==1.10 joehene@gmail.com GIS Day 2016
  • 5. DJANGO CONCEPT • HTTP in, HTTP out HTTP Request HTTP Response URLs VIEWS Models Templates joehene@gmail.com GIS Day 2016
  • 6. DJANGO MVC / MVT ARCHITECTURE • Django is designed to enhance loose-coupling and strict separation between a web application constituents promoting easy customization of web application part(s) without affecting others. • M – Model • V –View • C – Controller / T -Template joehene@gmail.com GIS Day 2016
  • 7. WHAT IS LEAFLET? • LEAFLET is an Open Source JavaScript Library for interactive maps. • Supports mobile mapping and can be extended through use of plugins. • It takes advantage of HTML5 and CSS3 on browsers. • Source code can be obtained from http://github.com/Leaflet/Leaflet • Leaflet API has ‘Map’ as the central class and is used to create a map on a page and manipulate it. joehene@gmail.com GIS Day 2016
  • 8. APPLICATION ARCHITECTURE joehene@gmail.com GIS Day 2016 Model View & Template Spatial Dataset Back-End JavascriptAPI Basemap Front-End django-leaflet GDAL/OGR
  • 9. BASIC STEPS • Downloading Python (version 2.7.12 used in this) • Installing virtualenv / easy_install • Creating a virtualenv, activating it and installing required packages (previously listed) • Starting Django project named ‘webgis’ • Creating ‘onyeshamap’ application within ‘webgis’ project • Configure webgis project with postGIS support • Create GIS-enabled Django Models, admin using GDAL LayerMapping joehene@gmail.com GIS Day 2016
  • 10. PARENT DIRECTORY webgis • onyeshamap • mywebgis • db.sqlite (removed) • manage.py joehene@gmail.com GIS Day 2016
  • 11. PROJECT DIRECTORY webgis/webgis • __init__.py • settings.py • urls.py • wsgi.py joehene@gmail.com GIS Day 2016
  • 12. SETTINGS.PY • DEBUG is a boolean that turns on/off the debug mode of the project. If set to True, Django will display detailed error pages when an uncaught exception is thrown by your application. • ALLOWED_HOSTS is not applied while debug mode is on or when running tests • INSTALLED_APPS is a setting you will have to edit in all projects.This setting tells Django which applications are active for this site. By default, Django includes the following applications: joehene@gmail.com GIS Day 2016
  • 13. SETTINGS.PY (CONT…) • django.contrib.admin:This is an administration site. • django.contrib.auth:This is an authentication framework. • django.contrib.contenttypes:This is a framework for content types. • django.contrib.sessions:This is a session framework. • django.contrib.messages:This is a messaging framework. • django.contrib.staticfiles:This is a framework for managing static files. • leaflet: Allows use of leaflet in our Django project. • djgeojson: allows (de)serialization (Geo)django objects into GeoJSON. • onyeshamap: This is application created for purposes of this project. joehene@gmail.com GIS Day 2016
  • 14. APPS DIRECTORY webgis/onyshamap • __init__.py • admin.py • apps.py • models.py • tests.py • urls.py • views.py joehene@gmail.com GIS Day 2016
  • 15. SPATIAL DATABASE Postgresql with postGIS • Database Name: • Owner: • Host: • Port: 54… joehene@gmail.com GIS Day 2016
  • 17. GDAL (LAYER MAPPING) • Inspects the given OGR-compatible data source (e.g., a shapefile) and outputs a GeoDjango model with the given model name. In this example: ./manage.py ogrinspect onyeshamap/data/CCTV_locations.shp CCTV ---srid=32737 –mapping –multi • Makes use of positional arguments which are ~ data_source – path to the data source ~ model_name – name of the model to be created ~ SRID – Spatial Reference Identifier ~ mapping - Generate mapping dictionary for use with `LayerMapping` joehene@gmail.com GIS Day 2016
  • 20. ONYESHAMAP DATA MODELS (BACKEND) joehene@gmail.com GIS Day 2016
  • 22. GEODJANGO WEB APPLICATION (FRONTEND) joehene@gmail.com GIS Day 2016
  • 23. DJANGO USERS • RCMRD apps portal – apps.rcmrd.org/ • Instagram – www.Instagram.com • Bitbucket – https://bitbucket.org • NASA Website – www.nasa.gov • PinterestWebsite – www.pinterest.com • Eventbrite – www.eventbrite.com joehene@gmail.com GIS Day 2016
  • 24. REFERENCE LINKS • https://docs.djangoproject.com/en/1.10/ref/contrib/gis/ • https://tutorial.djangogirls.org/en/ • https://www.imagespace.com/blog/2011/09/21/geo-django-quickstart • https://github.com/joehene/djangoleaflet/ - GitHub Repository joehene@gmail.com GIS Day 2016
  • 25. DEMO • Performed in Ubuntu Linux Desktop 14.04LTS operating system • DataVisualization in Q-GIS • Django production server start • Django-Leaflet web application showcase joehene@gmail.com GIS Day 2016