How to Add Maps to Flask Web App with Mapbox


How to Add Maps to Flask Web App with Mapbox Author: Mohammad Amaan Abbasi | July 16, 2018

In this post we'll build a simple web-app in Flask and add an interactive map to it with the Mapbox Maps API.

Requirements


Mapbox GL JS


Mapbox GL JS is a JavaScript library that uses WebGL to render interactive maps. You can sign up for it here.

Flask


Flask is a web framework. It provides you with tools, libraries and technologies that allow you to quickly build a web application.

Installing dependencies


  • pip install flask

Getting Started


Once you are done with the installation, Create a directory and cd into it, then create a file, call it app.py. Put the following code inside the file:

import flask
from flask import request, url_for, render_template, redirect


app = flask.Flask(__name__)

@app.route('/',methods=['GET','POST'])
def my_maps():

  mapbox_access_token = 'YOUR ACCESS TOKEN HERE'

  return render_template('index.html',
        mapbox_access_token=mapbox_access_token)

if __name__ == '__main__':
    app.run(debug=True)

Get the token


Go to your mapbox account, Under the “Add Mapbox to your app or website”,

  • Click on “JS web” option.
  • Choose “Use the Mapbox CDN” for the installation method.

After you have done that, You will probably get some default code and an access token, you only need the access token.

Now, its the time to create the frontend for your application. Create a directory called templates and cd into that. Then create a html file, name it index.html.
Make sure your file structure look like the following:

root
|--- app.py
|--- templates
        |-- index.html

Copy and paste the following code to your index.html file, and save it.

You are almost done, Open views.py and in the place of ‘YOUR ACCESS TOKEN HERE’ paste your access token:

mapbox_access_token = 'p**********************************************kw'

Open up command prompt from your root directory and run the app:

python app.py

 * Restarting with windowsapi reloader
 - Debugger is active!
 - Debugger PIN: 294-153-011
 - Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

Go to local host.

Voila! We’ve got a live, interactive 3d map!(Hopefully).

Customizing the Map


We can modify the map by changing the parameters for the style, zoom level, location, and many other features.

At the bottom of the page, There are two input fields for longitude and latitude, Which specify a location. Adjust those to see a place of your interest. You can use google to find the longitude and latitude of a place.

You can also get satellite image data, go to the index.html file and change the following line:

style: 'mapbox://styles/mapbox/streets-v10',

to

style: 'mapbox://styles/mapbox/satellite-streets-v10',

Refresh localhost:5000. Now the map will show a satillite view with streets overlay.

Summary


We built a simple web app using Flask and Mapbox map api to render interactive maps along with 3D buildings. We also customized some parameters to get a satellite image of the map.

There is a lot that you can do with it, we have just scratched the surface of this brilliant service. Definitely check the documentation to add more features to your app.