About amCharts 5: Maps

Add interactive, stunning, geographical maps to your websites or applications.

amCharts: Maps is an add-on to amCharts: Charts. Use it to add full-fledged interactive maps to your web site or application. amCharts is a ready-made JavaScript library that allows you to add interactive charts to a vast array of applications. With built-in support for TypeScript and ES6 modules, it is fully compatible with Angular, React, Vue.js as well as vanilla JavaScript applications. The map package bundles hundreds of country and regional maps, all available in two versions: high and low detail. Based on GeoJSON standard for its functionality, if a map exists it probably exists in GeoJSON format, and if not there’s probably one available in ESRI shape format, which you can easily convert to GeoJSON.

Series-Based Approach

  • Multi-type series
    • Everything on the maps is organized in "series": areas/countries (polygons), markers (images), lines.
    • Makes it super easy to apply appearance settings or attach behavior to a bunch of elements at once.
    • Series-based approach allows easy structuring of elements, toggling, and other control.
    • It also allows specifying what exactly to include or exclude from GeoJSON. Do you want just a map of Europe? Simply specify country codes that you want to be included. A world map without Antarctica? Specify to exclude it from the map.
  • Combining multiple maps
    • Multi-series support also means you can combine multiple maps on the same chart.
    • Want to add U.S. states on the World map? No problem at all.
  • Line series
    • Map Chart's line series allow adding basic or complex routing maps, connecting existing markers or arbitrary points.
    • As with anything else on amCharts, lines are fully configurable.
    • Make them straight, bent, or follow natural Earth ground curvature.
    • Add and position images on them, as well as make them follow relative rotation.

Useful Functionality

  • Projections
    • amCharts comes with support for a lot of map projections.
    • Projections allow displaying the same map in different ways.
    • The following projections are already supported with more planned: Eckert6, Equirectangular , Mercator, Miller, and Orthographic.
  • Coordinate shifting
    • The map is not constrained to be centered on a single point. You can set your own center coordinates, meaning you can create a map centered any way you like.
    • Easily create a Pacific-centered world map with just a single configuration option.
    • Or how about a rotating globe by combining coordinate shift with an Orthographic projection?
  • Heat maps
    • amCharts brings a very powerful "heat rules" functionality, which you can use with maps as well.
    • Basically, you can bind most of the element's properties to a numeric value. E.g. color fill of the countries, based on their fields in data, allowing you to create heat maps.
    • And, of course, you have a "heat legend" control as well.

Built-In Controls

  • Zoom control
    • Just a single line of code adds neat control your users can use to zoom in and out the map.
    • Another line enables the slider.
    • All elements can be controlled using mouse, touch, and are accessible controls, enabling keyboard control.
  • Mini map
    • Another easily-enabled control shows "bird's eye" view on the map.
    • It will mark the position of the current viewport on a tiny version of the whole map.
    • And, of course, it supports multiple map series, so it is as functional as the map itself – add mini versions of polygon, image, or line series there.
  • Heat legend
    • A heat legend allows automatically showing the "heat scale" of the map areas.
    • It takes the whole range of values and heat colors, then builds a value/color scale.
    • And, best of all, it can display an indicator of where a particular area is within the scale.