Using Bing Maps with Flask

I’m working on a project that involves mapping and line segments.

It turns out that using the Mapping libraries of Bing and Google make this really easy.
You create ‘polylines’ out of coordinates and colors.

Check out Microsoft Maps documentation for more info and the dev page to sign up for a key.

In this example I’m using AJAX requests.

And this documentation is great for using Azure Tables
And the home directory for Python Azure Table Usage

I was struggling with pulling the data from a Database using flask and serving it to the client for an Ajax request.
The end goal is a heat map of sorts with paths being mapped and colors being changed for certain conditions.

I’m still working out the best practices for this, but its working! So take it with a grain of salt.

The code for this project can be found here: http://github.com/timmyreilly/BumpyRoads

After a couple days of tinkering, the main pieces of code that lit this up are as follows.

Get the data from the Azure Table Storage and convert it to a list

# First connect to Azure Table Service 
def connect_to_service():
    table_service = TableService(account_name=STORAGE_ACCOUNT_NAME, account_key=TABLE_STORAGE_KEY)
    print TableService
    return table_service 

# Grab the data from our table
def get_table_list(table_service=connect_to_service(), max=10, table_name='test', partitionKey='default'):
    x = table_service.query_entities(table_name)
    #print(x)
    return x 

# return it as a list  * see below for bonus on selecting color codes 
def get_json_list(entity_list=get_table_list()):
    '''
    Takes azure table list and returns json list 
    '''
    i = 0 
    response = [] 
    for r in entity_list:
        c = convert_color_key_to_rgb(int(entity_list[i].colorKey))
        t = (entity_list[i].latA, entity_list[i].longA, entity_list[i].latB, entity_list[i].longB, entity_list[i].colorKey, c[0], c[1], c[2])
        response.append(t)
        i += 1 
    # print response 
    return response 

* BONUS to manage color codes nicely I found this neat way of doing switch statements using dictionaries.

def convert_color_key_to_rgb(colorKey):
    return {
        0: [100, 100, 100], 
        1: [240, 0, 255],
        2: [0, 0, 255],
        3: [0, 255, 0],
        4: [255, 255, 0],
        5: [255, 85, 0],
        6: [255, 0, 0],
    }.get(colorKey, [100, 100, 100] )

Take that list and pass it as JSON to a template.
Still not sure if this is best practice, as on the client/javascript side it picks it up as an array object.
But this is the route we use in flask to send our data.

@app.route('/d')
def binged():   
    data = get_json_list()
    jdata = json.dumps(data)
    return render_template(
        'binged.html',
        data=jdata,
        key=token 
    )

On the template side iterate through the given array object and build and push polylines.
This was the toughest part for me to

 var map = null;
         function GetMap()
         {             
            var y = JSON.parse('{{ data|safe }}');
            // Initialize the map
            
            map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{
                credentials:"{{ key }}",
                center: new Microsoft.Maps.Location(y[0][0],y[0][1]), 
                zoom: 10
                }); 
                       
           console.log(y);
           
           for( index = 0; index < y.length; index++ ){
               lOne = new Microsoft.Maps.Location(y[index][0], y[index][1]);
               lTwo = new Microsoft.Maps.Location(y[index][2], y[index][3]);
               //console.log(lOne);
               var lineV = new Array(lOne, lTwo);
               //console.log(y[index][4])
               var pLine = new Microsoft.Maps.Polyline(lineV, {
                   strokeColor: new Microsoft.Maps.Color(y[index][5], y[index][6], y[index][7], 100),
                   strokeThickness: 3
               });
               map.entities.push(pLine)
           }
 }

Now when I run this project locally I get something that looks like this:

Soon they won't be random.
Soon they won’t be random.

If you want to give it a shot, check out the instructions/source code on github

Feel free to reach out if you have any questions or would like to work together on a project like this.

Groovy
Groovy