Map Projections

• Overview
• Setting Map Projection
• Available Projections
  • Aitoff
  • August
  • Bonne
  • Eckert1
  • Eckert3
  • Equirectangular
  • Fahey
  • Hammer
  • Mercator
  • Orthographic
  • Robinson
  • Wagner6
  • WSG84
• Changing region projection
  • Using PROJ4.JS

Overview

A map projection is any method used in cartography to represent the two-dimensional curved surface of the earth or other body on a plane. The term "projection" here refers to any function defined on the earth's surface and with values on the plane, and not necessarily a geometric projection.

Flat maps could not exist without map projections, because a sphere cannot be laid flat over a plane without distortions.

Map projections can be constructed to preserve one or some of map regions properties (area, shape, direction, bearing, distance, scale), though not all of them simultaneously. Each projection preserves or compromises or approximates basic metric properties in different ways. The purpose of the map, then, determines which projection should form the base for the map. Since many purposes exist for maps, so do many projections exist upon which to construct them.

AnyChart allows to display any map in several projections, below you will find a list of all available projections with map samples.

Depending on your visualization task you can choose what projection to use in your project or give end-user an ability to swap projections in real-time.

Important: not only you can change the projection of a map, you can also change projection of any selected region (feature) using featureCrs() method, see Changing Region projection section for this. This feature can come in particularly handy when you need to create a custom map with small regions or a region located in high/low latitudes.

Setting Map Projection

To set map projection you should set its type using .crs() method:

var map = anychart.map();
map.crs("august");

Snippet above shows a string as a parameter for .crs() method. Here is how the projection can be set using enum:

var map = anychart.map();
map.crs(anychart.enums.MapProjections.AUGUST);

Available Projections

As far as AnyChart constantly implements new features to improves AnyChart charting library, all new projections in further versions would be added MapProjections enum along with existing ones.

The table below lists all available projection types, samples can be found after the table.

Aitoff

World map in Aitoff projection:

var map = anychart.map();
map.geoData(anychart.maps.world_source);
map.crs("aitoff");

August

World map in August projection:

var map = anychart.map();
map.geoData(anychart.maps.world_source);
map.crs("august");

Bonne

World map in August projection:

var map = anychart.map();
map.geoData(anychart.maps.world_source);
map.crs("bonne");

Eckert1

World map in Eckert1 projection:

var map = anychart.map();
map.geoData(anychart.maps.world_source);
map.crs("eckert1");

Eckert3

World map in Eckert3 projection:

var map = anychart.map();
map.geoData(anychart.maps.world_source);
map.crs("eckert3");

Equirectangular

World map in Equirectangular projection:

var map = anychart.map();
map.geoData(anychart.maps.world_source);
map.crs("equirectangular");

Fahey

World map in Fahey projection:

var map = anychart.map();
map.geoData(anychart.maps.world_source);
map.crs("fahey");

Hammer

World map in Hammer projection:

var map = anychart.map();
map.geoData(anychart.maps.world_source);
map.crs("hammer");

Mercator

World map in Mercator projection:

var map = anychart.map();
map.geoData(anychart.maps.world_source);
map.crs("mercator");

Orthographic

World map in Orthographic projection:

var map = anychart.map();
map.geoData(anychart.maps.world_source);
map.crs("orthographic");

Robinson

World map in Robinson projection:

var map = anychart.map();
map.geoData(anychart.maps.world_source);
map.crs("robinson");

Wagner6

World map in Wagner6 projection:

var map = anychart.map();
map.geoData(anychart.maps.world_source);
map.crs("wagner6");

WSG84

World map in WSG84 projection:

var map = anychart.map();
map.geoData(anychart.maps.world_source);
map.crs("wsg84");

Changing region projection

All samples above show how to change projection of a map, but there is also an option to change projection of any selected region or regions using featureCrs() method. This feature can come in particularly handy when you need to create a custom map with small regions or a region located in high/low latitudes. Usually this method is used along with featureScaleFactor() and featureTranslation(). For the moment regions projection settings can be set only using PROJ.4 strings (this will be improved in future versions on AnyMap), if you need assistance with such settings, do not hesitate to contact AnyChart Support.

Using PROJ4.JS

Proj4 is a JavaScript library to transform coordinates from one coordinate system to another, including datum transformations. It is necessary to reference Proj4 if the map uses traditional coordinates for setting the position of any component of the map such as labels, bubbles, etc. Also proj4 is essential to be added when the map uses some projection. Reference it with the <script> tag:

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js" data-export="true"></script>
</head>