Category: Maps
- Creating custom mapsFeatured
The aim of this tutorial is to get you on the right track for creating your own maps in GeoJSON format, suitable for use with amCharts 4.
Maps - "Fixing" maps for countries that span 180 longitude
Some countries, like New Zealand have islands across that line. This causes the "over the line" parts to be "wrapped" and drawn all the way to the right of the map area. This may not be an issue on a world map, but might look a bit odd for a country only map.
Maps - Adding "Home" Button to Map Chart
Map Chart can be zoomed and panned. There is, however, no built-in "go home" button. This tutorial will show how to add one which resets map's zoom and position to initial state.
Maps - Animated rotation of the globe via APIDemo
This demo shows how we can animate rotation of a globe (MapChart with an Orthographic projection) by creating an animation for its deltaLongitude and deltaLatitude properties.
Maps - Animating map lines with CSS
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.
Maps - Automatic labels over map polygons
During the course of this article we're going to learn how to automatically place labels over map polygons, as well as make them positioned just the right way.
Maps - Building drill-down maps
In this tutorial we'll look at techniques for building various map-based drill-down scenarios.
Maps - Clickable links in tooltips
Tooltips are used in a number of places to provide contextual information on a hovered/tapped object, like a Slice of a Pie Chart, or a country on a map. By default, tooltips are completely static with no way to interact with them. This tutorial will explain how you can make them interactive, adding clickable links to them.
All charts, Maps, Pie, XY - Combining map polygon series to create grouped outlines
This tutorial will show how we can combine two MapPolygonSeries using different geodata granularity to create outlines for groups of smaller areas.
Maps - Configuring Small Map
This quick tutorial will show you how to configure appearance of the Small map control.
Maps - Consistent outlines of Map Polygons on hover
This tutorial will show how we can fix a problem where hovered MapPolygon has part of its outline (stroke) hidden behind the adjacent polygons.
Maps - Constant stroke dash size when zooming MapChartDemo
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.
Maps - Country-specific world maps
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.
Maps - County maps
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.
Maps - Custom polygons on Map Chart
If you are working with Map Chart, you're probably already familiar with MapPolygonSeries thatr get their geographical data from loaded map file, or "geodata". However, Map polygons are not limited to this source of data. You can draw any shape and polygon on the map using in-line lat/long coordinates. This tutorial will show how.
Maps - Disabling mouse wheel zoom in maps
While mouse wheel zooming on maps is a handy intuitive interaction, it may in some cases be frustrating when it interferes with the scrolling of the web page. This tutorial will show how to disable mouse wheel zooming on the Map chart.
Maps - Disabling zoom and pan on a Map Chart
Normally, you can pan and zoom the Map Chart wit mouse and touch. This tutorial will explain how you can disable one or both of these actions.
Maps - Exporting MapChart data
amCharts 4 exporting functionality can export not only visual representation of the chart, but also its data. However, for MapChart which does not have central or clear-cut data, it's disabled by default. This tutorial will show how you can re-enable selective data export for your maps.
Maps - Hide map images until zoomed in
Showing a lot of markers on the map may render it cluttered beyond usability. This tutorial will show how you can easily specify custom zoom levels for each individual image to be shown at.
Maps - Highlight all polygons in Map Series on hover
This tutorial will show how you can highlight all of the polygons in the same series, when just one of those is hovered.
Maps - Manipulating chart data
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.
All charts, Maps, XY - Map heat legend with real start/end value labels
A Heat legend uses regular axis to display value range/scale. For narrower setups it might mean that there are not real start/end labels. This tutorial will show how to remedy that.
Maps - Map line with two arrowsDemo
Normally, a MapLine object can have a single arrow head. This demo shows how we can create additional Triangle objects to create a two-way arrows on a MapChart.
Maps - Map polygon hover via API
In most map setups, a polygon (country) will change color and show a tooltip with its name when hovered. This tutorial will show how you can "simulate" hover via API, without user actually interacting with the map.
Maps - Map with Orthographic (globe) projection
This short tutorial will show how you can create a Globe out of your map using Orthographic projection.
Maps - MapChart with Bubbles and LabelsDemo
This quick demo will show how you can use heat rules to place bubbles and related labels on a MapChart.
Maps - Maps with separator lines
Some maps, bundled with amCharts 4, such as "U.S. territories" come with built-in separator lines. This tutorial will explain how to enable and configure them.
Maps - Overriding series' tooltip fill color
Normally, a Tooltip that is displayed when you hover or touch a series' item - slice, column, etc. - is colored the same way as the related object. This quick tutorial will show you how to override that color.
Maps, Pie, Radar, Treemap, XY - Plugin: Bullets
"Bullets" is a collection of configurable shapes (stars, pins, flags, etc.) that you can use as chart bullets, map markers, and anywhere else.
Maps, Plugins, Radar, XY - Plugin: Overlap Buster (experimental)
This tutorial will show how you can use OverlapBuster plugin (available since version 4.6.2) to make overlapping items such as bullets, map markers, or just about any other element "explode" to sides when hovered, for easy access to them
Maps, Plugins, Radar, TimeLine, XY - Pre-zooming Map to a Country
You can pre-zoom the map to certain coordinates and level. If you don't want to do that, you can make the chart pre-zoom to a particular country. This tutorial will explain how.
Maps - Pre-zooming Map to a list of countries
In this tutorial we explained how you can pre-zoom your map to a specific country. This tutorial builds on it to produce an example that pre-zooms the map to several countries.
Maps - Projected circles over map
This tutorial will show how you can add "projected circles" on the map. Projected circles respect map projection and look much more natural, as if they were "laid down" on the ground, not stuck as pins.
Maps - Resetting Map Position/Zoom
All Map Charts, unless disabled, can be panned and zoomed. This tutorial will explain how to reset map's position and zoom to its original state via custom button or API.
Maps - Retrieving information of a clicked Map Object
In this tutorial we've seen how we can zoom in on a clicked country. We're going to build on that to retrieve information about clicked object.
Maps - Retrieving latitude/longitude of map click
This tutorial will show how we can retrieve latitude / longitude coordinates of a click on map.
Maps - Setting initial zoom and position of a Map chart
The Map will always start off fully zoomed out and centered. However, in some cases, you might want to start the map pre-zoomed to some place. This tutorial aims to explain how to do just that.
Maps - Triggering map polygon tooltip via APIDemo
This demo shows how we can programatically trigger display of the rollover tooltip on a MapChart by setting respective polygon's isHover property.
Maps - Use custom image as draggable and zoomable MapChart backgroundDemo
This demo shows how we can use any image as a MapChart background that pans and zooms together with the map itself.
Maps - Using "d3-geo" projections
There are quite a few projections built-into amCharts 4. However, if you are not finding one that suits your needs, you can use one from "d3-geo" package. This tutorial will explain how.
Maps - Using actual images in MapImageSeries
In our main Map Chart article we have touched the topic of creating an image series, feeding them data, and positioning them. However, we were operating using plain, same shapes. This tutorial will show how we can use actual images as markers on the map.
Maps - Using Albers USA projection
The most common depiction of a map of the United States is one that shows Alaska and Hawaii placed right below mainland USA. This allows this map to be more compact and usable, in comparison how it would be if both of those states were in their usual places. This way of depicting USA map is called "Albers USA projection", and this short tutorial will explain how to use it.
Maps - Using custom map zoom settings for individual countries
Our Map Chart allows zooming directly to a specific polygon (country). However, for some countries, automatically-calculated zoom settings might not cut it. This tutorial will explain how you can use Polygon series data to override default zoom settings with custom ones.
Maps - Using India version of world map
This short tutorial will show how you can use MapChart with a version of world map that is compatible with regulations in place in India.
Maps - Using map country name translations
By default the maps bundled with amCharts 4 include names of countries in English. This tutorial will show how you can use bundled translation files to translate them into a multitude of other languages.
Maps - Using MapChart with Google Maps APIDemoIntegrations, Maps
- Using U.S. congressional districts maps
Since version 4.1.8 the geodata package for Map Chart includes a collection of maps for U.S. Congressional Districts. This tutorial will show how you can use them.
Maps - Using U.S. county maps
You might have not known that the geodata package for Map Chart includes not only country maps, but also detailed county maps for all U.S. states.
Maps - Zooming to map area on click
This tutorial will show how you can set up your map to automatically zoom to an area (i.e. country) when user clicks on or taps it.
Maps