Wt

this code , based on examples, does not display the map entirely

https://www.webtoolkit.eu/widgets/layout/layout-managers

setTitle("DC 311 Service Requests Map");
useStyleSheet("nostro.css");

auto container = std::make_unique<Wt::WContainerWidget>();
container->setStyleClass("yellow-box");

auto hbox = container->setLayout(std::make_unique<Wt::WHBoxLayout>());

auto map = std::make_unique<Wt::WMapbox>();
map->setStyleClass("green-box");

hbox->addWidget(std::move(map), 1);

auto item = std::make_unique<Wt::WText>("Item 2");
item->setWidth(200);
item->setStyleClass("blue-box");
hbox->addWidget(std::move(item));

root()->addWidget(std::move(container));

Hi Pedro,

apologies for the delayed reply.

I believe you are calling the code correctly, but the "issue" is with the WMapBox itself.
From inspecting your source code, I do not see any sizing information of the WMapBox itself, rather it's an "empty" div, to which content is added once the API calls succeed.
This will likely result in the following flow:

• client accessed page
• server (running Wt application) serves the page containing embedding information
• client receives the page and renders it out (placing the container, hbox, empty map div and text in DOM) <- layouting happens here
• client browser will then call the MapBox API
• client browser is now able to render out the MapBox div

So in the last step, I suspect the element is actually rendered out, after Wt has run its layouting logic.

To "quickly" resolve this, you can likely hook into the MapBox JS code, and listen to a signal that indicates it has done loading/rendering. There, you can attach logic to recalculate the layout (with e.g. window.dispatchEvent(new Event('resize'));). I believe that should do the trick.

Best,
Matthias

this code solves the issue

I made

map->resize(Wt::WLength::Auto, Wt::WLength::Auto);

ApplicationMap::ApplicationMap(const Wt::WEnvironment& env)
  : WApplication(env), map(nullptr), map_container(nullptr)
{
  setTitle("DC 311 Service Requests Map");

  std::unique_ptr<Wt::WHBoxLayout> layout = std::make_unique<Wt::WHBoxLayout>();
  layout->setContentsMargins(0, 0, 0, 0);
  layout->setSpacing(0);

  /////////////////////////////////////////////////////////////////////////////////////////////////////
  // menu sidebar
  /////////////////////////////////////////////////////////////////////////////////////////////////////

  std::unique_ptr<Wt::WContainerWidget> sidebar = std::make_unique<Wt::WContainerWidget>();
  sidebar->setPadding(10);
  sidebar->setWidth(200);
  std::unique_ptr<Wt::WVBoxLayout> layout_sidebar = std::make_unique<Wt::WVBoxLayout>();
  layout_sidebar->addWidget(std::make_unique<Wt::WText>("<h4>DC 311 Service Types</h4>"));


  layout_sidebar->addStretch(1);
  sidebar->setLayout(std::move(layout_sidebar));
  layout->addWidget(std::move(sidebar), 0);

  /////////////////////////////////////////////////////////////////////////////////////////////////////
  // map
  // stretch factor 1 (fills remaining space).
  /////////////////////////////////////////////////////////////////////////////////////////////////////

  std::unique_ptr<Wt::WContainerWidget> container_map = std::make_unique<Wt::WContainerWidget>();
  map_container = container_map.get();
  map = container_map->addWidget(std::make_unique<Wt::WMapLibre>());
  map->resize(Wt::WLength::Auto, Wt::WLength::Auto);

  if (!geojson_wards.empty())
  {
    map->geojson = geojson_wards;
  }

  load();

  layout->addWidget(std::move(container_map), 1);
  root()->setLayout(std::move(layout));
}

Pedro Vicente wrote in RE: detect the maximum screen size, divide screen :

this code solves the issue

I made

map->resize(Wt::WLength::Auto, Wt::WLength::Auto);

ApplicationMap::ApplicationMap(const Wt::WEnvironment& env)
  : WApplication(env), map(nullptr), map_container(nullptr)
{
  setTitle("DC 311 Service Requests Map");

  std::unique_ptr<Wt::WHBoxLayout> layout = std::make_unique<Wt::WHBoxLayout>();
  layout->setContentsMargins(0, 0, 0, 0);
  layout->setSpacing(0);

  /////////////////////////////////////////////////////////////////////////////////////////////////////
  // menu sidebar
  /////////////////////////////////////////////////////////////////////////////////////////////////////

  std::unique_ptr<Wt::WContainerWidget> sidebar = std::make_unique<Wt::WContainerWidget>();
  sidebar->setPadding(10);
  sidebar->setWidth(200);
  std::unique_ptr<Wt::WVBoxLayout> layout_sidebar = std::make_unique<Wt::WVBoxLayout>();
  layout_sidebar->addWidget(std::make_unique<Wt::WText>("<h4>DC 311 Service Types</h4>"));


  layout_sidebar->addStretch(1);
  sidebar->setLayout(std::move(layout_sidebar));
  layout->addWidget(std::move(sidebar), 0);

  /////////////////////////////////////////////////////////////////////////////////////////////////////
  // map
  // stretch factor 1 (fills remaining space).
  /////////////////////////////////////////////////////////////////////////////////////////////////////

  std::unique_ptr<Wt::WContainerWidget> container_map = std::make_unique<Wt::WContainerWidget>();
  map_container = container_map.get();
  map = container_map->addWidget(std::make_unique<Wt::WMapLibre>());
  map->resize(Wt::WLength::Auto, Wt::WLength::Auto);

  layout->addWidget(std::move(container_map), 1);
  root()->setLayout(std::move(layout));
}

git repo

https://github.com/pedro-vicente/wt.extra