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:
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.
