amCharts 5.21: real globes, day and night, and flights in 3D

amCharts 5 maps can now show the real Earth: a satellite image that turns and zooms with the map, with day and night where they are right now. Routes can leave the ground and arc above it, and points can fly along them.

Satellite imagery

MapRasterSeries draws a whole-world image on the map and reprojects it as the map rotates and zooms. It uses WebGL where available.

chart.series.push(am5map.MapRasterSeries.new(root, {
  src: "https://cdn.amcharts.com/lib/5/geodata/images/earthDay2048.jpg"
}));

Day and night images come with the geodata package and on the CDN, in 2048 and 4096 px. Any whole-world image in equirectangular projection works, such as NASA’s Blue Marble.

Map raster series documentation

Day and night

Add a night image and a time, and the map shows day where the sun is up and city lights where it isn’t:

chart.series.push(am5map.MapRasterSeries.new(root, {
  src: "https://cdn.amcharts.com/lib/5/geodata/images/earthDay2048.jpg",
  nightSrc: "https://cdn.amcharts.com/lib/5/geodata/images/earthNight2048.jpg",
  sunDate: "now"
}));

"now" keeps it moving with the clock. Any date works too, and am5map.getSunPosition(date) tells you where the sun is overhead at that time.

For maps without satellite imagery, NightSeries shades the night side, with a soft twilight band and the sun:

chart.series.push(am5map.NightSeries.new(root, {
  sunDate: "now"
}));

Night series documentation

Routes and points above the ground

Map lines can now rise off the surface. Set altitude, in metres, and each leg arcs above the map like a flight path:

lineSeries.mapLines.template.set("altitude", 800000);

For scale, 400,000 is about the height of the International Space Station.

Points can float too: set altitudeField and they take their height from the data. A point placed on a line rides along the arc at the line’s height, so a plane can fly its route.

See the Pen Satellite Image Globe by amCharts (@amcharts) on CodePen.

Map line altitude documentation

Bullets on the surface

Map markers normally face the viewer. With surfaceBullets: true, they lie flat on the map instead and turn and stretch with the projection, as if painted on it.

Surface bullets documentation

Easier navigation

• clickZoom on a polygon series zooms to a clicked country; a globe turns to it. Click again to go back home.
• autoHome sends the map to its home position once it loads.
• boxZoom zooms to an area you draw.
• Double-click zooms in; Shift + double-click zooms out.

Pan and zoom documentation

Get amCharts 5.21

• npm: npm install @amcharts/amcharts5
• CDN: https://cdn.amcharts.com/lib/5/index.js

All options: amcharts.com/download

Everything else in 5.21: changelog

Imagery: NASA Earth Observatory