2d web mapping with flask

37
FREE OPEN SOURCE SOFTWARE FOR GEOSPATIAL (FOSS4G) TALKS AND DEMOS 2 ND PHILIPPINE GEOMATICS SYMPOSIUM 1 CHARMYNE BUENVIAJE MAMADOR

Upload: chammie-mamador

Post on 23-Jan-2015

686 views

Category:

Technology


1 download

DESCRIPTION

An intro presentation on making your own web mapping application using basic knowledge in html, css, jquery (Leaflet.js), and python using Flask microframework.

TRANSCRIPT

Page 1: 2d web mapping with flask

FREE OPEN SOURCE SOFTWARE FOR GEOSPATIAL (FOSS4G) TALKS AND DEMOS

2ND PHILIPPINE GEOMATICS SYMPOSIUM

1

CHARMYNE BUENVIAJE MAMADOR

Page 2: 2d web mapping with flask

Outline

2

Page 3: 2d web mapping with flask

Web Mapping3

Page 4: 2d web mapping with flask

Web Mapping

4

Page 5: 2d web mapping with flask

5

Page 6: 2d web mapping with flask

Why Web Mapping?6

Page 7: 2d web mapping with flask

7

Page 8: 2d web mapping with flask

8

Page 9: 2d web mapping with flask

9

Page 10: 2d web mapping with flask

Creating Web Maps• WEB SERVICES“a program is used to dispense or take info on the web”

10

Page 11: 2d web mapping with flask

Creating Web Maps• WEB FRAMEWORKS“supports web applications through the use of computer languages”

11

Page 12: 2d web mapping with flask

Web Frameworks

print ‘Hello World!’

12

Page 13: 2d web mapping with flask

13

Page 14: 2d web mapping with flask

Advantages of Web Frameworks

• Efficiency• Security• Cost• Support• Flexibility and Customizability

14

Page 15: 2d web mapping with flask

Kinds of Web Frameworks

FULL STACK

BASIC STACK

15

Page 16: 2d web mapping with flask

Language for frameworks

16

Page 17: 2d web mapping with flask

Readabilityif grade >= 60:

print “Pasado!”else:

print “See you next sem!”

http://www.python.org/dev/peps/pep-0008/

17

Page 18: 2d web mapping with flask

Simple Syntax

Variety of Libraries and Packages• Libraries - Many were already built in.• http://docs.python.org/2/library/index.html

• Packages – 37091 packages and counting.• https://pypi.python.org/pypi

18

Page 19: 2d web mapping with flask

POWERFUL

Documentedhttp://www.python.org/doc/

19

Page 20: 2d web mapping with flask

https://wiki.python.org/moin/WebFrameworks

20

Page 21: 2d web mapping with flask

FLASK21

Page 22: 2d web mapping with flask

What is Flask?

22

Page 23: 2d web mapping with flask

• Created by Armin Ronacher

23

Page 24: 2d web mapping with flask

Microframework

24

Page 25: 2d web mapping with flask

25

Page 26: 2d web mapping with flask

“Jinja2 is a modern and designer friendly templating language for Python.”

jinja.pocoo.org

26

Page 27: 2d web mapping with flask

Templating… …involves the presentation of information in a form which is

often (but not always) intended to be readable, even attractive, to a

human audience. (https://wiki.python.org/moin/Templating)

27

Page 28: 2d web mapping with flask

“a simple collection of various utilities for WSGI applications

and has become one of the most advanced WSGI utility modules.”

28

Page 29: 2d web mapping with flask

Advantages of Flask• Simple • Smaller Scale •A good introduction to web

frameworks• Easier deployment and

development

29

Page 30: 2d web mapping with flask

Webmapping in Flask( oh yeah! We’re almost there! )

30

Page 31: 2d web mapping with flask

The Recipe

31

Page 32: 2d web mapping with flask

32

Page 33: 2d web mapping with flask

File Structure

33

Page 34: 2d web mapping with flask

Flask Extensions

http://flask.pocoo.org/extensions/

34

Page 35: 2d web mapping with flask

leaflet : http://farm9.staticflickr.com/8032/8033050281_a8b4969d88_b.jpgyolanda map : http://google.org/crisismap/a/gmail.com/TyphoonYolandaadvantages of web Mapping : https://sites.google.com/site/mapmakerpedia/maps-101/web-mappinginteraksyon : http://mmdatraffic.interaksyon.com/map-view-edsa.phpnoah: http://noah.dost.gov.ph/CODEigniter : http://php.quicoto.com/wp-content/uploads/2013/07/codeigniter-logo.pngweb : http://files.myopera.com/barriocreaaiep/albums/3389982/WEB.pngPYTHON LOGO: http://slicer.org/slicerWiki/images/3/31/Python-logo.pngRECYCLE IMAGE: http://www.tamborinedailystar.com/Portals/0/tdsPhotos/2010.11.15/recycleArrows_MC910216333.PNGgoogle logo : http://www.seomofo.com/downloads/new-google-logo-knockoff.pngyahoo logo: http://davidbcalhoun.com/present/css3/pix/yahoo_logo.pngnasa logo : http://radiofreethinker.files.wordpress.com/2012/03/nasa_logo.gifjinja2 logo: http://www.viur.is/static/images/jinja2.pngwerkzeug logo: http://www.pocoo.org/_images/werkzeug-logo.pngspiderweb : http://dark.pozadia.org/images/wallpapers/6-1024x768-272625.jpegdora's bag : http://th01.deviantart.net/fs71/PRE/i/2012/130/a/c/the_backpack_from_dora_the_explorer_by_shadowh511-d4zawjc.png

35

Page 36: 2d web mapping with flask

Audrey Roy. “Python tricks you can’t live without”. PYCON PHILIPPINES 2012

Igor Davydenko. “In Flask we trust”. PyCon UA 2012

http://flask.pocoo.org/

36

Disclaimer:All the images here were awesome and were not mine. The images were used to ease understanding and help the audience appreciate the presentation more. Sharing is cool!

Page 37: 2d web mapping with flask

37

Thank you!

Charmyne Buenviaje [email protected]