How to Display a Raster Image at a Specific Location in CesiumJS

/ Cesium, Simulation
Raster display using cesium - Manya Technologies

Introduction

CesiumJS is a powerful open-source library for creating 3D geospatial applications on the web. While it is widely used for visualizing vector data, 3D tiles, and terrain, raster imagery also plays a crucial role in many applications. Raster images such as satellite snapshots, scanned maps, or custom overlays can provide valuable context to your 3D globe.

In this post, we’ll show you how to display a raster image at a specific latitude-longitude location in CesiumJS using SingleTileImageryProvider.

Use Cases of Raster Images in CesiumJS

Raster images can be highly useful in various geospatial and simulation projects:

  • Airport and base maps – Overlaying scanned maps or airfield charts for pilot training simulations.
  • Disaster management – Displaying drone-captured raster imagery over affected areas.
  • Defense & surveillance – Custom radar coverage or sensor footprint visualization.
  • Urban planning – Historical maps or planning layouts displayed on the 3D globe.
  • Research & education – Annotated maps to provide context in learning environments.

Example Code to Add a Raster Image

CesiumJS makes it easy to overlay a raster image using SingleTileImageryProvider. You simply define the image path and its bounding rectangle in longitude-latitude degrees.

Here’s a working example:

// Add a raster image at a specific lat/lon extent
const rasterLayer = viewer.imageryLayers.addImageryProvider(
  new Cesium.SingleTileImageryProvider({
    url: "/webpage/images/part-airport.png", // path to your image
    rectangle: Cesium.Rectangle.fromDegrees(
      77.5,   // West longitude
      12.5,   // South latitude
      78.5,   // East longitude
      13.5    // North latitude
    )
  })
);

Key Points:

  • url – Path to your raster image. Ensure it’s hosted and accessible by CesiumJS.
  • rectangle – Defines the geographic extent where the image will be draped. The order is [west, south, east, north] in degrees.
  • Layer stacking – You can add multiple raster layers, and Cesium will blend them with existing base layers.

Conclusion

Displaying raster images in CesiumJS is straightforward and adds significant value to geospatial visualization. Whether you’re integrating scanned maps, drone images, or simulation overlays, Cesium provides the flexibility to align your raster imagery exactly where you need it on the globe.

At Manya Technologies, we specialize in building custom GIS solutions, real-time visualization tools, and simulation applications using CesiumJS, QGIS, and PostGIS. If your organization is looking to integrate raster, vector, or 3D data into an interactive web-based platform, we can help.

📩 Contact us today at Manya Technologies to discuss your project requirements.

Scroll to Top