Skip to content

Instantly share code, notes, and snippets.

@anthonydouc
Last active February 3, 2018 23:10
Show Gist options
  • Save anthonydouc/50c74f84fe298570cd7b129300a75cf5 to your computer and use it in GitHub Desktop.
Save anthonydouc/50c74f84fe298570cd7b129300a75cf5 to your computer and use it in GitHub Desktop.
Bokeh google maps, with labels, patches and circles.
from bokeh.io import output_file, show
from bokeh.models import (
GMapPlot, GMapOptions, ColumnDataSource, Circle,Patches, LabelSet, HoverTool,
TapTool,Range1d, PanTool, WheelZoomTool, BoxSelectTool,OpenURL
)
map_options = GMapOptions(lat=30.29, lng=-97.73, map_type="roadmap", zoom=11)
plot = GMapPlot(x_range=Range1d(), y_range=Range1d(), map_options=map_options,tools=[HoverTool(),TapTool()])
plot.title.text = "Austin"
# For GMaps to function, Google requires you obtain and enable an API key:
#
# https://developers.google.com/maps/documentation/javascript/get-api-key
#
# Replace the value below with your personal API key:
plot.api_key = "api_key"
source = ColumnDataSource(
data=dict(
lat=[30.29, 30.20, 30.29],
lon=[-97.70, -97.74, -97.78],
names=['a-label','b-label','c-label']
)
)
source2 = ColumnDataSource(
data=dict(
lat=[[30.29, 30.20, 30.29],[30.39, 30.29, 30.39]],
lon=[[-97.70, -97.74, -97.78],[-97.70, -97.74, -97.78]],
urls=['https://www.amazon.com','https://www.google.com']
)
)
circle = Circle(x="lon", y="lat", size=15, fill_color="blue", fill_alpha=0.8, line_color=None)
plot.add_glyph(source, circle)
patch = Patches(xs="lon", ys="lat", fill_color="blue", fill_alpha=0.8, line_color=None)
plot.add_glyph(source2, patch)
# renders - patch added second so assuming patch renderer is the second element
rends = plot.renderers
# define glyph to appear on hover
patch_hov = Patches(xs="lon", ys="lat", fill_color="green", fill_alpha=0.8, line_color=None)
# set hover glyph
rends[1].hover_glyph = patch_hov
# set taptool callback
taptool = plot.select(type=TapTool)
taptool.callback = OpenURL(url='@urls')
labels = LabelSet(x='lon', y='lat', text='names', level='glyph',
x_offset=5, y_offset=5, source=source, render_mode='canvas')
plot.add_layout(labels)
plot.add_tools(PanTool(), WheelZoomTool(), BoxSelectTool())
output_file("gmap_plot.html")
show(plot)
@nitinsaroha
Copy link

nitinsaroha commented Feb 1, 2018

I tried your method with my API Key. But didn't work for me.

https://gist.github.com/nitinsaroha/a55e28688fb56915950760ef74b0ea27

This link contains all my code containing source. Maybe you can edit my code and show me.

Thanks for the help

@anthonydouc
Copy link
Author

Which version of bokeh are you using, and what browser?

I have tested with bokeh versions 0.12.10 and 0.12.13, and it works on chrome.

@nitinsaroha
Copy link

nitinsaroha commented Feb 1, 2018

I have 0.12.13. So, your code works, but when I try do it in my code (link - https://gist.github.com/nitinsaroha/a55e28688fb56915950760ef74b0ea27 ) it doesn't. Here is the image of how it looks.
I have a tool tip also which shows some data for each region or patch.

gmap_plot

@anthonydouc
Copy link
Author

I cannot reproduce the example you have shown me above, since I do not have access to the input data. However on a brief inspection you have defined two datasources; source and source1. The x and y fields of both of those are the same objects, and since the patches are working I am assuming you have put in lists of lists?

That works for patches, however the labelset needs specific points as in the example above - you need to calculate the center of each polygon and associate that with the specific label.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment