When changing the color through the given widget first, the plot distorts. When first moving the map with the cursor and then changing the color, the plot does not distort. This only happens when a tile background is added. Thus the problem might lay in a difference in the underlaying projection / CRS of the plot and the tile that somehow gets changed in the background (?).
If you are able to find the problem, it would be great if you could also link to resources how you did that so I learn how to debug more in depth.
My browser: Brave (Chromium based)
Simple working example: props to bigreddot as this working example is mostly based on his answer.
from bokeh.layouts import grid
from bokeh.models.widgets.inputs import ColorPicker
from bokeh.sampledata import us_states
from bokeh.plotting import *
from bokeh.tile_providers import get_provider, CARTODBPOSITRON
us_states = us_states.data.copy()
del us_states["HI"]
del us_states["AK"]
# separate latitude and longitude points for the borders
# of the states.
state_xs = [us_states[code]["lons"] for code in us_states]
state_ys = [us_states[code]["lats"] for code in us_states]
# init figure
p = figure(title="Plotting Points Example: The 5 Largest Cities in Texas",
toolbar_location="left", plot_width=1100, plot_height=700)
p.xgrid.grid_line_color = None
p.ygrid.grid_line_color = None
# Draw state lines
p.patches(state_xs, state_ys, fill_alpha=0.0,
line_color="#884444", line_width=1.5)
# Latitude and Longitude of 5 Cities
# ------------------------------------
# Austin, TX -------30.26° N, 97.74° W
# Dallas, TX -------32.77° N, 96.79° W
# Fort Worth, TX ---32.75° N, 97.33° W
# Houston, TX ------29.76° N, 95.36° W
# San Antonio, TX --29.42° N, 98.49° W
# Now group these values together into a lists of x (longitude) and y (latitude)
x = [-97.7431, -96.79, -97.33, -95.36, -98.49]
y = [30.26, 32.77, 32.75, 29.76, 29.42]
# add basemap and labels
tile_provider = get_provider(CARTODBPOSITRON)
p.add_tile(tile_provider)
points = p.circle(x, y, size=8, color='navy', alpha=1)
picker = ColorPicker(title=f"Point Color", color="navy")
picker.js_link("color", points.glyph, "fill_color")
# output to static HTML file
output_file("texas.html")
l = grid([p, picker], ncols=2, sizing_mode="fixed")
# show results
show(l)
The display via the grid is not the problem - it also occurs if you display the plot via:
show(column([p, picker]))