Moving controls of Map

Hi all,

I have a rather simple question but I can't find a solution. I have a map on a dashboard but the way its fit on there the + / - controls are cut off. I am wondering if there is anyway to move the controls?

I have tried using a coordinate container and flex container and still can't figure it out. If anyone has any idea that would be great.

The +/- controls are on the top left so I would expect them to show up unless you have an incorrect justification setting. Things to try:

  • Set justification to Flex Start.
    position.grow : 1
    position.shrink : 1
    basis : auto

When I create a new map the controls are on the bottom left and no matter what I do the controls look fine on that view but when I bring it into a dashboard they cut off at the bottom

If you can share your files perhaps someone could take a look for you.

You need to be more precise in your description. Do you mean that in an Embedded View component the map view is cropped?

I don't know how this is happening. There is no setting to change the position of the zoom controls.

Here is a screenshot of my map. Its a brand new map no settings have changes. The controls are on the bottom left.

I have a dashboard component and on it I have 5 widgets. One of them being this map. However, unless I make the map take up half the dashboard area the controls get cut off as seen in the next picture.

Hoping this makes more sense now

Try launching it in your browser and use the Developer Tools (usually F12) to inspect the controls. I can see that they are using a series of classes called "leaflet".

Check your Project Browser, Styles section and make sure that you haven't got an override setting in the Advanced Stylesheet (stylesheet.css). Another possibility is that you are inheriting some properties from another project. (Are you working as part of a team?)

Wow you were right that is what it is. I knew it was something simple thank you.

1 Like