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.
Leave a Reply