topic how to hide map-info line at bottom of screen in Experience Builder Custom Widgets

how to hide map-info line at bottom of screen

MichaelLev — Tue, 06 Feb 2024 12:28:37 GMT

I am new to EXB (Develope Edition).

The map-info line at bottom of screen occupies "precious" space...

It actually contains 2 parts - long part of general info, and short part - "Powered by Esri"

I need to hide the whole info-line so I can put my customised coordinate widgets at bottom of screen.

(replacing the long info by my coordinate widget and displaying only "Powered by Esri" is also an option).

I have not succeeded to locate the "info-line" widget in order to remove it.

Maybe adding "display: none" is practical, but I don't know how to do it.

Re: how to hide map-info line at bottom of screen

JeffreyThompson2 — Tue, 06 Feb 2024 13:53:03 GMT

Be aware that removing the attribution line will in almost all cases violate the terms of service.

With that said, this bit of css appears to work.

.exbmap-ui-group-attributionGroup { display: none; }

Re: how to hide map-info line at bottom of screen

JustinOBrien_SSP — Tue, 06 Feb 2024 15:28:20 GMT

Piggybacking off of @JeffreyThompson2, you could also use that css selector to move the attribution div to wherever you want within its containing html element or the screen space.

Re: how to hide map-info line at bottom of screen

abureaux — Tue, 06 Feb 2024 15:16:18 GMT

I am seconding this. While technically possible, I would not recommend doing so.

Essentially, it's like stealing.

Re: how to hide map-info line at bottom of screen

MichaelLev — Mon, 26 Feb 2024 14:08:31 GMT

@JeffreyThompson2 If I want to try, I don't know WHERE to do this, and HOW, because implementing css in react is so different than in regular js...

What I want is to put coordinates widget at bottom, so it's not disturbed. Maybe displaying "Powered by Esri" alone, at right or left corner, or play with z-index. But' as I said, I don't know where and how to do such things.

Re: how to hide map-info line at bottom of screen

JeffreyThompson2 — Mon, 26 Feb 2024 15:24:44 GMT

Here are a few ways to add css in Experience Builder.

One of the things that makes React such a popular front-end framework is that every component can import it's own css. Used correctly this feature can make for some very well-designed applications. If you create a file called widget.css in the same runtime folder with the widget.tsx, adding the line import './widget.css' to the top of widget.tsx will import your css file.
The most Experience Builder way of adding css would be to create a theme with a style.scss file. This is a good way to create universal css for all components in your application. https://developers.arcgis.com/experience-builder/guide/theme-development/
You could also create a css widget that has no other function than to import a css file as above and use its own css to hide the css widget. This would create a universal css file without the need to alter the overall theme.

Re: how to hide map-info line at bottom of screen

MichaelLev — Mon, 26 Feb 2024 15:57:43 GMT

@JeffreyThompson2 Thank you! I'll try the ways you presented. Meanwhile I searched for "bottom-line1" in whole client, and changed marginBottom to -17px. I did it in pc-layout-json.ts but I had to do the same also in the 2 js files. I still do not understand why those 2 js files are not automatically built from ts and tsx files...

( I used "blank page" and no template when creating the exb app)