Just wanted to share an example of how to use Template with param classes.
Let me know if there’s a better way to include the template in the param class (e.g. if there’s a built-in way template=‘React’)
This combines code from https://panel.holoviz.org/user_guide/Param.html and https://panel.holoviz.org/reference/templates/React.html#templates-gallery-react
import panel as pn
import param
pn.extension()
pn.config.sizing_mode = 'stretch_both'
class GoogleMapViewer(param.Parameterized):
continent = param.ObjectSelector(default='Asia', objects=['Africa', 'Asia', 'Europe'])
country = param.ObjectSelector(default='China', objects=['China', 'Thailand', 'Japan'])
_countries = {'Africa': ['Ghana', 'Togo', 'South Africa', 'Tanzania'],
'Asia' : ['China', 'Thailand', 'Japan'],
'Europe': ['Austria', 'Bulgaria', 'Greece', 'Portugal', 'Switzerland']}
@param.depends('continent', watch=True)
def _update_countries(self):
countries = self._countries[self.continent]
self.param['country'].objects = countries
self.country = countries[0]
@param.depends('country')
def view(self):
iframe = """
<iframe width="100%" height="400px" src="https://maps.google.com/maps?q={country}&z=6&output=embed"
frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
""".format(country=self.country)
return pn.pane.HTML(iframe, sizing_mode='stretch_both')
viewer = GoogleMapViewer(name='Google Map Viewer')
react = pn.template.ReactTemplate()
react.sidebar.append(viewer.param)
react.main[:, :] = viewer.view
react.servable()