<\/p>\n
If you don’t have your own TopoJSON files, there are some collections available on GitHub. One of them is TopoJSON Collection<\/a>, where the author has picked map sources that are believed to be licensed for reuse or which are in the public domain. For our demo we will use a Europe map from another provider, leakyMirror<\/a>, served through jsDelivr<\/a>.<\/p>\n In order to use TopoJSON in Highcharts Maps, we must first decode it to GeoJSON. This is very simple using the TopoJSON Client<\/a> library.\u00a0In this case, we extract the map of Europe which is encoded into Now we have a However that doesn’t look good out of the box. Especially for areas of lower latitudes, the map is distorted. We want to apply a projection using Proj4.js<\/a>, an MIT licensed JavaScript library. In the demo we have written a helper function that translates the GeoJSON geometries into projected coordinates. Europe looks good using a Lambert Conformal Conic projection,\u00a0with a projection\u00a0center in the middle of the area. Projection of all the points in a geojson typically takes 20-30 ms depending on the resolution of the map, so if client-side performance is crucial, you should consider doing this on the server side.<\/p>\n <\/p>\n In the final result we have a nice, projected map. In the sample we use an array of random numbers as the data values, and set
\nHighcharts Maps has built-in support for GeoJSON, a format for defining map shapes and features. A popular extension of GeoJSON is TopoJSON<\/a>. In TopoJSON, repetetive path segments are extracted and defined only once, and then referenced from the geometries. This makes the file size smaller and better suited for loading in web pages. For example, imagine a map with two neighboring countries. In GeoJSON, the border segment would be repeated for the outline of each of the countries. In TopoJSON this segment is extracted and referenced from both countries.<\/p>\nMap data<\/h4>\n
Convert into GeoJSON<\/h4>\n
topology.objects.europe<\/code>.<\/p>\n \/\/ Convert the topoJSON feature into geoJSON\r\nconst geojson = window.topojson.feature(\r\n topology,\r\n topology.objects.europe\r\n);<\/pre>\n
geojson<\/code> variable that we can apply directly into Highcharts Maps’ chart.map<\/a> option.<\/p>\nProjection<\/h4>\n
\/\/ Apply a Lambert Conformal Conic projection to the GeoJSON\r\nproject(\r\n geojson,\r\n '+proj=lcc +lat_1=43 +lat_2=62 +lat_0=30 +lon_0=10'\r\n);<\/pre>\n
Putting it together<\/h4>\n
joinBy<\/code> to null<\/code> to apply it to the countries. In a real world chart we would set joinBy<\/a> to link the data to the map using one of the GeoJSON\/TopoJSON identifier properties, like name, FIPS or HASC.<\/p>\n