Consistent outlines of Map Polygons on hover

Type tutorial

This tutorial will show how we can fix a problem where hovered MapPolygon has part of its outline (stroke) hidden behind the adjacent polygons. The problem Let’s say we have a “hover” state on our polygons to apply thicker outline (stroke) on a map polygon when it’s hovered. E.g.: The code above ensures that when […]

Constant stroke dash size when zooming MapChart

Type demo

We can use setting strokeDasharray to make lines on a MapChart dashed. However, zooming in will also make dashes grow in size. This demo shows how we can add adapter which would maintain the same dash length across zooms.

Combining map polygon series to create grouped outlines

Type tutorial

This tutorial will show how we can combine two MapPolygonSeries using different geodata granularity to create outlines for groups of smaller areas. The task Let’s say we have a county map of Canada. We would use geodata/regions/canada/canadaCountiesLow map for that. Easy enough, but we would get a map with all the counties, with no distinction […]

Using MapChart with Google Maps API

Type demo

This short demo shows how our own MapChart can be overlaid over Google Maps using JavaScript Maps API, complete with total syncing of zoom and pan.

County maps

Type tutorial

The geodata package for MapChart includes not only country and world maps. It also has special county maps for some of the worlds countries, like United States, Canada, and Mexico. This tutorial will show how you can use them. Using county maps The county map files for each available country are located under regionsubdirectory of […]

Manipulating chart data

Type tutorial

Each chart type in amCharts family has a specific requirement for structure its data should come in. Mostly it comes in a form of an array of objects. However sometimes you don’t have control over format of source data. This tutorial will explore how we can pre-process data to reshape it into an amCharts-suitable form. […]

Country-specific world maps

Type tutorial

Some countries like India, China, and some other have local regulations regarding how their borders are drawn that differ from UN-mandated or actually controlled territories. This tutorial will explain how to use country-specific maps with MapChart. Available maps The following country-specific versions of World map are currently available: Country Map files (.ts; .js; .json) Map […]

Animating map lines with CSS

Type tutorial

Each line in a MapChart is an SVG object in document’s DOM tree. This means we can use CSS to target and modify it, including using CSS animations. This tutorial will show how we can make MapLine animate itself from the start. Prerequisites We’re going to assume that you know what MapLine is, how to […]

Triggering map polygon tooltip via API

Type demo

This demo shows how we can programatically trigger display of the rollover tooltip on a MapChart by setting respective polygon’s isHover property.