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.


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 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 Put the following code inside the file:

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

app = flask.Flask(__name__)

def my_maps():

  mapbox_access_token = 'YOUR ACCESS TOKEN HERE'

  return render_template('index.html',

if __name__ == '__main__':

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:

|--- templates
        |-- index.html

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

You are almost done, Open 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:


 * Restarting with windowsapi reloader
 - Debugger is active!
 - Debugger PIN: 294-153-011
 - Running on (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',


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

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


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.