#Getting started with Highcharts Maps
#Load the required files
For basics, see Highcharts installation. The framework requirements and installation is the same for Highcharts Maps as for Highcharts. To load Highcharts Maps as a standalone product (if you don't have a license for Highcharts), include this script tag:
If you already have Highcharts installed in the web page and want to run Highcharts Maps as a plugin, include this script tag after
#Load the map
Highcharts Maps loads its maps from TopoJSON or GeoJSON which are open standards for description of geographic features. Most GIS software supports these formats as export from for instance Shapefile or KML export. Read more in the API reference and see the live demo.
There are three basic sources for your map:
- Use our Map collection. Read the tutorial article on the map collection to get started.
- Find an SVG map online and convert it using our (experimental) online converter.
- Create your own map from scratch using an SVG editor, then convert them online. Read our tutorial on Custom maps for Highcharts Maps.
#Initialize the map
Read more on initializing a chart in Your first chart. The map is constructed with the
#Add and join data
Once the empty map is in place, we're ready to add the data to the series.data option. For the joining to work, each data point must have some identifier that relates to the same identifier in the map data set. This or these identifiers are then specified in the joinBy option. See detailed documentation and examples there.
Another way to join the data is to simply skip the
mapData and set the geometry directly on the data point. This mixes the data and the structure and is not generally recommended, but it performs faster, and may be considered in situations where you have static data and a backend to perform the joining.