#GMapPlot #ImageURL 【How to add image marker to GMapPlot object?】

I was trying to follow this example here to plot a location on Google Map:

http://bokeh.pydata.org/en/0.11.1/docs/user_guide/geo.html

I want to replace the circle object with my own image. I tried add_glyph and ImageURL.

The output won’t show the image.

Please see my code below :

···

from bokeh.io import output_file, show

from bokeh.plotting import figure, output_file

from bokeh.models import ImageSource, ImageURL

from bokeh.models import (

GMapPlot, GMapOptions, ColumnDataSource, Circle, DataRange1d, PanTool, WheelZoomTool, BoxSelectTool

)

==================================================

Plot the House location on the Map

==================================================

HOUSE_INFO = {‘lat’:37.4044647,‘lon’:-122.1037402}

Google Maps now requires an API key. You can find out how to get one here:

https://developers.google.com/maps/documentation/javascript/get-api-key

GOOGLE_API_KEY = “XXXXXXXXXXXXXXXXXXXXXXXXX”

==================================================

==================================================

JSON style string taken from: https://snazzymaps.com/style/1/pale-dawn

map_options = GMapOptions(lat=HOUSE_INFO[‘lat’], lng=HOUSE_INFO[‘lon’], map_type=“roadmap”, zoom=13, styles="""

[{“featureType”:“administrative”,“elementType”:“all”,“stylers”:[{“visibility”:“on”},{“lightness”:33}]},{“featureType”:“landscape”,“elementType”:“all”,“stylers”:[{“color”:"#f2e5d4"}]},{“featureType”:“poi.park”,“elementType”:“geometry”,“stylers”:[{“color”:"#c5dac6"}]},{“featureType”:“poi.park”,“elementType”:“labels”,“stylers”:[{“visibility”:“on”},{“lightness”:20}]},{“featureType”:“road”,“elementType”:“all”,“stylers”:[{“lightness”:20}]},{“featureType”:“road.highway”,“elementType”:“geometry”,“stylers”:[{“color”:"#c5c6c6"}]},{“featureType”:“road.arterial”,“elementType”:“geometry”,“stylers”:[{“color”:"#e4d7c6"}]},{“featureType”:“road.local”,“elementType”:“geometry”,“stylers”:[{“color”:"#fbfaf7"}]},{“featureType”:“water”,“elementType”:“all”,“stylers”:[{“visibility”:“on”},{“color”:"#acbcc9"}]}]

“”")

plot = GMapPlot(

x_range=DataRange1d(), y_range=DataRange1d(), 

map_options=map_options, api_key=GOOGLE_API_KEY, 

toolbar_location=None, plot_width=1000, plot_height=500

)

draw markers on the map

source = ColumnDataSource(

data=dict(

    lat=[HOUSE_INFO['lat']],

    lon=[HOUSE_INFO['lon']],

    url = ["[http://bokeh.pydata.org/en/latest/_static/images/logo.png](http://bokeh.pydata.org/en/latest/_static/images/logo.png)"]

)

)

#image marker

img = ImageURL(url=‘url’,x=‘lat’,y=‘lon’)

plot.add_glyph(source, img)

#circile marker

circle = Circle(x=“lon”, y=“lat”, size=16, fill_color=“blue”, fill_alpha=0.8, line_color=None)

plot.add_glyph(source,circle)