hello
I’m writing the code for a geodata visualization tool to be displayed on a web platform hosted in Heroku.
I’m having reasonable succes but now I want to make my layout responsive to the screen size but I’m not able to do It when I use Dmaps to display my data
It works like this:
I have 2 scenarios to display a past scenario and a future scenario, both of these scanarios works as a association of different hvplot combined in a overlay… When I press the button the system checks to see with button was pressed and return the correspondent overlay
I also use a RangeXY stream to capture the current zoom lvl of the map in order for it to not reset the zoom every time the button is pressed
To buid this I used the Param componente and a Dmap in order for the application to become faster
It is working as intended but I can’t adjust the dimensions of the Dmap component in order for it to become responsive (I always get the message “WARNING:param.OverlayPlot174008: responsive mode could not be enabled because fixed width and height were specified.”), so my problem is simply that I want to be capable of togging on the “Responsive = True” option on my dmap but for some reason that I don’t understand I’m uncapable of doing it
a sample of my solution can be viewed at this website: http://sedecteste.herokuapp.com/
and the source code alongside the files used in the code can be accessed at GitHub - ArthurDF/SEDEC-RN: Repositório de Teste para projeto SEDEC-RN de estratégias locacionais (run the code “final.py”)
bellow is the same code contained in tha file final.py in my github (sorry for sending the whole code but I just don’t understand exactly where I messed up) I suspect it has something to do with the RangeXY Stream but don’t know exactly how
import panel as pn
import numpy as np
import holoviews as hv
from holoviews import streams
import param
import math
import spatialpandas as spd
import geopandas as gpd
from custom_hoover import *
hv.extension('bokeh')
pn.extension(sizing_mode = 'stretch_width')
bootstrap = pn.template.BootstrapTemplate(title='Visualizador de Mapa')
class AppTest(param.Parameterized):
add_linha = 'C:\\Arthur\\CDEC\\Parte 2\\Dados\\Rotas\\presente\\presente.shp'
add_rest = 'C:\\Arthur\\CDEC\\Parte 2\\Dados\\restrições\\restrições.shp'
parques_add = 'C:\\Arthur\\CDEC\\Parte 2\\Dados\\Centroide dos parques\\CENTROIDE_DOS_PARQUES.shp'
rotas_presente_add = 'C:\\Arthur\\CDEC\\Parte 2\\Dados\\Rotas\\presente\\presente.shp'
add_subestacao_presente = 'C:\\Arthur\\CDEC\\Parte 2\\Dados\\Subestacao\\Subestações___Base_Existente.shp'
rotas_futuro_add ='C:\\Arthur\\CDEC\\Parte 2\\Dados\\Rotas\\futuro\\futuro.shp'
add_subestacao_futuro = 'C:\\Arthur\\CDEC\\Parte 2\\Dados\\Subestacao\\Subestações___planejado.shp'
add_mapa_presente = r'C:\Arthur\CDEC\Parte 2\Dados\Mapa Adequabilidade\mapa_adequabilidade_cenario_presente.tif'
add_mapa_futuro = r'C:\Arthur\CDEC\Parte 2\Dados\Mapa Adequabilidade\mapa_adequabilidade_cenario_futuro.tif'
'''
add_linha = '~/Dados/Rotas/presente/presente.shp'
add_rest = '~/Dados/restrições/restrições.shp'
parques_add = '~/Dados/centroide parque/CENTROIDE_DOS_PARQUES.shp'
rotas_presente_add = '~/Dados/Rotas/presente/presente.shp'
add_subestacao_presente = '~/Dados/Subestacao/Subestações___Base_Existente.shp'
rotas_futuro_add ='~/Dados/Rotas/futuro/futuro.shp'
add_subestacao_futuro = '~/Dados/Subestacao/Subestações___planejado.shp'
add_mapa_presente = 'mapa_adequabilidade_cenario_presente.tif'
add_mapa_futuro = 'mapa_adequabilidade_cenario_futuro.tif'
'''
custom_hover = custom_hoover()
# As we've seen, the coordinates in our dataset were called x and y, so we are
# going to use these.
key_dimensions = ['x', 'y']
# We are also going to need the name of the value stored in the file. We get it
# from there this time, but we could also set this manually.
value_dimension = 'adequabilidade'
dataarray = rxr.open_rasterio(add_mapa_presente)
dataarray = dataarray.rio.reproject("EPSG:3857")
dataarray = dataarray.where(dataarray!=-9999)
dataarray.values[dataarray.values==9999999]=np.nan
hv_dataset = hv.Dataset(dataarray[0], vdims=value_dimension, kdims=key_dimensions)
hv_mapa_presente = hv.Image(hv_dataset).opts(title='first image',tools=[custom_hover])
#hv_mapa_presente = hd.regrid(hv_image_basic)
dataarray = rxr.open_rasterio(add_mapa_futuro)
dataarray = dataarray.rio.reproject("EPSG:3857")
dataarray = dataarray.where(dataarray!=-9999)
dataarray.values[dataarray.values==9999999]=np.nan
hv_dataset = hv.Dataset(dataarray[0], vdims=value_dimension, kdims=key_dimensions)
hv_mapa_futuro = hv.Image(hv_dataset).opts(title='first image',tools=[custom_hover])
#hv_mapa_futuro = hd.regrid(hv_image_basic)
gdf_parques = gpd.read_file(parques_add)
gdf_parques = gdf_parques.to_crs(3857)
spd_parques = spd.GeoDataFrame(gdf_parques)
spd_parques_plot = spd_parques.hvplot('green')
gdf_rest = gpd.read_file(add_rest)
gdf_rest = gdf_rest.to_crs(3857)
spd_rest = spd.GeoDataFrame(gdf_rest)
spd_rest_plot= spd_rest.hvplot()
hv_tiles_osm = hv.element.tiles.OSM()
'''Futuro'''
gdf_rotas_futuro = gpd.read_file(rotas_futuro_add)
gdf_rotas_futuro = gdf_rotas_futuro.to_crs(3857)
spd_rotas_futuro = spd.GeoDataFrame(gdf_rotas_futuro)
spd_rotas_futuro_plot = spd_rotas_futuro.hvplot(color='purple')
gdf_subestacao_futuro = gpd.read_file(add_subestacao_futuro)
gdf_subestacao_futuro = gdf_subestacao_futuro.to_crs(3857)
spd_subestacao_futuro = spd.GeoDataFrame(gdf_subestacao_futuro)
spd_subestacao_futuro_plot = spd_subestacao_futuro.hvplot(color='orange')
mapa_futuro = hv_mapa_futuro*spd_rotas_futuro_plot*spd_subestacao_futuro_plot*spd_parques_plot
#mapa_futuro = mapa_futuro.redim.range(x=(-4381081.311458136,-3688761.035147772), y=(-780122.6323542815,-495123.75722469855))
#print(mapa_futuro)
'''Passado'''
gdf_rotas_presente = gpd.read_file(rotas_presente_add)
gdf_rotas_presente = gdf_rotas_presente.to_crs(3857)
spd_rotas_presente = spd.GeoDataFrame(gdf_rotas_presente)
spd_rotas_presente_plot = spd_rotas_presente.hvplot(color='yellow')
gdf_subestacao_presente = gpd.read_file(add_subestacao_presente)
gdf_subestacao_presente = gdf_subestacao_presente.to_crs(3857)
spd_subestacao_presente = spd.GeoDataFrame(gdf_subestacao_presente)
spd_subestacao_presente_plot = spd_subestacao_presente.hvplot(color='pink')
mapa_passado = hv_mapa_presente*spd_rotas_presente_plot*spd_subestacao_presente_plot*spd_parques_plot
#mapa_passado = mapa_passado.redim.range(x=(-4381081.311458136,-3688761.035147772), y=(-780122.6323542815,-495123.75722469855))
#mapa= spd_rest.hvplot(responsive=True)
mapa= spd_rest.hvplot()
#mapa = mapa.redim.range(x=(-4381081.311458136,-3688761.035147772), y=(-780122.6323542815,-495123.75722469855))
plot= mapa_passado
startX,endX = mapa.range('x')
startY,endY = mapa.range('y')
#OldStartX,OldEndX = mapa.range('x')
#OldStartY,OldEndY = mapa.range('y')
radio = param.Selector(default='Cenário Presente',objects=['Cenário Presente','Cenário Futuro'])
def keep_zoom(self,x_range,y_range):
print('zoom')
self.startX,self.endX = x_range
self.startY,self.endY = y_range
print(x_range)
print(y_range)
@param.depends('radio')
def view(self,x_range,y_range):
if self.radio == 'Cenário Presente':
self.plot= self.mapa_passado
else:
self.plot= self.mapa_futuro
'''
rangexy = streams.RangeXY(source = self.mapa,
x_range=(self.startX,self.endX),
y_range=(self.startY,self.endY)
)
rangexy.add_subscriber(self.keep_zoom)
print(rangexy)
'''
if math.isnan(self.startX) == False:
print('Not None')
self.OldStartX = self.startX
self.OldEndX = self.endX
self.OldStartY = self.startY
self.OldEndY = self.endY
print(self.startX)
print(self.OldStartX)
self.mapa = self.mapa.redim.range(x=(self.startX,self.endX), y=(self.startY,self.endY))
else:
print('Is None')
self.mapa = self.mapa.redim.range(x=(self.OldStartX,self.OldEndX), y=(self.OldStartY,self.OldEndY))
print(self.startX,self.endX)
print(self.OldStartX,self.OldEndX)
self.plot = (self.hv_tiles_osm*self.mapa*self.plot).opts(active_tools=['pan','wheel_zoom'])
print(self.plot)
print(self.mapa)
return self.plot
viewer = AppTest()
rangexy = streams.RangeXY(source = viewer.mapa,
x_range=(viewer.startX,viewer.endX),
y_range=(viewer.startY,viewer.endY)
)
rangexy.add_subscriber(viewer.keep_zoom)
#stock_dmap2 = hv.DynamicMap(viewer.keep_zoom,streams=[rangexy]).opts(align = 'center')
stock_dmap = hv.DynamicMap(viewer.view,streams=[rangexy],).opts(align = 'center',responsive=True)
bootstrap.main.append(
pn.Column(pn.Param(viewer.param,
widgets={'radio':pn.widgets.RadioButtonGroup}
),
stock_dmap
)
)
bootstrap.show()