Any way of hiding terria sidebar when share link is generated?

[sammyaxe]

Hi there,

This is not a bug, I'm just wondering if there is any easy way of hiding sidebar if terria is accessed via share link?
We don't want users to be able to browse our data catalogs and we want them only to consume stories that are already built.

Any help would be awesome.

Thanks

[nf-s]

Hi!

This can be done by adding hideExplorerPanel=1 to your share link.
For example - https://nationalmap.gov.au/#share=s-tFkf1XHwrPZPx8IiFiezo1m1ke&hideExplorerPanel=1
Let me know if this works for you

Cheers,
Nick

[sammyaxe]

@nf-s do you know if I can use this config in file? I actually want to make stories play by default, but I would want to set this option in config file rather than add it to the url as param

[sammyaxe]

@nf-s thanks for quick reply.

While it's good to know about this option, I wish it would completely hide the sidebar, as it still possible to expand it even if it's closed by default. Maybe there is an easy way to add a class somewhere on a body tag when this option is enabled? This way I could hide the buttons via CSS and that would totally satisfy my needs.

Also I noticed this site is in your example is using url shortener, is this custom functionality or is it configurable?

Sam

[nf-s]

The URL shortener is the terriajs-server share service. If you're using terriajs-server you can configure it to store share data in AWS S3 or Github Gists. Example configuration can be found here - https://github.com/TerriaJS/terriajs-server/blob/c444469d519c25ceb4a7c0379b4f84d5e15085ee/serverconfig.json.example#L134

I can't find a way to completely hide the sidebar programmatically, but it could be achieved with something like this:

.tjs-standard-user-interface__sidePanel {
    display: none;
}

I'm asking around so I'll get back to you if something better comes up

Nick

[sammyaxe]

To anyone wondering, not sure if this is good way to do it but it works for me....

Since I'm using url shortener I the bit that is responsible for loading share url parameters and simply added document.body.classList.add("share-frame"); there, which then allows me to hide whatever I want using css for when terria is accessed via shared link.

This requires to clone the package using yarn so you could edit npm module without losing the changes.

  var that = this;

  if (!this.isUsable) {
    throw new DeveloperError("ShareDataService is not usable because ###");
  }

  return loadJson(this.url + "/" + token)
    .then(function(json) {
      document.body.classList.add("share-frame");
      return json;
    })
    .otherwise(function() {
      that.terria.error.raiseEvent(
        new TerriaError({
          title: i18next.t("models.shareData.expandErrorTitle"),
          message: i18next.t("models.shareData.expandErrorMessage", {
            appName: that.terria.appName,
            email:
              '<a href="mailto:' +
              that.terria.supportEmail +
              '">' +
              that.terria.supportEmail +
              "</a>."
          })
        })
      );

      return undefined;
    });
};

[sammyaxe]

I would like to keep this issue open, incase someone end ups doing more elegant solution.