Animate GMapPlot w/ Python/Bokeh
Question: I'm a very nooby programmer and this is my first Stack Overflow question. :)

So I'm trying to animate a car's trip on google maps using Python. I used
matplotlib at first and could get a dot animated over the path line... then I
tried using bokeh and successfully got the path to overlay on google maps...

My problem is that I haven't found a good way to do both (animate plot over
google maps).

My data is in the form of Lat/Long coordinates.

Any advice? Thanks in advance!

EDIT: Here's my code that does the gmapplot... I'd rather have this and no
animation than animation with no GMAP. My goal is to animate that "car" dot.

    
    
    import numpy as np
    from bokeh.io import output_file, show, vform
    from bokeh.models.widgets import Dropdown
    from bokeh.models import (GMapPlot, GMapOptions, ColumnDataSource, Line, Circle,
        DataRange1d, PanTool, WheelZoomTool, BoxSelectTool, HoverTool)
    
    data = np.genfromtxt('Desktop\Temp Data for Python\test data 3.csv', delimiter=',',
        names=True)
    
    map_options = GMapOptions(lat=np.average(data['Latitude']),
        lng=np.average(data['Longitude']), map_type="roadmap", zoom=13)
    
    plot = GMapPlot(x_range=DataRange1d(), y_range=DataRange1d(), map_options=map_options,
        title="My Drive")
    
    source = ColumnDataSource(data=dict(lat=data['Latitude'], lon=data['Longitude'],
        speed=data['GpsSpeed'],))
    
    path = Line(x="lon", y="lat", line_width = 2, line_color='blue')
    car = Circle(x=data['Longitude'][0], y=data['Latitude'][0], size=5, fill_color='red')
    
    plot.add_glyph(source, path)
    plot.add_glyph(source, car)
    plot.add_tools(PanTool(), WheelZoomTool(), BoxSelectTool(),
        HoverTool(tooltips=[("Speed", "@speed"),]))
    
    output_file("gmap_plot.html")
    show(plot)
    


Answer: This may not be exactly what you are looking for, but you could have a slider
widget that controls the position of your car dot. The slider example found in
the bokeh docs (or github repository, I can't remember) helped me when I
started using sliders.

Just so you are aware, I was having problems with latlng points showing up in
the correct locations. There is about a 10px offset. This is an open issue
(github issue 2964).

The following code currently is just producing a generic bokeh Figure, but in
theory, if you change it from a `Figure` to a `GMapPlot` it _should_ work. I
wasn't able to get this working with GMapPlots directly. I think this may be
because of github issue 3737. I can't even run the Austin example from the
bokeh docs.

Hopefully this is what you had in mind

    
    
    from bokeh.plotting import Figure, ColumnDataSource, show, vplot
    from bokeh.io import output_file
    from bokeh.models import (Slider, CustomJS, GMapPlot, 
                              GMapOptions, DataRange1d, Circle, Line)
    import numpy as np
    
    output_file("path.html")
    
    # Create path around roundabout
    r = 0.000192
    
    x1 = np.linspace(-1,1,100)*r
    x2 = np.linspace(1,-1,100)*r
    x = np.hstack((x1,x2))
    
    f = lambda x : np.sqrt(r**2 - x**2)
    
    y1 = f(x1)
    y2 = -f(x2)
    y = np.hstack((y1,y2))
    
    init_x = 40.233688
    init_y = -111.646784
    
    lon = init_x + x 
    lat = init_y + y
    
    # Initialize data sources.
    location = ColumnDataSource(data=dict(x=[lon[0]], y=[lat[0]]))
    path = ColumnDataSource(data=dict(x=lon, y=lat))
    
    # Initialize figure, path, and point
    """I haven't been able to verify that the GMapPlot code below works, but 
    this should be the right thing to do. The zoom may be totally wrong, 
    but my latlng points should be a path around a roundabout.
    """
    ##options = GMapOptions(lat=40.233681, lon=-111.646595, map_type="roadmap", zoom=15)
    ##fig = GMapPlot(x_range=DataRange1d(), y_range=DataRange1d(), map_options=options)
    
    fig = Figure(plot_height=600, plot_width=600)
    
    c = Circle(x='x', y='y', size=10)
    p = Line(x='x', y='y')
    
    fig.add_glyph(location, c)
    fig.add_glyph(path, p)
    
    # Slider callback
    callback = CustomJS(args=dict(location=location, path=path), code="""
        var loc = location.get('data');
        var p = path.get('data');
    
        t = cb_obj.get('value');
    
        /* set the point location to the path location that
           corresponds to the slider position */
        loc['x'][0] = p['x'][t];
        loc['y'][0] = p['y'][t];
    
        location.trigger('change');
    """)
    
    # The way I have written this, 'start' has to be 0 and 
    #  'end' has to be the length of the array of path points.
    slider = Slider(start=0, end=200, step=1, callback=callback)
    
    show(vplot(fig, slider))
    

