Bokeh CustomJS coordinate transformation

Eric_Johnson · June 16, 2021, 10:27pm

Having data in Web Mercator is less than ideal, but doing calculations would be easier if you can import a javascript library like Proj4js: (javascript - Convert X,Y pixel to Longitude and Latitude - Stack Overflow)

Is there a way to import that javascript library in a callback so calculations could at least be done in EPSG 4326, or a cartesian coordinate system?

Bryan · June 17, 2021, 8:15pm

Bokeh vendors proj4 you can find an example of using it in a CustomJS here:

github.com

bokeh/bokeh/blob/branch-2.4/examples/plotting/file/customjs_hover.py

from bokeh.io import output_file, show
from bokeh.models import CustomJSHover, HoverTool
from bokeh.plotting import figure
from bokeh.tile_providers import CARTODBPOSITRON, get_provider

output_file("customjs_hover.html")

# range bounds supplied in web mercator coordinates
p = figure(x_range=(-2000000, 6000000), y_range=(-1000000, 7000000),
           x_axis_type="mercator", y_axis_type="mercator")
p.add_tile(get_provider(CARTODBPOSITRON))

p.circle(x=[0, 2000000, 4000000], y=[4000000, 2000000, 0], size=30)

code = """
    const projections = Bokeh.require("core/util/projections");
    const x = special_vars.x
    const y = special_vars.y
    const coords = projections.wgs84_mercator.invert(x, y)
    return coords[%d].toFixed(2)

This file has been truncated. show original

Eric_Johnson · June 20, 2021, 3:47am

Thanks Bryan, thats great.