Leaflet, Flask, and MongoDB for an Easy and Fun Web Mapping Experience


Presented by:

Steven Pousty

@TheSteve0 on Twitter, Ingress, SmugMug, IRC, and Github


  1. A little about MongoDB Spatial
  2. A little about Flask
  3. A little about Leaflet.js
  4. Learn a bit about PaaS
  5. Make a cool mapping app


  1. You have worked with data
  2. You write some Python and JS code
  3. You will ask questions

What's the scenario

  • We work for a Vendor that sells souvenirs at National Parks in the United States and Canada
  • We are making a check in service to help drive traffic to our stands
  • We want FOSS on the whole stack - NO LOCK IN
  • Due next week
  • By the end of this talk you can build this!



    On to Mongo


    A bit about MongoDB

    • A document is just a bunch of attributes and values - think of it like HashMap
    • Can be nested - helps avoid joins
    • Schemaless
    • Really good at fast writes - but you give up immediate consistency
    • Easy to horizontally scale

    Now some spatial

    The spatial functionality Mongo currently has is:

    1. Near ($near)
    2. Containment ($geoWithin)
    3. Intersection ($geoIntersects )

    Two types of indices:

    1. 2d - for flat surfaces
    2. 2dsphere - helps with coords on an earth like sphere

    Good to Know

    How do you make it work

    1a. Put coordinates into an array

    { loc : [ 50 , 30 ] }    
        If you use lattitude and longitude with a default index 
               make sure to put [lon, lat]

    1b. Put coordinates in a GeoJSON format

    { loc : { type : "Point" ,
          coordinates : [ 40, 5 ]

    Make it work (cont.)

    2a. Make a 2DSphere index

    				    	db.places.ensureIndex( { loc : "2dsphere" } )
    				    	can be a compound index

    2b. Make a 2D index

    				    	db.places.ensureIndex( { loc : "2d" } )

    On to Flask



    1. The “micro” in microframework means Flask aims to keep the core simple but extensible
    2. Great Documenation
    3. Excellent for building REST services with annotations for path mapping
    4. If you still believe in Server-Side HTML, you can do Jinja templating

    Some examples

    @app.route('/user/') def show_user_profile(username): # show the user profile for that user return 'User %s' % username @app.route('/post/') def show_post(post_id): # show the post with the given id, the id is an integer return 'Post %d' % post_id @app.route('/login', methods=['GET', 'POST']) def login(): if request.method == 'POST': do_the_login() else: show_the_login_form()

    Time for Leaflet


    Quick into

    1. Lighweight JS client side library for doing great maps
    2. Works out of the box with OpenStreetMap (OSM) - as well as others
    3. Mobile ready
    4. Has a rich library of Plugins

    Enough Talk - CODE!


    Bring it up fast!


    How ya feeling?


    Let's wrap it up

    1. Spatial is easy and fun with MongoDB, Flask, & Leaflet
    2. Openshift makes life great for you
    3. You can do all this for free in a matter of minutes
    4. The price ($0) makes it so you can do this for any projet you want
    5. @ghaff - So simple even a marketing person can do it :-) http://wwos-bitmason.rhcloud.com

    Come hang out with us:
    #openshift on freenode irc