Skip to content

Cesium

Cesium is a JavaScript library for creating 3D globes. Cesium can load imagery layers from ReadyMap and display them on the globe.

Here is a complete example on how to load a ReadyMap image layer in Cesium.

<!DOCTYPE html>
<html>

<head>
    <title>Cesium ReadyMap</title>
    <!-- Include the CesiumJS JavaScript and CSS files -->
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.113/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.113/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

    <style type="text/css">
        #cesiumContainer {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            margin: 0;
            overflow: hidden;
            padding: 0;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer"></div>
    <script type="module">
        const viewer = new Cesium.Viewer('cesiumContainer');

        // Create the imagery layer
        let url = "https://readymap.org/readymap/tiles/1.0.0/7/";
        const imageryLayer = Cesium.ImageryLayer.fromProviderAsync(
            Cesium.TileMapServiceImageryProvider.fromUrl(url)
        );

        // Add the imagery layer to the viewer
        viewer.scene.imageryLayers.add(imageryLayer);
    </script>

</body>

</html>