How to set Cesium JS map center (coordinates: latitude & longitude)

Question

I would like to initialize cesium so that the map is centered on some specific coordinates instead of the default ones. I have the following initialization code:

var map = new Cesium.CesiumWidget('map-js');
map.centralBody.terrainProvider = new Cesium.CesiumTerrainProvider({
    url : 'http://cesiumjs.org/smallterrain'
});

Usually, with other mapping libraries, I would set the center on initialization, eg on mapbox:

map = L.mapbox.map('map-js', 'api-key').setView([42.12, 12.45], 9);

How to do that with cesium ?

Answer 1

Try adding this after your first block of code above:

var scene = map.scene;
var ellipsoid = Cesium.Ellipsoid.WGS84;
var west = Cesium.Math.toRadians(-77.0);
var south = Cesium.Math.toRadians(38.0);
var east = Cesium.Math.toRadians(-72.0);
var north = Cesium.Math.toRadians(42.0);

var extent = new Cesium.Rectangle(west, south, east, north);
scene.camera.viewRectangle(extent, ellipsoid);

More examples are available in our Camera Demo .

EDIT (May 2014): Due to Cesium API changes, .getCamera() is renamed .camera , the camera's .controller was removed and rolled into the camera itself, and Extent is renamed to Rectangle . The above code now reflects the new API. For a complete list of breaking changes, see CHANGES.md .

Answer 2

If you want to keep the current "zoom" (aka camera distance from ellipsoid) and only have lon/lat, you could call setView() and use the current camera height, like:

    viewer.camera.setView({
        destination : Cesium.Cartesian3.fromDegrees(
            longitude,
            latitude,
            Cesium.Ellipsoid.WGS84.cartesianToCartographic(viewer.camera.position).height
        )
    });