Create custom maps with Highcharts Maps


Blog Posts Data Journalism Highmaps Tutorials0 comments

Featured image

 
I was looking for a website that included a map of all the music schools in Luxembourg. Unfortunately, I could not find one, so I decided to create one.

I started by laying out my requirements: one, a list of all the music schools’ addresses. Two, a Luxembourg map in a GeoJSON form. Three, a Javascript library to create the project.

I received approximately 120 addresses of music schools and institutions from the Luxembourg public repository.
For the library, I choose Highcharts Maps because it uses JavaScript and offers various maps, including the map of Luxembourg. However, the map was not detailed enough for my project! So I had to make some changes and add customization. Luckily Highcharts offers a step-by-step tutorial on how to create a custom map; the steps are very simple to follow.

I used a supplemental Luxembourg map (shapefile) from The Luxembourgish data platform. The initial map was too detailed for my project. Therefore, I uploaded the shapefile into QGIS (free software) to reach a reasonable output that could be loaded faster by minimizing the details up to 100 meters. The result was a 130kb file, instead of a 1.6 MB file, with details of 102 communes of Luxembourg to give an impression of relative distances. Then, I exported the file as geoJSON, added the header Highcharts.maps["Luxembourg"], and changed the extension to .JS.

Next, I simply transposed the geocoded schools’ addresses locations on the Luxembourg map. I got inspired by the Highcharts Maps simple flight routes demo.

To create a compelling interactive map, I split the music schools into five categories, music school, music school dependencies, conservatoires, conservatoire dependencies, and other music institutions.
The final result was a simple and informative map:

Creating an interactive map was easy and smooth, thanks to the Highcharts library that does the heavy lifting. A big thanks to the support team and the fact that users can use Highcharts for free as long as it is not for commercial use.

Consent for marketing cookies needs to be given to post comments