database-driven web mapping using jquery, php, postgresql ...€¦ · postgresql ....

32
Database-driven web mapping using jQuery, PHP, PostgreSQL & SDE By, Jon Nordling, Michael Humber Inbal Becker-Reshef, Brian Barker, Katie McGaughey, Chris Justice University of Maryland College Park http://geoglam-crop-monitor.org/

Upload: others

Post on 04-Oct-2020

21 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Database-driven web mapping using jQuery, PHP, PostgreSQL ...€¦ · PostgreSQL . ŒEnterprise-level database ŒLeveraging the schemas ŒRelational database model ŒPostgreSQL is

Database-driven web mapping using jQuery, PHP, PostgreSQL & SDE

By, Jon Nordling, Michael Humber

Inbal Becker-Reshef, Brian Barker, Katie McGaughey, Chris Justice

University of Maryland College Park http://geoglam-crop-monitor.org/

Page 2: Database-driven web mapping using jQuery, PHP, PostgreSQL ...€¦ · PostgreSQL . ŒEnterprise-level database ŒLeveraging the schemas ŒRelational database model ŒPostgreSQL is

Overview

ñ About the GEOGLAM Crop Monitor

ñ Look at different phases of development as the application advanced

ñ Understanding the roles of the different technologies used ñ jQuery, PHP, PostgreSQL & SDE, etc.

ñ Developing ArcGIS Mapping application with total customization flexibility

Page 3: Database-driven web mapping using jQuery, PHP, PostgreSQL ...€¦ · PostgreSQL . ŒEnterprise-level database ŒLeveraging the schemas ŒRelational database model ŒPostgreSQL is

About GEOGLAM

ñ Group on Earth Observations (GEO) Global Agricultural Monitoring Initiative ñ Objective: Strengthen the international community’s

capacity to produce and disseminate relevant information on agricultural production at national, regional and global scales, through earth observations (EO) ñ Adopted by the G-20 in 2011 as part of the Action Plan on

Food Price Volatility & Agriculture along with the AMIS (Agricultural Market Information System) ñ http://www.earthobservations.org/geoglam.php

Page 4: Database-driven web mapping using jQuery, PHP, PostgreSQL ...€¦ · PostgreSQL . ŒEnterprise-level database ŒLeveraging the schemas ŒRelational database model ŒPostgreSQL is

About GEOGLAM

Crop Monitor

ñ Objective: develop transparent, timely, crop condition assessments in primary agricultural production areas highlighting potential hotspots of stress/bumper crop ñ These assessments reflect an international consensus of

crop conditions ñ Crop Monitor assessments are published monthly in the

AMIS Market Monitor, with supplemental information available on the GEOGLAM Crop Monitor website ñ http://www.geoglam-crop-monitor.org

Coordinated by Inbal Becker-Reshef and Chris Justice, Center for Global Agricultural Monitoring Research, UMD

Page 5: Database-driven web mapping using jQuery, PHP, PostgreSQL ...€¦ · PostgreSQL . ŒEnterprise-level database ŒLeveraging the schemas ŒRelational database model ŒPostgreSQL is

Application

Page 6: Database-driven web mapping using jQuery, PHP, PostgreSQL ...€¦ · PostgreSQL . ŒEnterprise-level database ŒLeveraging the schemas ŒRelational database model ŒPostgreSQL is

Database Infrastructure

Interface Design

Usability & testing

Data Aggregation

Postgres Database

SDE

Raster Layers NDVI Temperature Rainfall Imagery

Feature Layer User input comments (db) Crop Calendars

WebGIS/ESRI User

Testing

PHP, jQuery, HTML5, ESRI

Maps Communicate with end users for

testing

Configure and set up tables and

spatial databases Collect and

organize data on server

Page 7: Database-driven web mapping using jQuery, PHP, PostgreSQL ...€¦ · PostgreSQL . ŒEnterprise-level database ŒLeveraging the schemas ŒRelational database model ŒPostgreSQL is

Dashboard

Page 8: Database-driven web mapping using jQuery, PHP, PostgreSQL ...€¦ · PostgreSQL . ŒEnterprise-level database ŒLeveraging the schemas ŒRelational database model ŒPostgreSQL is

