How to adjust the scene size?

CesiumJS
1

Basically I want to get rid of these black spaces on top and bottom of the map. I tried adjusting the camera but it didn’t work. Any ideas?

sp

2

@eserrose

Thank you for your post! Based on what you have shared, my best guess is that the black spaces that you are seeing are an artifact from the HTML code that you have written. I would begin my investigation there.

-Sam

3

Hello!

I have the same problem loading cesium in a UWP WebView !!

Do you have any solution?

Best regards,
Jose

4

@protonjm

Welcome to the community! :grinning: :rocket:

Can you please share some more information on your issue? Some sample code or screenshots would great. I would also love to learn more about the overall strategy that you are implementing to fix this issue.

-Sam

5

My HTML is pretty much empty.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        @import url(../node_modules/cesium/Build/Cesium/Widgets/widgets.css);
        html, body, #cesiumContainer {
            height: 100%; margin: 0; padding: 0; overflow: hidden;
        }
    </style>

    <script> if (typeof module === 'object') {window.module = module; module = undefined;} </script>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="module" src="main3D.js"></script>
    <script>if (window.module) module = window.module;</script>
    <title>3D</title>
</head>
<body>
    <div id="cesiumContainer"></div>
</body>
</html>
6

There’s no way for us to run this code (it’s using locally loaded modules). If I were you, and to make sure you get get some help, make a Sandcsastle example of your issue. But also, to make it easier on you, wrap your div in another div with a style with a solid border of some color to see where the viewer stops and starts.

But also, what do you mean "get rid of it? Given the aspect ratio of the world map, what are you expecting there instead? Are you going for some weird projection, or do you expect the map to have the normal aspect ratio but all the way to the edges? This doesn’t make any sense, so please explain.

Cheers,

Alex

1 Like
7

I want the scene to remain fixed. At the moment I can click and drag the mouse up and down, but I want it to be constrained by the map’s limits, not go overboard. My window is actually the same size with the map, but I took the screenshot while moving the mouse down. Does that make sense?

As a solution I tried to disable vertical scrolling, but zooming in and out became very messy.

8

So, you want to disable the scrolling? That’s a very different thing from “get rid of these black spaces”. :slight_smile:

Have you looked at all the options in viewer.scene.screenSpaceCameraController? There’s also mouse events you can delete (a common one is to remove the double-click handler with viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK):wink: with a similar apporach to all things scrolling, rotating and dragging.

Let us know if that’s what you’re trying to do.

Cheers,

Alex

9

Hey,
in my opinion @eserrose wants a behaviour some JS 2D-mapping libraries like leaflet etc. support

Link to similar example on stackoverflow

leaflet - Setting bounds and making map bounce back if moved away - Geographic Information Systems Stack Exchange

I dont think Cesium supports it through its API directly at the moment. One possibillity would be, to alter the input events @Alexander_Johannesen mentioned:

Have you looked at all the options in viewer.scene.screenSpaceCameraController? There’s also mouse events you can delete (a common one is to remove the double-click handler with

You could for example add some if-else statements to the events regarding the coordinates of the “viewer extent”. You will get the bounds like this:

var bounds = viewer.scene.camera.computeViewRectangle()

Best, Lennart

1 Like