Flask is a web framework. It provides you with tools, libraries and technologies that allow you to quickly build a web application.
pip install flask
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)
Go to your mapbox account, Under the “Add Mapbox to your app or website”,
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
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).
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:
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.