Monthly Assessment

Page 9: Database-driven web mapping using jQuery, PHP, PostgreSQL ...€¦ · PostgreSQL . ŒEnterprise-level database ŒLeveraging the schemas ŒRelational database model ŒPostgreSQL is

Assessment Reporting

Page 10: Database-driven web mapping using jQuery, PHP, PostgreSQL ...€¦ · PostgreSQL . ŒEnterprise-level database ŒLeveraging the schemas ŒRelational database model ŒPostgreSQL is

Archive

Page 11: Database-driven web mapping using jQuery, PHP, PostgreSQL ...€¦ · PostgreSQL . ŒEnterprise-level database ŒLeveraging the schemas ŒRelational database model ŒPostgreSQL is

Map

Page 12: Database-driven web mapping using jQuery, PHP, PostgreSQL ...€¦ · PostgreSQL . ŒEnterprise-level database ŒLeveraging the schemas ŒRelational database model ŒPostgreSQL is
Page 13: Database-driven web mapping using jQuery, PHP, PostgreSQL ...€¦ · PostgreSQL . ŒEnterprise-level database ŒLeveraging the schemas ŒRelational database model ŒPostgreSQL is

Assessment Reporting

Page 14: Database-driven web mapping using jQuery, PHP, PostgreSQL ...€¦ · PostgreSQL . ŒEnterprise-level database ŒLeveraging the schemas ŒRelational database model ŒPostgreSQL is
Page 15: Database-driven web mapping using jQuery, PHP, PostgreSQL ...€¦ · PostgreSQL . ŒEnterprise-level database ŒLeveraging the schemas ŒRelational database model ŒPostgreSQL is

June 2014 : Synthesis Maps

http://geoglam-crop-monitor.org/content/june-maps-and-charts

Page 16: Database-driven web mapping using jQuery, PHP, PostgreSQL ...€¦ · PostgreSQL . ŒEnterprise-level database ŒLeveraging the schemas ŒRelational database model ŒPostgreSQL is

June 2014 :Drivers and Impacts

http://geoglam-crop-monitor.org/content/june-maps-and-charts

Page 17: Database-driven web mapping using jQuery, PHP, PostgreSQL ...€¦ · PostgreSQL . ŒEnterprise-level database ŒLeveraging the schemas ŒRelational database model ŒPostgreSQL is

Contributing to the Market Monitor

http://www.amis-outlook.org/

Page 18: Database-driven web mapping using jQuery, PHP, PostgreSQL ...€¦ · PostgreSQL . ŒEnterprise-level database ŒLeveraging the schemas ŒRelational database model ŒPostgreSQL is

EO Data

FAO

UMD/NASA

JRC

JRC

Page 19: Database-driven web mapping using jQuery, PHP, PostgreSQL ...€¦ · PostgreSQL . ŒEnterprise-level database ŒLeveraging the schemas ŒRelational database model ŒPostgreSQL is

Development

Page 20: Database-driven web mapping using jQuery, PHP, PostgreSQL ...€¦ · PostgreSQL . ŒEnterprise-level database ŒLeveraging the schemas ŒRelational database model ŒPostgreSQL is

Development Phases:

Version 1

Description

ñ Simple web map to visualize data layers ñ NDVI ñ Rain Sum ñ Temperature Sum ñ Crop Calendar

ñ Purpose: ñ **Only to visualize data

Tech Specs

ñ ArcGIS Server

ñ REST

ñ jQuery

ñ HTML

Page 21: Database-driven web mapping using jQuery, PHP, PostgreSQL ...€¦ · PostgreSQL . ŒEnterprise-level database ŒLeveraging the schemas ŒRelational database model ŒPostgreSQL is

Everything was hard coded

Page 22: Database-driven web mapping using jQuery, PHP, PostgreSQL ...€¦ · PostgreSQL . ŒEnterprise-level database ŒLeveraging the schemas ŒRelational database model ŒPostgreSQL is

Early summer 2013

Page 23: Database-driven web mapping using jQuery, PHP, PostgreSQL ...€¦ · PostgreSQL . ŒEnterprise-level database ŒLeveraging the schemas ŒRelational database model ŒPostgreSQL is

