Hands On

Displaying an Interactive Map with Python and Flask - Part 2

By Vidhan Bhonsle | 09 February 2020

Last week, we started integrating HERE maps into a Python Flask, which resulted in displaying a map. If you want to start from the very beginning or would like to revisit it, you can check it out here. Now, we are going to dig a bit deeper into it by adding features and functionalities to our map.

First of all, we will be re-using the code that we built in our previous blog, so you will need to go through it once.

Working with Raster

One of the basic ingredients in creating a map is defining how you want to see your map. HERE gives you an option of either fetching the map data in a vector or a raster format. Calling both of them is very simple, all you need to do is use the method - createDefaultLayers(), defined under the Platform class. You would have already done this in the previous blog, with the following code  -

vector.normal.map

We will now explore the Raster format. It gives you multiple choices of style (it is also easier to use), especially the satellite imagery. Let's check it out.     

We have three different map types - normal, satellite and terrain. Each contains a set of named layers - map, transit, xbase, base, and labels. We can combine them as shown in the table below -

Map Type/Layer map transit xbase base labels
normal

normal.map

normal.transit

normal.xbase

normal.base

normal.labels

satellite

satellite.map

NA

satellite.xbase

satellite.base

satellite.labels

transit

terrain.map

NA

terrain.xbase

terrain.base

terrain.labels

You can call all the map styles from the table, using raster and a dot followed by values in the table.

You can see how we used raster.terrain.map, similarly we can create different combinations from the table mentioned above. For more information on raster, you may visit the official page.

Making our Map Responsive 

The map we created is just an image, a static one, non-responsive to touches, taps and mouse clicks. There is no fun in a static image, what we are looking for instead, is some action, where we can do something with mouse clicks like looking around for different cities and countries. For this, we have the ‘events’ module. The best thing about the events module is that you don't need to write different code for different browsers on different platforms, it handles all the complexity for you. All you need to do is to use it and not worry about anything else. 

 How are we going to use it? By loading a module called ‘mapsjs-core.js’ in the <head> of HTML file -

Next, with the help of Map object, instantiate the MapEvents class and lastly, add an events listener to the map. This is how it will look like -

To see it working, after running the python code and opening the address http://127.0.0.1:5000, you will need to open Console on your browser. Which can be done by simply pressing 'ctrl+shit+I' and clicking on 'Console'.touch event

You can change parameters and see the effect, in map.addEventListener instead of ‘tap’ write ‘dbltap’ and see what you get.double tap touch event

So basically you can change the events as per your need and requirement. The Events module gives you the following events -

  • Pointer - pointerup, pointerdown, pointermove, pointerenter, pointerleave, pointercancel
  • Drag - dragstart, drag, dragend
  • Tap - tap, dbltap
  • Long Press - longpress

We can also have a full interaction like pan, zoom and pinch-to-zoom by adding only one line of code -

Adding controls and UI components to the Map

HERE provides ready-made map controls through the UI module named ‘mapsjs-ui.js’. All you have to do is add following in the in the <head> of HTML file of the existing code -

Now, we have added a CSS file link too, because we want our map to look appealing.

By adding just one line of code, we get a default UI and apart from zoom-in and zoom-out feature, we get a collection of default map layers.

If required, we can also add an info bubble that allows us to show a bubble at a particular position containing HTML content on the map. 

info bubble

You can explore the UI components further here.

The complete code with all the changes will look like this  -

This concludes our two parts tutorial on creating an interactive map with Python Flask.