Hands On

Displaying an Interactive Map with Python and Flask - Part 1

By Vidhan Bhonsle | 27 January 2020

Try HERE Maps

Create a free API key to build location-aware apps and services.

Get Started

When you look at the past year’s trends, you will find that the developers and companies are increasingly adopting Python. In fact, it's the fastest-growing programming language! The reasons for this is simple, Python is one of the easiest language to learn and yet powerful enough to perform modern age development tasks like Automation, Web Development, Digital Transformation, Cloud Computing, Internet of Things, Machine Learning, Artificial Intelligence and many more.

One of the most sought-after vertical today is Location Awareness and Analytics, as many application in our life needs a location component. For instance, take any application on your mobile phone and it has most likely asked for your location. Now, imagine what can be achieved by combining the most powerful language (Python) and highly in demand capability (location awareness). This blog post provides the first steps towards a location-powered Python application. So what are we doing here? We are creating a simple Python Flask App for displaying HERE Map on a browser in an HTML page.

Prerequisites

Python must be installed on your system and you require a Freemium account on developer.here.com.

You will also need an API Key from the Developer Portal (which we will use in the code). Simply sign up for your free account and generate API key on your account page.

Writing Python Code for Web Development

For seamless integration of Python with an HTML page we use Python based web frameworks, here we are using Flask, which is a simple and powerful micro-framework for web application development in Python.

Flask as a library can be downloaded using the following command:

pip install flask

Write the following code in a new python file:

The above code represents a simple flask template in which we have imported two sub-packages of flask, viz., Flask and render_template. Also, we have created a function called the “map_func”. This function returns a Jinja2 html page.

A HTML file will be required to show the Map on the browser. For this, we need to create an HTML file in a folder called “templates”, and then name the file as “map.html”.

In the <head> of HTML file, add the following <script> elements to load the API code libraries:

After this, we need to initialize the communication with the back-end services and initialize the map in the <body> of HTML inside the <script>:

You can find detailed explanation of platform object and map object here.

The complete HTML code looks like this:

Running the code

Open the command prompt or terminal and run the Python code. Alternatively, you can also run code in the IDE like Spyder, PyCharm, etc.

cmd

An IP address will appear, http://127.0.0.1:5000.

Copy this address and paste it in any of the browser application (Chrome, Mozilla, Internet Explorer, Safari, etc.) and you will see a HERE Map with the specified Latitude and Longitude!

map-3

Conclusion

You saw how to integrate HERE Map in Python with the help of the web micro-framework, Flask. Of course this is just the start, but we are well on our way towards exciting use cases such as asset tracking, logistic solutions, delivery tracking, UAV route mapping and many more. In the next part we will be diving deeper into HERE Maps. Stay tuned!