Development Phases:

Version 2

Description

ñ Visualized data layers

ñ Use interface to collect data

ñ Purpose: ñ Visualize dataset ñ Collect Crop condition

information ñ Based on Crop Calendars

Tech Specs

ñ ArcGIS Server

ñ REST

ñ jQuery & Ajax ñ Application functionality ñ To make php requests

ñ PHP ñ Query results from

database

ñ MySQL ñ Reference Table

ñ HTML

Page 24: Database-driven web mapping using jQuery, PHP, PostgreSQL ...€¦ · PostgreSQL . ŒEnterprise-level database ŒLeveraging the schemas ŒRelational database model ŒPostgreSQL is

MySQL Database: • Fast set up time • Works great with PHP • Great way to store REST URL • ** Made things way easier for populating the

interface • User Login/ Registration

PHP Integration: • Allowed server side functionality • Allowed us to manipulate the interface

dynamically. • Data Collection Submission from client

side to server side. • Database Query’s !!!!!!!!!!!!!!!!!!!!

New Challenge: • Crop Calendars • To many REST

Services • Performance • Expandability

Page 25: Database-driven web mapping using jQuery, PHP, PostgreSQL ...€¦ · PostgreSQL . ŒEnterprise-level database ŒLeveraging the schemas ŒRelational database model ŒPostgreSQL is
Page 26: Database-driven web mapping using jQuery, PHP, PostgreSQL ...€¦ · PostgreSQL . ŒEnterprise-level database ŒLeveraging the schemas ŒRelational database model ŒPostgreSQL is

Development Phases:

Version 3

Description

ñ Visualized data layers.

ñ Use interface to collect data

ñ Different levels of users ñ Admin ñ Reporters, etc.

ñ Dynamically store spatial data

ñ Data product expandability!

Tech Specs

ñ ArcGIS Server

ñ REST

ñ jQuery & Ajax ñ Application functionality ñ To make php requests

ñ PHP ñ Query results from

database

ñ PostgreSQL with SDE ñ Relational DB model

ñ HTML

Page 27: Database-driven web mapping using jQuery, PHP, PostgreSQL ...€¦ · PostgreSQL . ŒEnterprise-level database ŒLeveraging the schemas ŒRelational database model ŒPostgreSQL is

PostgreSQL

ñ Enterprise-level database

ñ Leveraging the schemas

ñ Relational database model

ñ PostgreSQL is perceived as more powerful, more focused on data integrity, and stricter at complying with SQL specifications, but correspondingly slower and more complicated to use.

Page 28: Database-driven web mapping using jQuery, PHP, PostgreSQL ...€¦ · PostgreSQL . ŒEnterprise-level database ŒLeveraging the schemas ŒRelational database model ŒPostgreSQL is

ArcSDE

Contains one master geometry table that defines the boundaries of the administrative units. The boundaries are used when visualizing the data.

ñ Using Databases views to connect geometry to other DB tables

ñ Complex Joins

ñ Data Export

ñ We are only storing the geometry once.

Page 29: Database-driven web mapping using jQuery, PHP, PostgreSQL ...€¦ · PostgreSQL . ŒEnterprise-level database ŒLeveraging the schemas ŒRelational database model ŒPostgreSQL is

Proxy & Security

Page 30: Database-driven web mapping using jQuery, PHP, PostgreSQL ...€¦ · PostgreSQL . ŒEnterprise-level database ŒLeveraging the schemas ŒRelational database model ŒPostgreSQL is

Code Examples

Page 31: Database-driven web mapping using jQuery, PHP, PostgreSQL ...€¦ · PostgreSQL . ŒEnterprise-level database ŒLeveraging the schemas ŒRelational database model ŒPostgreSQL is
Page 32: Database-driven web mapping using jQuery, PHP, PostgreSQL ...€¦ · PostgreSQL . ŒEnterprise-level database ŒLeveraging the schemas ŒRelational database model ŒPostgreSQL is

Thank You

Technical Contact [email protected] [email protected]

General Information [email protected]

http://geoglam-crop-monitor.org