display multiple images and pixel position on mouse over


I’m trying to learn how to use booked to display raster images.

The idea is to build a lightweight map-canvas for georeferenced images.

I’m using bokeh 0.12 built from the git master branch.

I tried to set up an example

from bokeh.plotting import figure, show, ColumnDataSource
from [bokeh.io](http://bokeh.io) import output_notebook
from bokeh.models.tools import BoxZoomTool
from bokeh.models.widgets import Panel, Tabs
from bokeh.models import CustomJS, HoverTool


# img size in pixel: [x:3392, y:701]


Callback function adapted from:


to capture mouse position

s = ColumnDataSource(data = dict(x=[0,3392], y=[0,701]))

callback = CustomJS(args=dict(s=s), code="""
        var geometry = cb_data['geometry'];
        var x_data = geometry.x; // current mouse x position in plot coordinates
        var y_data = geometry.y; // current mouse y position in plot coordinates
        console.log("(x,y)=" + x_data+","+y_data); //monitors values in Javascript console
        var x = s.get('data')['x'];
        var y = s.get('data')['y'];
        x[0] = x_data;
        y[0] = y_data;

hover_tool = HoverTool(callback=callback)

TOOLS = 'pan,crosshair,reset,wheel_zoom,undo,redo’

p = figure(x_range=(0,3392), y_range=(3392,0), tools=TOOLS, webgl=True)

add zoom with same ratio on both axis


add first image

p.image_url(url=['http://epinux.com/bathy.png’], x=0.0, y=0.0, w=3392, h=700)

add second image

p.image_url(url=['http://epinux.com/fluidfactor1m.jpg’], x=0.0, y=0.0, w=3392, h=700)

My issues:

  • How can switch between the 2 plots? (ideally adding a check-box to add/remove each image)
  • The actual callblack will print in the js console the x,y mouse position on the image. How can I have those information printed on a given position of the plot (e.g.: lower right) ?

I’m trying to use the HoverTool.tooltips to redirect the x,y value from the console directly in a tooltip, but I can’t mange to have it working.

Thanks for any help!