-
-
Save anthonydouc/50c74f84fe298570cd7b129300a75cf5 to your computer and use it in GitHub Desktop.
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) |
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.
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.
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.
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